使用微信小程序API,調(diào)用微信的各種內(nèi)置能力。
微信小程序如何使用小程序API,去調(diào)用微信提供的各種內(nèi)置能力(即微信API)。小程序開發(fā)框架提供豐富的微信原生API,可以方便的調(diào)起微信提供的能力,如獲取用戶信息,本地存儲,支付功能等。
一、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)體內(nèi),當前數(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
(輸入內(nèi)容改變時觸發(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
屬性上拿到輸入的內(nèi)容,然后將其寫入全局變量inputValue
。如果用戶刪除了輸入框里面的內(nèi)容,inputValue
就設為空字符串。
按鈕監(jiān)聽函數(shù)buttonHandler()
是每當用戶點擊提交按鈕,就會執(zhí)行。它先從inputValue
拿到用戶輸入的內(nèi)容,確定非空以后,就將其加入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
,內(nèi)容如下。
{ "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í)行回調(diào)函數(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
屬性。這個屬性需要用到保密的小程序密鑰去請求,所以不能放在前端獲取,而要放在后端。這里就不涉及了。
六、多頁面的跳轉(zhuǎn)
真正的小程序不會只有一個頁面,而是多個頁面,所以必須能在頁面之間實現(xiàn)跳轉(zhuǎ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>
,只要用戶點擊就可以跳轉(zhuǎn)到url
屬性指定的頁面(這里是第一頁的位置)。
第四步,修改第一頁的頁面文件home.wxml
,讓用戶能夠點擊進入第二頁。
<view> <text class="title">這是首頁</text> <navigator url="../second/second">前往第二頁</navigator> </view>
開發(fā)者工具導入項目代碼,頁面渲染。
用戶點擊"前往第二頁",就會看到第二個頁面。
七、wx.navigateTo()
除了使用<navigator>
組件進行頁面跳轉(zhuǎn),小程序也提供了頁面跳轉(zhuǎn)的腳本方法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ù),只要用戶點擊按鈕,就會調(diào)用wx.navigateTo()
方法。該方法的參數(shù)是一個配置對象,該對象的url
屬性指定了跳轉(zhuǎn)目標的位置,自動跳轉(zhuǎn)到那個頁面。
寫到這里,這個小程序入門教程就告一段落了,入門知識基本上都涉及了。下一步,大家可以閱讀小程序的官方教程和使用文檔,爭取對小程序 API 有一個整體的把握,然后再去看看各種實際項目的源碼,應該就可以動手開發(fā)了。
到此這篇關于使用微信小程序API,調(diào)用微信的各種內(nèi)置能力。的文章就介紹到這了,更多相關微信小程序內(nèi)置API內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
javascript實現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單
這篇文章主要為大家詳細介紹了javascript實現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單很詳細的代碼,解決了大家實現(xiàn)javascript省市區(qū)三級聯(lián)動下拉框菜單的問題,感興趣的小伙伴們可以參考一下2015-11-11APP中javascript+css3實現(xiàn)下拉刷新效果
本文給大家分享的是如何在APP中使用javascript結合CSS3實現(xiàn)下拉刷新特效的代碼,非常的簡單實用,有需要的小伙伴可以參考下。2016-01-01JavaScript?中的數(shù)據(jù)類型Number
這篇文章主要介紹了JavaScript?中的數(shù)據(jù)類型Number,Number?類型使用?IEEE?754?格式表示整數(shù)和浮點值,下文相關詳細資料介紹,需要的小伙伴可以參考一下2022-04-04js實現(xiàn)網(wǎng)頁多級級聯(lián)菜單代碼
這篇文章主要介紹了js實現(xiàn)網(wǎng)頁多級級聯(lián)菜單代碼,涉及javascript基于數(shù)組動態(tài)構造多級級聯(lián)菜單的技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08