微信小程序開發(fā)邊做邊學(xué) 課件 知識(shí)點(diǎn)篇-微信小程序第3章 授權(quán)頁面知識(shí)點(diǎn)講解

小程序開發(fā)從入門到實(shí)踐知識(shí)點(diǎn)我的頁面模塊開發(fā)授權(quán)頁面知識(shí)點(diǎn)講解小程序開發(fā)小程序登錄1(1)小程序通過wx.login()獲取code，然后通過wx.request()發(fā)送code至開發(fā)者服務(wù)器(2)開發(fā)者服務(wù)器將登錄憑證appid、appsecret與code用于校驗(yàn)微信接口，(3)微信接口服務(wù)向開發(fā)者服務(wù)器返回用戶唯一標(biāo)識(shí)OpenID和會(huì)話密鑰session_key。(4)開發(fā)者服務(wù)器實(shí)現(xiàn)自定義登錄狀態(tài)與openid與session_key關(guān)聯(lián)，并向小程序返回自定義狀態(tài)。(5)小程序?qū)⒆远x登錄狀態(tài)存入storage，并用于后續(xù)wx.request發(fā)起業(yè)務(wù)請(qǐng)求。每個(gè)用戶訪問該小程序都有產(chǎn)生一個(gè)唯一的openid，這個(gè)openid為用戶訪問該小程序的標(biāo)識(shí)符。因此，可以把openid作為用戶唯一標(biāo)識(shí)符并存于數(shù)據(jù)庫中用以后續(xù)操作。注意點(diǎn)：小程序開發(fā)開發(fā)者服務(wù)器與微信接口服務(wù)之間的交互是由后臺(tái)實(shí)現(xiàn)的，本節(jié)主要以小程序前端與開發(fā)者服務(wù)器之間的交互為主小程序登錄流程時(shí)序小程序開發(fā)2.wx.login()調(diào)用wx.login()接口獲取登錄憑證（code），通過憑證進(jìn)而換取用戶登錄態(tài)信息，其中wx.login()接口的屬性如表所示。屬性類型必填說明timeoutnumber否超時(shí)時(shí)間，單位mssuccessfunction否接口調(diào)用成功的回調(diào)函數(shù)failfunction否接口調(diào)用失敗的回調(diào)函數(shù)completefunction否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功失敗都會(huì)執(zhí)行）由于app.js會(huì)先于其他頁面執(zhí)行，所以比較適合處理一些注冊(cè)函數(shù)，因此將wx.login()方法寫在app.js文件中。小程序開發(fā)wx.request()主要用于發(fā)送https網(wǎng)絡(luò)請(qǐng)求，其屬性詳見表格屬性類型默認(rèn)值必填說明urlstring

是開發(fā)者服務(wù)器接口地址datastring/object/ArrayBuffer

否請(qǐng)求參數(shù)headerobject

否設(shè)置請(qǐng)求的header，header中不能設(shè)置Referer。content-type默認(rèn)為application/jsonmethodstringGET否HTTP請(qǐng)求方法dataTypestringjson否返回的數(shù)據(jù)格式responseTypestringtext否響應(yīng)的數(shù)據(jù)類型successfunction

否接口調(diào)用成功的回調(diào)函數(shù)failfunction

否接口調(diào)用失敗的回調(diào)函數(shù)completefunction

否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功失敗都會(huì)執(zhí)行）3.wx.login()小程序開發(fā)每個(gè)微信小程序都可以有自己的本地緩存，可以通過數(shù)據(jù)緩存API可以對(duì)本地緩存進(jìn)行設(shè)置、獲取和清理。同一個(gè)微信用戶，同一個(gè)小程序storage上限為10MB。localStorage以用戶維度隔離，同一臺(tái)設(shè)備上，A用戶無法讀取到B用戶的數(shù)據(jù)。注意：如果用戶儲(chǔ)存空間不足，微信會(huì)清空最近最久未使用的小程序的本地緩存。因此不建議將關(guān)鍵信息全部存在localStorage，以防儲(chǔ)存空間不足或用戶換設(shè)備的情況。函數(shù)名說明wx.setStorage(Objectobject)數(shù)據(jù)的存儲(chǔ)（異步）wx.setStorageSync(stringkey,anydata)數(shù)據(jù)的存儲(chǔ)（同步）wx.getStorage(Objectobject)數(shù)據(jù)的獲取（異步）wx.getStorageSync(stringkey)數(shù)據(jù)的獲?。ㄍ剑﹚x.getStorageInfo(Objectobject)存儲(chǔ)信息的獲取（異步）wx.getStorageInfoSync()存儲(chǔ)信息的獲?。ㄍ剑﹚x.removeStorage(Objectobject)數(shù)據(jù)的移除（異步）wx.removeStorageSync(stringkey)數(shù)據(jù)的移除（同步）wx.clearStorage(Objectobject)數(shù)據(jù)的清空（異步）wx.clearStorageSync()數(shù)據(jù)的清空（同步）4.數(shù)據(jù)緩存數(shù)據(jù)緩存API函數(shù)類型小程序開發(fā)屬性類型默認(rèn)值必填說明titlestring

