使用微信小程序API,調用微信的各種內置能力。

微信小程序如何使用小程序API,去調用微信提供的各種內置能力(即微信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>

在循環體內,當前數組成員的位置序號(從0開始)綁定變量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()隻做瞭一件事,就是每當用戶的輸入發生變化時,先從事件對象eventdetail.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屬性指定瞭跳轉目標的位置,自動跳轉到那個頁面。

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

到此這篇關於使用微信小程序API,調用微信的各種內置能力。的文章就介紹到這瞭,更多相關微信小程序內置API內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: