微信小程序如何使用小程序API，去調用微信提供的各種內置能力（即微信API）。小程序開發(fā)框架提供豐富的微信原生API，可以方便的調起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。

一、WXML 渲染語法

前面說過，小程序的頁面結構使用 WXML 語言進行描述。

WXML 的全稱是微信頁面標簽語言（Weixin Markup Language），它不僅提供了許多功能標簽，還有一套自己的語法，可以設置頁面渲染的生效條件，以及進行循環(huán)處理。

微信 API 提供的數(shù)據(jù)，就通過 WXML 的渲染語法展現(xiàn)在頁面上。比如，home.js里面的數(shù)據(jù)源是一個數(shù)組。

Page({
  data: {
    items: ['事項 A', '事項 B', '事項 C']
  }
});

上面代碼中，Page()的參數(shù)配置對象的data.items屬性是一個數(shù)組。通過數(shù)據(jù)綁定機制，頁面可以讀取全局變量items，拿到這個數(shù)組。

拿到數(shù)組以后，怎樣將每一個數(shù)組成員展現(xiàn)在頁面上呢？WXML 的數(shù)組循環(huán)語法，就是一個很簡便的方法。

打開home.wxml，改成下面的代碼。

<view>
  <text class="title" wx:for="{{items}}">
    {{index}}、 {{item}}
   </text>
</view>

上面代碼中，<text>標簽的wx:for屬性，表示當前標簽（<text>）啟用數(shù)組循環(huán)，處理items數(shù)組。數(shù)組有多少個成員，就會生成多少個<text>。渲染后的頁面結構如下。

<view>
  <text>...</text>
  <text>...</text>
  <text>...</text>
</view>

在循環(huán)體內，當前數(shù)組成員的位置序號（從0開始）綁定變量index，成員的值綁定變量item。

開發(fā)者工具導入項目代碼，頁面渲染結果。

WXML 的其他渲染語法（主要是條件判斷和對象處理），請查看官方文檔。

二、客戶端數(shù)據(jù)儲存

頁面渲染用到的外部數(shù)據(jù)，如果每次都從服務器或 API 獲取，有時可能會比較慢，用戶體驗不好。

小程序允許將一部分數(shù)據(jù)保存在客戶端（即微信 App）的本地儲存里面（其實就是自定義的緩存）。下次需要用到這些數(shù)據(jù)的時候，就直接從本地讀取，這樣就大大加快了渲染。本節(jié)介紹怎么使用客戶端數(shù)據(jù)儲存。

打開home.wxml，改成下面的代碼。

<view>
  <text class="title" wx:for="{{items}}">
    {{index}}、 {{item}}
   </text>
   <input placeholder="輸入新增事項" bind:input="inputHandler"/>
   <button bind:tap="buttonHandler">確定</button>
</view>

上面代碼除了展示數(shù)組items，還新增了一個輸入框和一個按鈕，用來接受用戶的輸入。背后的意圖是，用戶通過輸入框，為items數(shù)組加入新成員。

開發(fā)者工具導入項目代碼，頁面渲染結果。

注意，輸入框有一個input事件的監(jiān)聽函數(shù)inputHandler（輸入內容改變時觸發(fā)），按鈕有一個tap事件的監(jiān)聽函數(shù)buttonHandler（點擊按鈕時觸發(fā)）。這兩個監(jiān)聽函數(shù)負責處理用戶的輸入。

然后，打開home.js，代碼修改如下。

Page({
  data: {
    items: [],
    inputValue: ''
  },
  inputHandler(event) {
    this.setData({
      inputValue: event.detail.value || ''
    });
  },
  buttonHandler(event) {
    const newItem = this.data.inputValue.trim();
    if (!newItem) return;
    const itemArr = [...this.data.items, newItem];
    wx.setStorageSync('items', itemArr);
    this.setData({ items: itemArr });
  },
  onLoad() {
    const itemArr = wx.getStorageSync('items') || []; 
    this.setData({ items: itemArr });
  }
});

上面代碼中，輸入框監(jiān)聽函數(shù)inputHandler()只做了一件事，就是每當用戶的輸入發(fā)生變化時，先從事件對象event的detail.value屬性上拿到輸入的內容，然后將其寫入全局變量inputValue。如果用戶刪除了輸入框里面的內容，inputValue就設為空字符串。

按鈕監(jiān)聽函數(shù)buttonHandler()是每當用戶點擊提交按鈕，就會執(zhí)行。它先從inputValue拿到用戶輸入的內容，確定非空以后，就將其加入items數(shù)組。然后，使用微信提供的wx.setStorageSync()方法，將items數(shù)組存儲在客戶端。最后使用this.setData()方法更新一下全局變量items，進而觸發(fā)頁面的重新渲染。

