微信小程式入門解讀-④

小程式頁面如何使用 JavaScript 腳本。有了腳本以後，就可以調用微信提供的各種能力（即微信 API），進而做出千變萬化的頁面。本篇就介紹怎麼使用 API。

一、WXML 渲染文法

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

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

微信 API 提供的資料，就通過 WXML 的渲染文法展現在頁面上。比如，

home.js

裡面的資料源是一個數組。

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

上面代碼中，

Page()

的參數配置對象的

data.items

屬性是一個數組。通過資料綁定機制，頁面可以讀取全局變量

items

，拿到這個數組。

拿到數組以後，怎樣将每一個數組成員展現在頁面上呢？WXML 的數組循環文法，就是一個很簡便的方法。

打開

home.wxml

，改成下面的代碼。

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

上面代碼中，

<text>

标簽的

wx:for

屬性，表示目前标簽（

<text>

）啟用數組循環，處理

items

數組。數組有多少個成員，就會生成多少個

<text>

。渲染後的頁面結構如下。

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

在循環體内，目前數組成員的位置序号（從

開始）綁定變量

index

，成員的值綁定變量

item

。

開發者工具導入項目代碼，頁面渲染結果如下。

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

二、用戶端資料儲存

頁面渲染用到的外部資料，如果每次都從伺服器或 API 擷取，有時可能會比較慢，使用者體驗不好。

小程式允許将一部分資料儲存在用戶端（即微信 App）的本地儲存裡面（其實就是自定義的緩存）。下次需要用到這些資料的時候，就直接從本地讀取，這樣就大大加快了渲染。本節介紹怎麼使用用戶端資料儲存。

打開

home.wxml

，改成下面的代碼。

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

上面代碼除了展示數組

items

，還新增了一個輸入框和一個按鈕，用來接受使用者的輸入。背後的意圖是，使用者通過輸入框，為

items

數組加入新成員。

開發者工具導入項目代碼，頁面渲染結果如下。

微信小程式入門解讀-④

注意，輸入框有一個

input

事件的監聽函數

inputHandler

（輸入内容改變時觸發），按鈕有一個

tap

事件的監聽函數

buttonHandler

（點選按鈕時觸發）。這兩個監聽函數負責處理使用者的輸入。

然後，打開

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 });
  }
});

上面代碼中，輸入框監聽函數

inputHandler()

隻做了一件事，就是每當使用者的輸入發生變化時，先從事件對象

event

的

detail.value

屬性上拿到輸入的内容，然後将其寫入全局變量

inputValue

。如果使用者删除了輸入框裡面的内容，

inputValue

就設為空字元串。

按鈕監聽函數

buttonHandler()

是每當使用者點選送出按鈕，就會執行。它先從

inputValue

拿到使用者輸入的内容，确定非空以後，就将其加入

items

數組。然後，使用微信提供的

wx.setStorageSync()

方法，将

items

數組存儲在用戶端。最後使用

this.setData()

方法更新一下全局變量

items

，進而觸發頁面的重新渲染。

wx.setStorageSync()

方法屬于小程式的用戶端資料儲存 API，用于将資料寫入用戶端儲存。它接受兩個參數，分别是鍵名和鍵值。與之配套的，還有一個

wx.getStorageSync()

方法，用于讀取用戶端儲存的資料。它隻有一個參數，就是鍵名。這兩個方法都是同步的，小程式也提供異步版本，請參考官方文檔。

最後，上面代碼中，

Page()

的參數配置對象還有一個

onLoad()

方法。該方法屬于頁面的生命周期方法，頁面加載後會自動執行該方法。它隻執行一次，用于頁面初始化，這裡的意圖是每次使用者打開頁面，都通過

wx.getStorageSync()

方法，從用戶端取出以前存儲的資料，顯示在頁面上。

必須牢記的是，用戶端儲存是不可靠的，随時可能消失（比如使用者清理緩存）。使用者換了一台手機，或者本機重裝微信，原來的資料就丢失了。是以，它隻适合儲存一些不重要的臨時資料，最常見的用途一般就是作為緩存，加快頁面顯示。

三、遠端資料請求

小程式可以從外部伺服器讀取資料，也可以向伺服器發送資料。本節就來看看怎麼使用小程式的網絡能力。

微信規定，隻有背景登記過的伺服器域名，才可以進行通信。不過，開發者工具允許開發時放松這個限制。

微信小程式入門解讀-④

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

下面，我們在本地啟動一個開發伺服器。為了簡單起見，我選用了 json-server 作為本地伺服器，它的好處是隻要有一個 JSON 資料檔案，就能自動生成 RESTful 接口。

首先，建立一個資料檔案

db.json

，内容如下。

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

然後，确認本機安裝了 Node.js 以後，進入

db.json

所在的目錄，在指令行執行下面指令，啟動伺服器。

npx json-server db.json

正常情況下，這時你打開浏覽器通路

localhost:3000/items

這個網址，就能看到傳回了一個數組

