欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用apifm-wxapi快速開發(fā)小程序過程詳解

 更新時間:2019年08月05日 11:18:32   作者:api工廠  
這篇文章主要介紹了使用apifm-wxapi快速開發(fā)小程序過程詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

前言

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

1、購買服務(wù)器,用來運行后臺及接口程序;

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

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

4、后臺程序員開發(fā)后臺程序,這樣才能登錄后臺進行商品管理、訂單維護、資金財務(wù)管理等等;

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

6、開發(fā)的后臺及接口程序的安全性、功能性、穩(wěn)定性測試,bug調(diào)試完畢;

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

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

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

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

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

什么是“apifm-wxapi”

借用 “apifm-wxapi” 官方的介紹來回答一下這個問題:

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

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

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

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

1、購買服務(wù)器,用來運行后臺及接口程序;

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

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

4、后臺程序員開發(fā)后臺程序,這樣才能登錄后臺進行商品管理、訂單維護、資金財務(wù)管理等等;

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

6、開發(fā)的后臺及接口程序的安全性、功能性、穩(wěn)定性測試,bug調(diào)試完畢;

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

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

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

怎么樣? 是不是特別的方便? 信不信跟著我走一朝,你不服都不行!

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

首先你需要檢查一下你的小程序項目是否支持 npm ,判斷標準很簡單,你看一下你的小程序根目錄下有沒有 “package.json” 這個文件,有這個文件,說明是支持的,沒有這個文件,說明還不支持;

如果你的小程序項目還不支持 npm ,怎么辦呢? 很簡單,只要在根目錄運行  npm init 命令就可以了;

具體操作,可以點擊看這篇文章

接下來,我們來開始安裝:

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

在終端輸入命令進入你的小程序根目錄: 

cd /Users/gooking/WeChatProjects/helloworld

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

npm install apifm-wxapi

運行完畢后,恭喜你! 你已經(jīng)成功安裝  “apifm-wxapi”  插件

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

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

如何使用 “apifm-wxapi” ?

“apifm-wxapi” 的功能大概有幾百個,大家可以以后有空慢慢的去看,一個一個去嘗試,功能說明文檔:

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

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

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

因為微信小程序?qū)τ赼pi接口請求需要做域名白名單設(shè)置,也就是說,接口請求域名必須要在你的小程序后臺的安全設(shè)置里面加入白名單后才能調(diào)試;

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

當然,正式上線之前,你還是需要把接口域名加入到你的小程序后臺設(shè)置中(否則正式發(fā)布后,域名被攔截,用戶都會看不到數(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('請在控制臺看打印出來的數(shù)據(jù):', res)
})

兩步搞定! 運行你的小程序,這就是見證奇跡的時刻!來看幾張截圖:

小程序代碼

運行結(jié)果

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JS實現(xiàn)讓網(wǎng)頁背景圖片斜向移動的方法

    JS實現(xiàn)讓網(wǎng)頁背景圖片斜向移動的方法

    這篇文章主要介紹了JS實現(xiàn)讓網(wǎng)頁背景圖片斜向移動的方法,涉及javascript操作背景圖片特效的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-02-02
  • 淺析微信小程序自定義日歷組件及flex布局最后一行對齊問題

    淺析微信小程序自定義日歷組件及flex布局最后一行對齊問題

    這篇文章主要介紹了微信小程序自定義日歷組件及flex布局最后一行對齊問題,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-10-10
  • 微信小程序之多文件下載的簡單封裝示例

    微信小程序之多文件下載的簡單封裝示例

    本篇文章主要介紹了微信小程序之多文件下載的簡單封裝示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • 微信小程序?qū)崿F(xiàn)簡易計算器

    微信小程序?qū)崿F(xiàn)簡易計算器

    這篇文章介紹了微信小程序?qū)崿F(xiàn)簡易計算器的方法,文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-06-06
  • js實現(xiàn)鼠標點擊飄愛心效果

    js實現(xiàn)鼠標點擊飄愛心效果

    這篇文章主要為大家詳細介紹了js實現(xiàn)鼠標點擊飄愛心效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • 微信小程序自定義Modal彈框

    微信小程序自定義Modal彈框

    這篇文章主要為大家詳細介紹了微信小程序自定義Modal彈框效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • JavaScript數(shù)組塌陷實例解析

    JavaScript數(shù)組塌陷實例解析

    這篇文章主要為大家介紹了JavaScript數(shù)組塌陷實例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-05-05
  • js或css文件后面跟參數(shù)的原因說明

    js或css文件后面跟參數(shù)的原因說明

    經(jīng)??吹讲簧賹Ш骄W(wǎng)站測樣式或js文件后面加了一些參數(shù),主要是一你為一些并不經(jīng)常更新的頁面重新加載新修改的文件。
    2010-01-01
  • Javascript中innerHTML用法實例分析

    Javascript中innerHTML用法實例分析

    這篇文章主要介紹了Javascript中innerHTML用法,實例分析了實用innerHTML獲取對應(yīng)元素內(nèi)容的使用技巧,需要的朋友可以參考下
    2015-01-01
  • 解決layer圖標icon不加載的問題

    解決layer圖標icon不加載的問題

    今天小編就為大家分享一篇解決layer圖標icon不加載的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09

最新評論