wx.setStorageSync()方法屬于小程序的客戶端數(shù)據(jù)儲存 API，用于將數(shù)據(jù)寫入客戶端儲存。它接受兩個參數(shù)，分別是鍵名和鍵值。與之配套的，還有一個wx.getStorageSync()方法，用于讀取客戶端儲存的數(shù)據(jù)。它只有一個參數(shù)，就是鍵名。這兩個方法都是同步的，小程序也提供異步版本，請參考官方文檔。

最后，上面代碼中，Page()的參數(shù)配置對象還有一個onLoad()方法。該方法屬于頁面的生命周期方法，頁面加載后會自動執(zhí)行該方法。它只執(zhí)行一次，用于頁面初始化，這里的意圖是每次用戶打開頁面，都通過wx.getStorageSync()方法，從客戶端取出以前存儲的數(shù)據(jù)，顯示在頁面上。

必須牢記的是，客戶端儲存是不可靠的，隨時可能消失（比如用戶清理緩存）。用戶換了一臺手機，或者本機重裝微信，原來的數(shù)據(jù)就丟失了。所以，它只適合保存一些不重要的臨時數(shù)據(jù)，最常見的用途一般就是作為緩存，加快頁面顯示。

三、遠程數(shù)據(jù)請求

小程序可以從外部服務器讀取數(shù)據(jù)，也可以向服務器發(fā)送數(shù)據(jù)。本節(jié)就來看看怎么使用小程序的網(wǎng)絡能力。

微信規(guī)定，只有后臺登記過的服務器域名，才可以進行通信。不過，開發(fā)者工具允許開發(fā)時放松這個限制。

按照上圖，點擊開發(fā)者工具右上角的三條橫線（"詳情"），選中"不校驗合法域名、web-view（業(yè)務域名）、TLS 版本以及 HTTPS 證書" 。這樣的話，小程序在開發(fā)時，就可以跟服務器進行通信了。

下面，我們在本地啟動一個開發(fā)服務器。為了簡單起見，我選用了 json-server 作為本地服務器，它的好處是只要有一個 JSON 數(shù)據(jù)文件，就能自動生成 RESTful 接口。

首先，新建一個數(shù)據(jù)文件db.json，內容如下。

{
  "items": ["事項 A", "事項 B", "事項 C"]
}

然后，確認本機安裝了 Node.js 以后，進入db.json所在的目錄，在命令行執(zhí)行下面命令，啟動服務器。

npx json-server db.json

正常情況下，這時你打開瀏覽器訪問localhost:3000/items這個網(wǎng)址，就能看到返回了一個數(shù)組["事項 A", "事項 B", "事項 C"]。

接著，打開home.js，代碼修改如下。

Page({
  data: { items: [] },
  onLoad() {
    const that = this;
    wx.request({
      url: 'http://localhost:3000/items',
      success(res) {
        that.setData({ items: res.data });
      }
    });
  }
});

上面代碼中，生命周期方法onLoad()會在頁面加載后自動執(zhí)行，這時就會執(zhí)行wx.request()方法去請求遠程數(shù)據(jù)。如果請求成功，就會執(zhí)行回調函數(shù)succcess()，更新頁面全局變量items，從而讓遠程數(shù)據(jù)顯示在頁面上。

wx.request()方法就是小程序的網(wǎng)絡請求 API，通過它可以發(fā)送 HTTP 請求。它的參數(shù)配置對象最少需要指定url屬性（請求的網(wǎng)址）和succcess()方法（服務器返回數(shù)據(jù)的處理函數(shù)）。其他參數(shù)請參考官方文檔。

開發(fā)者工具導入項目代碼，頁面渲染結果。它的初始數(shù)據(jù)是從服務器拿到的。

這個例子只實現(xiàn)了遠程數(shù)據(jù)獲取，json-server 實際上還支持數(shù)據(jù)的新增和刪改，大家可以作為練習，自己來實現(xiàn)。

四、<open-data>組件

如果要在頁面上展示當前用戶的身份信息，可以使用小程序提供的<open-data>組件。

打開home.wxml文件，代碼修改如下。

<view>
  <open-data type="userAvatarUrl"></open-data>
  <open-data type="userNickName"></open-data>
</view>

上面代碼中，<open-data>組件的type屬性指定所要展示的信息類型，userAvatarUrl表示展示用戶頭像，userNickName表示用戶昵稱。

開發(fā)者工具導入項目代碼，頁面渲染結果，顯示你的頭像和用戶昵稱。

<open-data>支持的用戶信息如下。

• userNickName：用戶昵稱
• userAvatarUrl：用戶頭像
• userGender：用戶性別
• userCity：用戶所在城市
• userProvince：用戶所在省份
• userCountry：用戶所在國家
• userLanguage：用戶的語言

