前言

我們要開發(fā)小程序，基本上都要涉及到以下幾個(gè)方面的工作：

1、購買服務(wù)器，用來運(yùn)行后臺(tái)及接口程序；

2、購買域名，小程序中需要通過域名來調(diào)用服務(wù)器的數(shù)據(jù)；

3、購買 SSL 證書，小程序強(qiáng)制需要 https 的地址，傳統(tǒng)無證書不加密的 http 請(qǐng)求微信不支持；

4、后臺(tái)程序員開發(fā)后臺(tái)程序，這樣才能登錄后臺(tái)進(jìn)行商品管理、訂單維護(hù)、資金財(cái)務(wù)管理等等；

5、后臺(tái)程序員開發(fā)小程序可用的 restfull api 接口或者是 websocket 接口；

6、開發(fā)的后臺(tái)及接口程序的安全性、功能性、穩(wěn)定性測(cè)試，bug調(diào)試完畢；

7、UI 設(shè)計(jì)師設(shè)計(jì)精美的小程序界面；

8、前端工程師根據(jù) UI 設(shè)計(jì)稿進(jìn)行小程序開發(fā)、同時(shí)對(duì)接 api 接口完成最終小程序的開發(fā)；

所謂麻雀雖小五臟俱全，想想要開發(fā)一款負(fù)責(zé)任、運(yùn)行穩(wěn)定、數(shù)據(jù)安全有交代的小程序，也沒有想象的那么容易吧？

或許許多人看到這里，已經(jīng)倒吸了一口冷氣了吧？  這。。。 太麻煩了吧？！有沒有什么捷徑可以走？！

回答是肯定的，那就是你可以在小程序中集成 “apifm-wxapi” 模塊，實(shí)現(xiàn)快速開發(fā)......

什么是“apifm-wxapi”

借用 “apifm-wxapi” 官方的介紹來回答一下這個(gè)問題：

微信小程序云開發(fā)工具包，借此工具包，你將無需投入服務(wù)器、無需接口編程、無需開發(fā)后臺(tái)，將傳統(tǒng)開發(fā)小程序效率提升百倍 

“apifm-wxapi”  的 github 地址是：  https://github.com/gooking/apifm-wxapi

大家有興趣的可以點(diǎn)擊進(jìn)去具體了解一下，不過今天我們先來看看在實(shí)際小程序開發(fā)中， “apifm-wxapi”  能幫我們解決什么問題？

回顧上面介紹的開發(fā)小程序的 8 個(gè)步驟，如果我們使用  “apifm-wxapi” ，那么我們只需要做：

1、購買服務(wù)器，用來運(yùn)行后臺(tái)及接口程序；

2、購買域名，小程序中需要通過域名來調(diào)用服務(wù)器的數(shù)據(jù)；

3、購買 SSL 證書，小程序強(qiáng)制需要 https 的地址，傳統(tǒng)無證書不加密的 http 請(qǐng)求微信不支持；

4、后臺(tái)程序員開發(fā)后臺(tái)程序，這樣才能登錄后臺(tái)進(jìn)行商品管理、訂單維護(hù)、資金財(cái)務(wù)管理等等；

5、后臺(tái)程序員開發(fā)小程序可用的 restfull api 接口或者是 websocket 接口；

6、開發(fā)的后臺(tái)及接口程序的安全性、功能性、穩(wěn)定性測(cè)試，bug調(diào)試完畢；

7、UI 設(shè)計(jì)師設(shè)計(jì)精美的小程序界面；

8、前端工程師根據(jù) UI 設(shè)計(jì)稿進(jìn)行小程序開發(fā)、同時(shí)對(duì)接 api 接口完成最終小程序的開發(fā)；

我們只需要做 7 + 8 就可以了！ 

怎么樣？ 是不是特別的方便？ 信不信跟著我走一朝，你不服都不行！

現(xiàn)有小程序項(xiàng)目如何安裝 “apifm-wxapi”  模塊

首先你需要檢查一下你的小程序項(xiàng)目是否支持 npm ，判斷標(biāo)準(zhǔn)很簡(jiǎn)單，你看一下你的小程序根目錄下有沒有 “package.json” 這個(gè)文件，有這個(gè)文件，說明是支持的，沒有這個(gè)文件，說明還不支持；

如果你的小程序項(xiàng)目還不支持 npm ，怎么辦呢？ 很簡(jiǎn)單，只要在根目錄運(yùn)行  npm init 命令就可以了；

具體操作，可以點(diǎn)擊看這篇文章

接下來，我們來開始安裝：

第一步： npm 安裝模塊打開你的終端 （Windows 系統(tǒng)為那個(gè) 黑乎乎的 DOS 窗口， mac 系統(tǒng)大家都懂什么叫終端啦~ ）

在終端輸入命令進(jìn)入你的小程序根目錄： 

cd /Users/gooking/WeChatProjects/helloworld

注意：這里我的小程序根目錄路徑是 /Users/gooking/WeChatProjects/helloworld ，你需要根據(jù)你自己的實(shí)際情況操作

npm install apifm-wxapi

運(yùn)行完畢后，恭喜你！ 你已經(jīng)成功安裝  “apifm-wxapi”  插件

第二步：構(gòu)建 npm

點(diǎn)擊微信小程序開發(fā)工具--> 工具 --> 構(gòu)建 npm

如何使用 “apifm-wxapi” ？

“apifm-wxapi” 的功能大概有幾百個(gè)，大家可以以后有空慢慢的去看，一個(gè)一個(gè)去嘗試，功能說明文檔：

https://github.com/gooking/apifm-wxapi/blob/master/instructions.md

下面我來演示一個(gè)獲取所有省份的功能，你就能體會(huì)到 “apifm-wxapi”  的魅力，掌握使用它將是多么有趣的一件事情：

先做一個(gè)小小的設(shè)置：

因?yàn)槲⑿判〕绦驅(qū)τ赼pi接口請(qǐng)求需要做域名白名單設(shè)置，也就是說，接口請(qǐng)求域名必須要在你的小程序后臺(tái)的安全設(shè)置里面加入白名單后才能調(diào)試；

為了我們測(cè)試方便，我們可以在開發(fā)工具上稍微設(shè)置一下，讓開發(fā)工具暫時(shí)不做域名校驗(yàn)，會(huì)提高我們開發(fā)和調(diào)試的效率；

當(dāng)然，正式上線之前，你還是需要把接口域名加入到你的小程序后臺(tái)設(shè)置中（否則正式發(fā)布后，域名被攔截，用戶都會(huì)看不到數(shù)據(jù)了~ 那就悲劇了......）

接下來，我們就可以開工了 

第一步： 在需要的頁面的 js 文件頭部引入  “apifm-wxapi” const WXAPI = require('apifm-wxapi')

第二步：直接調(diào)用 “apifm-wxapi” 提供的方法直接取數(shù)據(jù)你根本不用關(guān)心數(shù)據(jù)哪里來，要什么數(shù)據(jù)，直接拿就OK！

WXAPI.province().then(res => {
 console.log('請(qǐng)?jiān)诳刂婆_(tái)看打印出來的數(shù)據(jù)：', res)
})

兩步搞定！ 運(yùn)行你的小程序，這就是見證奇跡的時(shí)刻！來看幾張截圖：

小程序代碼

運(yùn)行結(jié)果

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論