使用 apifm-wxapi 快速开发小程序
前言
我們要開發小程序,基本上都要涉及到以下幾個方面的工作:
或許許多人看到這里,已經倒吸了一口冷氣了吧? 這。。。 太麻煩了吧?!有沒有什么捷徑可以走?!
回答是肯定的,那就是你可以在小程序中集成 “apifm-wxapi” 模塊,實現快速開發…
什么是 apifm-wxapi
借用 “apifm-wxapi” 官方的介紹來回答一下這個問題:
微信小程序云開發工具包,借此工具包,你將無需投入服務器、無需接口編程、無需開發后臺,將傳統開發小程序效率提升百倍
apifm-wxapi 的 github 地址是: https://github.com/gooking/apifm-wxapi
大家有興趣的可以點擊進去具體了解一下,不過今天我們先來看看在實際小程序開發中, “apifm-wxapi” 能幫我們解決什么問題?
回顧上面介紹的開發小程序的 8 個步驟,如果我們使用 “apifm-wxapi” ,那么我們只需要做:
1. 購買服務器,用來運行后臺及接口程序;
2. 購買域名,小程序中需要通過域名來調用服務器的數據;
3. 購買 SSL 證書,小程序強制需要 https 的地址,傳統無證書不加密的 http 請求微信不支持;
4. 后臺程序員開發后臺程序,這樣才能登錄后臺進行商品管理、訂單維護、資金財務管理等等;
5. 后臺程序員開發小程序可用的 restfull api 接口或者是 websocket 接口;
6. 開發的后臺及接口程序的安全性、功能性、穩定性測試,bug調試完畢;
7. UI 設計師設計精美的小程序界面;
8. 前端工程師根據 UI 設計稿進行小程序開發、同時對接 api 接口完成最終小程序的開發;
我們只需要做 7 + 8 就可以了!
怎么樣? 是不是特別的方便? 信不信跟著我走一朝,你不服都不行!
現有小程序項目如何安裝 “apifm-wxapi” 模塊
首先你需要檢查一下你的小程序項目是否支持 npm ,判斷標準很簡單,你看一下你的小程序根目錄下有沒有 “package.json” 這個文件,有這個文件,說明是支持的,沒有這個文件,說明還不支持;
如果你的小程序項目還不支持 npm ,怎么辦呢? 很簡單,只要在根目錄運行 npm init 命令就可以了;
具體操作,可以點擊看這篇文章的 “初始化 npm 項目” 《創建 HelloWorld 項目》
接下來,我們來開始安裝:
第一步: npm 安裝模塊
打開你的終端 (Windows 系統為那個 黑乎乎的 DOS 窗口, mac 系統大家都懂什么叫終端啦~ )
在終端輸入命令進入你的小程序根目錄:
cd /Users/gooking/WeChatProjects/helloworld注意:這里我的小程序根目錄路徑是 /Users/gooking/WeChatProjects/helloworld ,你需要根據你自己的實際情況操作
npm install apifm-wxapi運行完畢后,恭喜你! 你已經成功安裝 “apifm-wxapi” 插件
第二步:構建 npm
如何使用 “apifm-wxapi” ?
“apifm-wxapi” 的功能大概有幾百個,大家可以以后有空慢慢的去看,一個一個去嘗試,功能說明文檔:
https://github.com/gooking/apifm-wxapi/blob/master/instructions.md
下面我來演示一個獲取所有省份的功能,你就能體會到 “apifm-wxapi” 的魅力,掌握使用它將是多么有趣的一件事情:
先做一個小小的設置:
因為微信小程序對于api接口請求需要做域名白名單設置,也就是說,接口請求域名必須要在你的小程序后臺的安全設置里面加入白名單后才能調試;
為了我們測試方便,我們可以在開發工具上稍微設置一下,讓開發工具暫時不做域名校驗,會提高我們開發和調試的效率;
當然,正式上線之前,你還是需要把接口域名加入到你的小程序后臺設置中(否則正式發布后,域名被攔截,用戶都會看不到數據了~ 那就悲劇了…)
接下來,我們就可以開工了 ------>
第一步: 在需要的頁面的 js 文件頭部引入 apifm-wxapi
const WXAPI = require('apifm-wxapi')第二步:直接調用 “apifm-wxapi” 提供的方法直接取數據
WXAPI.province().then(res => {console.log('請在控制臺看打印出來的數據:', res) })兩步搞定! 運行你的小程序,這就是見證奇跡的時刻!
來看幾張截圖:
關于更加詳細的參數使用,以及更加高級的進階使用方法,可以參考api接口文檔說明:
《api接口文檔》
修改 修改 二級域名 修改為自己的域名
還有需要注意的一個點就是!!!!
以引入輪播為例
js 文件中引入 “apifm-wxapi” 插件:
const WXAPI = require('apifm-wxapi') WXAPI.init('gooking')WXAPI.init('gooking') 這句代碼是將你的小程序鏈接到你的后臺,其中 gooking 這個是你的專屬域名;
讀取輪播圖:
需要改成自己的域名!!!!
總結
以上是生活随笔為你收集整理的使用 apifm-wxapi 快速开发小程序的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: biu加速器(BiuBiu加速器)
- 下一篇: 钟无艳对线怕谁