<open-data>不需要用戶授權，也不需要登錄，所以用起來很方便。但也是因為這個原因，小程序不允許用戶腳本讀取<open-data>返回的信息。

五、獲取用戶個人信息

如果想拿到用戶的個人信息，必須得到授權。官方建議，通過按鈕方式獲取授權。

打開home.wxml文件，代碼修改如下。

<view>
  <text class="title">hello {{name}}</text>
  <button open-type="getUserInfo" bind:getuserinfo="buttonHandler">
    授權獲取用戶個人信息
  </button>
</view>

上面代碼中，<button>標簽的open-type屬性，指定按鈕用于獲取用戶信息，bind:getuserinfo屬性表示點擊按鈕會觸發(fā)getuserinfo事件，即跳出對話框，詢問用戶是否同意授權。

用戶點擊"允許"，腳本就可以得到用戶信息。

home.js文件的腳本代碼如下。

Page({
  data: { name: '' },
  buttonHandler(event) {
    if (!event.detail.userInfo) return;
    this.setData({
      name: event.detail.userInfo.nickName
    });
  }
});

上面代碼中，buttonHandler()是按鈕點擊的監(jiān)聽函數(shù)，不管用戶點擊"拒絕"或"允許"，都會執(zhí)行這個函數(shù)。我們可以通過事件對象event有沒有detail.userInfo屬性，來判斷用戶點擊了哪個按鈕。如果能拿到event.detail.userInfo屬性，就表示用戶允許讀取個人信息。這個屬性是一個對象，里面就是各種用戶信息，比如頭像、昵稱等等。

實際開發(fā)中，可以先用wx.getSetting()方法判斷一下，用戶是否已經(jīng)授權過。如果已經(jīng)授權過，就不用再次請求授權，而是直接用wx.getUserInfo()方法獲取用戶信息。

注意，這種方法返回的用戶信息之中，不包括能夠真正識別唯一用戶的openid屬性。這個屬性需要用到保密的小程序密鑰去請求，所以不能放在前端獲取，而要放在后端。這里就不涉及了。

六、多頁面的跳轉

真正的小程序不會只有一個頁面，而是多個頁面，所以必須能在頁面之間實現(xiàn)跳轉。

app.json配置文件的pages屬性就用來指定小程序有多少個頁面。

{
  "pages": [
    "pages/home/home",
    "pages/second/second"
  ],
  "window": ...
}

上面代碼中，pages數(shù)組包含兩個頁面。以后每新增一個頁面，都必須把頁面路徑寫在pages數(shù)組里面，否則就是無效頁面。排在第一位的頁面，就是小程序打開時，默認展示的頁面。

新建第二個頁面的步驟如下。

第一步，新建pages/second目錄。

第二步，在該目錄里面，新建文件second.js，代碼如下。

Page({});

第三步，新建第二頁的頁面文件second.wxml，代碼如下。

<view>
  <text class="title">這是第二頁</text>
  <navigator url="../home/home">前往首頁</navigator>
</view>

上面代碼中，<navigator>就是鏈接標簽，相當于網(wǎng)頁標簽<a>，只要用戶點擊就可以跳轉到url屬性指定的頁面（這里是第一頁的位置）。

第四步，修改第一頁的頁面文件home.wxml，讓用戶能夠點擊進入第二頁。

<view>
  <text class="title">這是首頁</text>
  <navigator url="../second/second">前往第二頁</navigator>
</view>

開發(fā)者工具導入項目代碼，頁面渲染。

用戶點擊"前往第二頁"，就會看到第二個頁面。

七、wx.navigateTo()

除了使用<navigator>組件進行頁面跳轉，小程序也提供了頁面跳轉的腳本方法wx.navigateTo()。

首先，打開home.wxml文件，代碼修改如下。

<view>
  <text class="title">這是首頁</text>
  <button bind:tap="buttonHandler">前往第二頁</button>
</view>

開發(fā)者工具導入項目代碼，頁面渲染。

然后，打開home.js文件，代碼修改如下。

Page({
  buttonHandler(event) {
    wx.navigateTo({
      url: '../second/second'
    });
  }
});

上面代碼中，buttonHandler()是按鈕點擊的監(jiān)聽函數(shù)，只要用戶點擊按鈕，就會調用wx.navigateTo()方法。該方法的參數(shù)是一個配置對象，該對象的url屬性指定了跳轉目標的位置，自動跳轉到那個頁面。

寫到這里，這個小程序入門教程就告一段落了，入門知識基本上都涉及了。下一步，大家可以閱讀小程序的官方教程和使用文檔，爭取對小程序 API 有一個整體的把握，然后再去看看各種實際項目的源碼，應該就可以動手開發(fā)了。

到此這篇關于使用微信小程序API，調用微信的各種內置能力。的文章就介紹到這了,更多相關微信小程序內置API內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論