是提示的標(biāo)題contentstring

是提示的內(nèi)容showCancelbooleantrue否是否顯示取消按鈕cancelTextstring‘取消’否取消按鈕的文字，最多4個(gè)字符cancelColorstring#000000否取消按鈕的文字顏色，必須是16進(jìn)制格式的顏色字符串confirmTextstring‘確定’否確認(rèn)按鈕的文字，最多4個(gè)字符confirmColorstring#576B95否確認(rèn)按鈕的文字顏色，必須是16進(jìn)制格式的顏色字符串successfunction

否接口調(diào)用成功的回調(diào)函數(shù)failfunction

否接口調(diào)用失敗的回調(diào)函數(shù)completefunction

否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）其中success回調(diào)函數(shù)的返回參數(shù)屬性類型說明最低版本confirmboolean為true時(shí)，表示用戶點(diǎn)擊了確定按鈕

cancelboolean為true時(shí)，表示用戶點(diǎn)擊了取消（用于Android系統(tǒng)區(qū)分點(diǎn)擊蒙層關(guān)閉還是點(diǎn)擊取消按鈕關(guān)閉）1.0.05.wx.showModal()小程序使用wx.showModel(Objectobject)顯示模態(tài)對(duì)話框，其中object參數(shù)說明如表所示。注冊(cè)頁面知識(shí)點(diǎn)講解小程序開發(fā)注冊(cè)頁面知識(shí)點(diǎn)講解1.微信官方UI庫WeUIWeUI是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。包含button、article、actionsheet、icon等各式元素。WeUI基礎(chǔ)樣式庫下載地址：/Tencent/weui-wxss。開發(fā)者可以將樣式庫下載并使用微信web開發(fā)者工具打開dist目錄，導(dǎo)入dist目錄后，可以預(yù)覽樣式庫小程序開發(fā)微信官方UI庫WeUI開發(fā)者可以在樣式庫里選擇自己所需要的樣式，然后直接將需要的樣式的wxml復(fù)制黏貼至自己的項(xiàng)目中，然后將WeUI中style文件拷貝至自己的項(xiàng)目目錄中，如將圖目錄下style文件夾拷貝至圖3–19目錄下。小程序開發(fā)將style文件夾拷貝至自己開發(fā)的項(xiàng)目后，還需要在app.wxss文件中使用@import導(dǎo)入weui的樣式，如圖3–20所示。到這里，就可以正常使用WeUI庫中微信的官方樣式了。微信官方UI庫WeUI小程序開發(fā)2.bindchange事件bindchange事件與bindtap事件不同，它主要是當(dāng)輸入框中的內(nèi)容發(fā)生改變時(shí)，觸發(fā)對(duì)應(yīng)的事件處理函數(shù)，并且輸入框中的值可以通過event.detail.value來獲取,例如如下事例：wxml文件代碼：小程序開發(fā)2.bindchange事件bindchange事件與bindtap事件不同，它主要是當(dāng)輸入框中的內(nèi)容發(fā)生改變時(shí)，觸發(fā)對(duì)應(yīng)的事件處理函數(shù)，并且輸入框中的值可以通過event.detail.value來獲取,例如如下事例：js文件代碼：小程序開發(fā)頁面效果如所示當(dāng)在輸入框輸入內(nèi)容后，將鼠標(biāo)點(diǎn)擊其他空白處，可以打印出changevalue函數(shù)的返回值，會(huì)發(fā)現(xiàn)輸入的內(nèi)容被存放在detail的value中，如圖所示。小程序開發(fā)3.openAlert函數(shù)openAlert函數(shù)是在js文件中自定義的一個(gè)函數(shù)，在定義函數(shù)后，可以在其他函數(shù)中使用this.openAlert()調(diào)用openAlert函數(shù)。我的頁面知識(shí)點(diǎn)講解小程序開發(fā)我的頁面知識(shí)點(diǎn)講解image屬