["事項 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()

會在頁面加載後自動執行，這時就會執行

wx.request()

方法去請求遠端資料。如果請求成功，就會執行回調函數

succcess()

，更新頁面全局變量

items

，進而讓遠端資料顯示在頁面上。

wx.request()

方法就是小程式的網絡請求 API，通過它可以發送 HTTP 請求。它的參數配置對象最少需要指定

url

屬性（請求的網址）和

succcess()

方法（伺服器傳回資料的處理函數）。其他參數請參考官方文檔。

開發者工具導入項目代碼，頁面渲染結果如下。它的初始資料是從伺服器拿到的。

微信小程式入門解讀-④

這個例子隻實作了遠端資料擷取，json-server 實際上還支援資料的新增和删改，大家可以作為練習，自己來實作。

四、 `<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

表示使用者昵稱。

開發者工具導入項目代碼，頁面渲染結果如下，顯示你的頭像和使用者昵稱。

微信小程式入門解讀-④

<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

屬性表示點選按鈕會觸發

getuserinfo

事件，即跳出對話框，詢問使用者是否同意授權。

微信小程式入門解讀-④

使用者點選"允許"，腳本就可以得到使用者資訊。

home.js

檔案的腳本代碼如下。

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

上面代碼中，

buttonHandler()

是按鈕點選的監聽函數，不管使用者點選"拒絕"或"允許"，都會執行這個函數。我們可以通過事件對象

event

有沒有

detail.userInfo

屬性，來判斷使用者點選了哪個按鈕。如果能拿到

event.detail.userInfo

屬性，就表示使用者允許讀取個人資訊。這個屬性是一個對象，裡面就是各種使用者資訊，比如頭像、昵稱等等。

實際開發中，可以先用

wx.getSetting()

方法判斷一下，使用者是否已經授權過。如果已經授權過，就不用再次請求授權，而是直接用

wx.getUserInfo()

方法擷取使用者資訊。

注意，這種方法傳回的使用者資訊之中，不包括能夠真正識别唯一使用者的

openid

屬性。這個屬性需要用到保密的小程式密鑰去請求，是以不能放在前端擷取，而要放在後端。這裡就不涉及了。

六、多頁面的跳轉

真正的小程式不會隻有一個頁面，而是多個頁面，是以必須能在頁面之間實作跳轉。

app.json

配置檔案的

pages

屬性就用來指定小程式有多少個頁面。

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

上面代碼中，

pages

數組包含兩個頁面。以後每新增一個頁面，都必須把頁面路徑寫在

pages

數組裡面，否則就是無效頁面。排在第一位的頁面，就是小程式打開時，預設展示的頁面。

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

第一步，建立

pages/second

目錄。

第二步，在該目錄裡面，建立檔案

second.js

，代碼如下。

Page({});

第三步，建立第二頁的頁面檔案

second.wxml

，代碼如下。

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

上面代碼中，

<navigator>

就是連結标簽，相當于網頁标簽

<a>

，隻要使用者點選就可以跳轉到

url

屬性指定的頁面（這裡是第一頁的位置）。

第四步，修改第一頁的頁面檔案

home.wxml

，讓使用者能夠點選進入第二頁。

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

開發者工具導入項目代碼，頁面渲染結果如下。

微信小程式入門解讀-④

使用者點選"前往第二頁"，就會看到第二個頁面。

七、wx.navigateTo()

除了使用

<navigator>

元件進行頁面跳轉，小程式也提供了頁面跳轉的腳本方法

wx.navigateTo()

。

首先，打開

home.wxml

檔案，代碼修改如下。

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

開發者工具導入項目代碼，頁面渲染結果如下。

微信小程式入門解讀-④

然後，打開

home.js

檔案，代碼修改如下。

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

上面代碼中，

buttonHandler()

是按鈕點選的監聽函數，隻要使用者點選按鈕，就會調用

wx.navigateTo()

方法。該方法的參數是一個配置對象，該對象的

url

屬性指定了跳轉目标的位置，自動跳轉到那個頁面。

這個示例的完整代碼，可以參考代碼倉庫。

最後為了友善大家的溝通與交流請加QQ群： 625787746

請進QQ群交流：【IT部落格技術分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140

微信小程式入門解讀-④

一、WXML 渲染文法

二、用戶端資料儲存

三、遠端資料請求

四、 `<open-data>` 元件

五、擷取使用者個人資訊

六、多頁面的跳轉

七、wx.navigateTo()

繼續閱讀

頁面傳值的方式 - 小程式篇一、跨頁面傳值二、頁面内傳值三、本地儲存四、全局的app對象

小程式回傳值

小程式url頁面傳值

微信小程式父子傳值

小程式元件傳值通訊

214情人節，使用微信小程式【信鴿相知】寫情書吧

微信小程式npm如何引用Vant Weapp

微信小程式雲開發入門(4)之資料庫的增删改查(查:含模糊查找)

簡單封裝一個微信小程式的ajax請求

微信小程式即時通訊(融雲sdk)

微信小程式的cover-image 無法覆寫的問題！注意一定是位址的問題之前試了好多次！首先要在cover-view 标簽裡面外層是 map chart，camera 等原始元件

小程式自定義button元件擷取使用者資訊（使用者授權登入）

微信小程式前端解密擷取使用者資訊

微信小程式界面開發-底部導航欄

微信小程式之底部導航欄（一）

微信小程式快速設定底部導航欄

微信小程式入門解讀-④

一、WXML 渲染文法

二、用戶端資料儲存

三、遠端資料請求

四、 <open-data> 元件

五、擷取使用者個人資訊

六、多頁面的跳轉

七、wx.navigateTo()

繼續閱讀

四、 `<open-data>` 元件