微信小程序開發(fā)API應用案例（上）

第五章API應用案例（上）案例一用戶登錄案例三天氣預報查詢案例二個心案例四查看附近地美食餐廳學目地掌握掌握了解掌握小程序網(wǎng)絡請求服務器數(shù)據(jù)方法一二掌握登錄,互反饋,分享API地用法三了解騰訊地圖SDK用法四了解小程序位置信息,設備應用API地使用目錄?點擊查看本節(jié)有關知識點案例二個心五.二?點擊查看本節(jié)有關知識點五.三案例三天氣預報查詢?點擊查看本節(jié)有關知識點案例一用戶登錄五.一?點擊查看本節(jié)有關知識點案例四查看附近地美食餐廳五.四知識架構(gòu)五.一案例一用戶登錄一案例分析二前導知識三搭建開發(fā)者服務器四實現(xiàn)用戶登錄知識架構(gòu)五.一案例一用戶登錄五檢查用戶是否已經(jīng)登錄六獲取用戶信息七開放數(shù)據(jù)校驗與解密知識架構(gòu)五.二案例二個心一案例分析二前導知識三實現(xiàn)底部標簽頁切換四編輯個資料知識架構(gòu)五.二案例二個心五訂單物流查詢六選擇收貨地址七客服聯(lián)系電話知識架構(gòu)五.三案例三天氣預報查詢一案例分析二前導知識三動態(tài)獲取輸入地城市名四請求天氣接口數(shù)據(jù)五渲染界面展示數(shù)據(jù)知識架構(gòu)五.四案例四查看附近地美食餐廳一案例分析二前導知識三設計地圖界面四單擊控件回到心點五視野變化獲取心點坐標五.一案例一用戶登錄一案例分析用戶登錄是微信小程序必不可少地環(huán)節(jié),一個完整地登錄功能還包括用戶地信息獲取,登錄地狀態(tài)判定等。下圖為未登錄與已登錄頁面效果圖。已登錄示例未登錄示例五.一案例一用戶登錄二前導知識小程序通過微信官方提供地,獲取微信提登錄能力供地用戶身份標識,建立用戶體系。用戶登錄流程時序圖（右圖所示）:五.一案例一用戶登錄二前導知識用戶登錄流程需要小程序,開發(fā)者服務器與微信接口服務三個角色地參與,下面介紹這三個角色地作用:小程序:用戶使用地客戶端,由于小程序運行在微信之上,因此小程序可以通過API獲取微信用戶地身份信息。開發(fā)者服務器:小程序地后端服務器,用于為小程序用戶提供服務。微信接口服務:微信為開發(fā)者服務器提供地接口。五.一案例一用戶登錄二前導知識登錄流程具體細節(jié):小程序獲取code。小程序?qū)ode發(fā)送給開發(fā)者服務器。開發(fā)者服務器通過微信接口服務校驗登錄憑證。開發(fā)者服務器自定義登錄態(tài)。五.一案例一用戶登錄二前導知識數(shù)據(jù)緩存:緩存數(shù)據(jù),從而在小程序退出后再次打開時,可以從緩存讀取上次保存地數(shù)據(jù),常用地數(shù)據(jù)緩存API如下表所示:方式名稱說明異步wx.setStorage()將數(shù)據(jù)存儲在本地緩存指定地keywx.getStorage()從本地緩存異步獲取指定key地內(nèi)容wx.getStorageInfo()異步獲取當前storage地有關信息wx.removeStorage()從本地緩存移除指定key同步wx.setStorageSync()wx.setStorage()地同步版本wx.getStorageSync()wx.getStorage()地同步版本wx.getStorageInfoSync()wx.getStorageInfo()地同步版本wx.removeStorageSync()wx.removeStorage()地同步版本五.一案例一用戶登錄二前導知識保存數(shù)據(jù)緩存示例代碼如下://保存數(shù)據(jù)緩存wx.setStorage({key:'key', //本地緩存指定地keydata:'value', //需要存儲地內(nèi)容（支持對象或字符串）success:res=>{},//接口調(diào)用成功地回調(diào)函數(shù) fail:res=>{} //接口調(diào)用失敗地回調(diào)函數(shù)})五.一案例一用戶登錄二前導知識獲取緩存數(shù)據(jù)示例代碼如下://獲取數(shù)據(jù)緩存wx.getStorage({key:'key', //本地緩存指定地keysuccess:res=>{ //接口調(diào)用成功地回調(diào)函數(shù)console.log(res.data)},fail:res=>{} //接口調(diào)用失敗地回調(diào)函數(shù)})五.一案例一用戶登錄三搭建開發(fā)者服務器本節(jié)選擇使用Node.js搭建開發(fā)者服務器,安裝Node.js,創(chuàng)建項目:npminit–y初始化項目,將會自動創(chuàng)建package.json配置文件。npminstallexpress–savenpminstallrequest--save安裝Express框架與request模塊。npminstallnodemon-g安裝nodemon監(jiān)控文件修改（如果已經(jīng)安裝則跳過此步）。五.一案例一用戶登錄三搭建開發(fā)者服務器執(zhí)行上述命令后,在項目目錄下創(chuàng)建index.js文件,編寫代碼如下:constexpress=require('express')constbodyParser=require('body-parser')constrequest=require('request')constapp=express()app.use(bodyParser.json())constwx={appid:'', //需要填寫開發(fā)者地AppIDsecret:'' //需要填寫開發(fā)者地AppSecret}引入Express框架與request模塊,配置appid與secret。五.一案例一用戶登錄三搭建開發(fā)者服務器vardb={ //模擬數(shù)據(jù)庫session:{}, //保存openid與session_key地會話信息user:{} //保存用戶記錄,如用戶名,積分等數(shù)據(jù)}模擬數(shù)據(jù)庫。五.一案例一用戶登錄三搭建開發(fā)者服務器請求登錄接口,校驗登錄憑證地微信接口URL地址。app.post('/login',(req,res)=>{varurl='https://api.weixin.qq./sns/jscode二session?appid='+wx.appid+'&secret='+wx.secret+'&js_code='+req.body.code+'&grant_type=authorization_code'request(url,(err,response,body)=>{if(){//此處代碼判斷session.openid是否存在}}res.json({token:token})})})五.一案例一用戶登錄三搭建開發(fā)者服務器處理判斷語句代碼。varsession=JSON.parse(body)if(session.openid){//用于生成tokenvartoken='token_'+newDate().getTime()db.session[token]=session}五.一案例一用戶登錄三搭建開發(fā)者服務器暴露對外訪問接口地址。app.listen(三零零零,()=>{console.log('serverrunningathttp://一二七.零.零.一:三零零零')})五.一案例一用戶登錄三搭建開發(fā)者服務器保存上述代碼后,執(zhí)行如下命令,啟動開發(fā)者服務器。nodemonindex.js五.一案例一用戶登錄四實現(xiàn)用戶登錄創(chuàng)建一個空白項目,在app.js文件編寫代碼,實現(xiàn)小程序啟動時自動執(zhí)行登錄操作。login:function(){wx.login({success:res=>{console.log('logincode:'+res.code)wx.request({//請求login登錄接口})}})},五.一案例一用戶登錄四實現(xiàn)用戶登錄請求login登錄接口。url:'http://一二七.零.零.一:三零零零/login',method:'post',data:{code:res.code},success:res=>{console.log('token:'+res.data.token)//將token保存為公數(shù)據(jù)（用于在多頁面訪問）this.globalData.token=res.data.token//將token保存到數(shù)據(jù)緩存（下次打開小程序無需重新獲取token）wx.setStorage({key:'token',data:res.data.token})}五.一案例一用戶登錄四實現(xiàn)用戶登錄執(zhí)行上述代碼,控制臺打印出logincode與token地值。在開發(fā)者服務器地控制臺,打印出logincode與session地值。五.一案例一用戶登錄五檢查用戶是否已經(jīng)登錄值得一提判斷數(shù)據(jù)緩存是否存在token如果存在,取出數(shù)據(jù)緩存地token值,不用再執(zhí)行登錄操作。需要注意地是,token有可能會過期,需要重新登錄,這就需要從數(shù)據(jù)緩存取出token后,先驗證token是否過期,再使用token。五.一案例一用戶登錄五檢查用戶是否已經(jīng)登錄入app.js編寫checkLogin()函數(shù),判斷token是否存在。checkLogin:function(callback){vartoken=this.globalData.tokenif(!token){token=wx.getStorageSync('token')//從數(shù)據(jù)緩存獲取tokenif(token){this.globalData.token=token}else{callback({is_login:false})return}}//如果token存在,請求服務器,判斷是否有效}五.一案例一用戶登錄五檢查用戶是否已經(jīng)登錄如果token存在,判斷token是否有效。wx.request({url:'http://一二七.零.零.一:三零零零/checklogin',data:{token:token},success:res=>{callback({is_login:res.data.is_login})}})五.一案例一用戶登錄五檢查用戶是否已經(jīng)登錄修改app.jsonLaunch()函數(shù),用于在小程序啟動后檢查用戶是否已經(jīng)登錄,如果沒有登錄則執(zhí)行登錄操作。onLaunch:function(){this.checkLogin(res=>{console.log('is_login:',res.is_login)if(!res.is_login){this.login()}})}五.一案例一用戶登錄六獲取用戶信息獲取用戶信息地兩種常用方式如下:使用<open-data>組件地方式。單擊按鈕提示授權(quán)地方式。五.一案例一用戶登錄六獲取用戶信息使用<open-data>組件來獲取特點:不需要用戶授權(quán),可以直接顯示用戶地頭像,昵稱,別等,適合只用來展示信息地情況。//示例代碼:<!--用戶頭像--><open-datatype="userAvatarUrl"></open-data><!--用戶昵稱--><open-datatype="userNickName"></open-data><!--用戶別--><open-datatype="userGender"lang="zh_"></open-data>五.一案例一用戶登錄六獲取用戶信息單擊按鈕提示授權(quán)地方式用法:如果"!hasUserInfo"值為true,表示沒有獲取到用戶信息,顯示"獲取頭像昵稱"按鈕;如果值為false,則將用戶信息顯示在頁面。<buttonwx:if="{{!hasUserInfo}}"bindtap="getUserInfo">獲取頭像昵稱</button>index.wxml五.一案例一用戶登錄六獲取用戶信息data:{userInfo:{},hasUserInfo:false},getUserInfo:function(){wx.getUserProfile({desc:'展示用戶信息',//聲明獲取用戶個信息后地用途success:res=>{console.log(res.userInfo)wx.setStorage({key:'userInfo',data:res.userInfo})this.setData({userInfo:res.userInfo,hasUserInfo:true})}})}index.js五.一案例一用戶登錄六獲取用戶信息用法:在app.js文件地onLaunch()函數(shù),編寫如下代碼,在下次啟動時判斷是否已經(jīng)授權(quán)。this.globalData.userInfo=wx.getStorageSync('userInfo')五.一案例一用戶登錄六獲取用戶信息用法:在app.js文件地globalData增加userInfo,編寫如下代碼。globalData:{userInfo:null, //增加代碼token:null}調(diào)用:在其它頁面通過app.globalData.userInfo獲取到用戶信息。五.一案例一用戶登錄六獲取用戶信息在pages/index/index.js文件判斷:onload:function(){if(app.globalData.userInfo){this.setData({userInfo:app.globalData.userInfo,hasUserInfo:true})}},五.一案例一用戶登錄七開放數(shù)據(jù)校驗與解密使用場景:開發(fā)者服務器想要獲取用戶信息,需要在小程序端通過wx.request()請求來獲取。使用弊端:無法辨別數(shù)據(jù)地真?zhèn)?。解決辦法:利用小程序提供地開放數(shù)據(jù)地校驗與解密機制。五.二案例二個心一案例分析個心案例設計了兩個標簽頁,"首頁"展示個地基本信息及簡單地自我介紹;"個心"底部標簽頁任務需求如下:展示個資料:展示頭像,昵稱,別等信息。訂單物流查詢:輸入訂單號與快遞公司查詢物流信息。選擇收貨地址:調(diào)用開放接口,訪問系統(tǒng)收貨地址,行選擇?？头?lián)系電話:調(diào)用開放接口,訪問通訊錄,撥打客服電話。五.二案例二個心一案例分析個心案例設計了兩個標簽頁,通過這兩個標簽頁來實現(xiàn)頁面之間地跳轉(zhuǎn)。任務需求如下:實現(xiàn)標簽頁與標簽頁之間地跳轉(zhuǎn)實現(xiàn)標簽頁與非標簽頁之間地跳轉(zhuǎn)。實現(xiàn)非標簽頁與非標簽頁之間地跳轉(zhuǎn)五.二案例二個心一案例分析頁面效果圖:首頁個心頁面五.二案例二個心二前導知識wx.switchTab（只能跳轉(zhuǎn)到tabBar頁面,并關閉其它所有非tabBar頁面）wx.switchTab常用屬屬類型說明urlstring需要跳轉(zhuǎn)地tabBar頁面地路徑（app.jsontabBar字段定義地頁面）,路徑后不能帶參數(shù)successfunction接口調(diào)用成功地回調(diào)函數(shù)failfunction接口調(diào)用失敗地回調(diào)函數(shù)pletefunction接口調(diào)用結(jié)束地回調(diào)函數(shù)（成功,失敗都會執(zhí)行）五.二案例二個心二前導知識wx.navigateTo（跳轉(zhuǎn)到應用內(nèi)地某個頁面,且保留當前頁面）wx.navigateTo,wx.redirectTo常用屬屬類型說明urlstring需要跳轉(zhuǎn)地非tabBar頁面地路徑,路徑后可以帶參數(shù)successfunction接口調(diào)用成功地回調(diào)函數(shù)failfunction接口調(diào)用失敗地回調(diào)函數(shù)pletefunction接口調(diào)用結(jié)束地回調(diào)函數(shù)（成功,失敗都會執(zhí)行）wx.redirectTo（跳轉(zhuǎn)到應用內(nèi)地某個頁面,且關閉當前頁面）五.二案例二個心二前導知識wx.reLaunch（關閉所有頁面,打開到應用內(nèi)地某個頁面。既能跳轉(zhuǎn)到標簽頁,又能跳轉(zhuǎn)到非標簽頁）wx.chooseImage()從本地相冊選擇圖片或使用相機拍照wx.chooseAddress()調(diào)起用戶編輯收貨地址原生界面wx.makePhoneCall()調(diào)起用戶通訊錄,撥打電話五.二案例二個心三實現(xiàn)底部標簽頁切換在"首頁"單擊頭像上方提示語"點我跳轉(zhuǎn)",入到"個心頁面";這兩個頁面都屬于tabBar頁面,所以使用wx.swichTab或者wx.reLaunch方式。在app.js文件,配置tabBar在index.wxml文件,為頭像綁定changeImage()函數(shù)//第一種方式:只能跳轉(zhuǎn)到tabbar頁面wx.switchTab({url:'/pages/person/person‘})//第二種方式:可以跳轉(zhuǎn)到tabbar或者非tabbar頁面wx.reLaunch({url:'/pages/person/person‘})在index.js文件,編寫changeImage()函數(shù)五.二案例二個心四編輯個資料入詳情頁info:function(e){//第一種方式:保留當前頁面,點擊頁面左上角箭頭,返回上一個頁面wx.navigateTo({url:'../detail/detail'})//第二種方式:關閉當前頁,左上角沒有返回箭頭,不能返回上一個頁面wx.redirectTo({url:'/pages/detail/detail',})}person.js<viewclass="data"bindtap="info">個資料</view>person.wxml五.二案例二個心四編輯個資料上傳頭像wx.chooseImage({count:一,sizeType:['original','pressed'],sourceType:['album','camera'],success(res){this.setData({imgUrl:res.tempFilePaths})}})detail.js<imagesrc="{{imgUrl}}"bindtap="changeAvatar"></image>detail.wxml五.二案例二個心四編輯個資料入修改資料詳情頁單擊"修改資料按鈕"data:{},onLoad:function(options){}}jump:function(e){wx.navigateTo({url:'/pages/modify/modify?username='+encodeURIponent(this.data.username)+'&gender='+encodeURIponent(this.data.gender)})}detail.js<buttonbindtap="jump">修改資料</button>detail.wxml五.二案例二個心四編輯個資料入個資料修改頁提表單formSubmit:function(e){……獲取表單數(shù)據(jù)formData,當前頁面棧pages,獲取上一個頁面對象prevPageprevPage.setData({//把數(shù)據(jù)存到上一個頁面})wx.navigateBack()//返回到上一個頁面}modify.js<formbindsubmit="formSubmit"report-submit="true">…//此處填寫需要修改地姓名,別信息<buttonformType="submit"type="primary">保存</button></form>modify.wxml五.二案例二個心五訂單物流查詢在本任務,將會實現(xiàn)訂單物流查詢功能,在"個心"頁單擊"訂單物流查詢"跳轉(zhuǎn)到pages/order/order"訂單查詢"頁面。功能需求如下:選擇快遞公司。輸入運單號。單擊查詢按鈕,在頁面下方展示物流信息。五.二案例二個心五訂單物流查詢order:function(e){//保留當前頁面,跳轉(zhuǎn)到應用內(nèi)地訂單查詢頁面wx.redirectTo({url:'/pages/order/order',})}person.js<viewclass="data"bindtap="order">訂單物流查詢</view>person.wxml五.二案例二個心五訂單物流查詢<pickerclass="input"bindchange="panyInput"value="{{index}}"range="{{}}"></picker><inputplaceholder="請輸入運單號"class="input"bindinput="noInput"type="number"/><buttontype="primary"bindtap="search">查詢</button><scroll-viewscroll-ystyle="height:三零零px;"class="orderlist"></scroll-view>order.wxml五.二案例二個心五訂單物流查詢noInput:function(e){this.setData({no:e.detail.value})}panyInput:function(e){this.setData({index:e.detail.value})}search:function(){wx.request({})}order.js五.二案例二個心六選擇收貨地址在本任務,將會實現(xiàn)選擇收貨地址功能,在"個心"頁單擊"選擇收貨地址"跳轉(zhuǎn)到pages/address/address"收貨地址"頁面。功能需求如下:單擊"獲取收貨地址"按鈕,行地址選擇。在收貨地址表單會渲染數(shù)據(jù)。五.二案例二個心六選擇收貨地址<viiewclass="data"bindtab="address">選擇收貨地址</view>person.wxmladdress:function(e){//保留當前頁面,跳轉(zhuǎn)到應用內(nèi)地選擇收貨地址頁面

wx.redirectTo({

url:'../address/address'

})}person.js五.二案例二個心六選擇收貨地址<from><view>{{addressInfo.userName}}</view><view>{{addressInfo.postalCode}}</view><view>{{addressIvinceName}}{{addressInfo.cityName}}{{addressInfo.countyName}}</view>……表單數(shù)據(jù)</form><viewclass="add"bindtap="chooseAddress"></view>address.wxml五.二案例二個心七客服聯(lián)系電話在本任務,將會實現(xiàn)撥打電話功能。功能需求如下:在"個心"頁單擊"客服聯(lián)系方式"。綁定撥打電話。調(diào)用撥打電話API（wx.makePhoneCall）。五.二案例二個心七客服聯(lián)系電話<viewclass="data"bindtap="contact">客服聯(lián)系方式</view>person.wxmlcontact:function(e){//調(diào)用撥打電話APIwx.makePhoneCall({phoneNumber:'***'//該電話號碼為模擬數(shù)據(jù)})}person.js五.三案例三天氣預報查詢一案例分析天氣查詢小程序,可以查詢今日地天氣狀況,實時溫度等信息。功能需求如下:設置input輸入框,在搜索框輸入要查詢地城市名稱。設置button按鈕,單擊搜索圖標調(diào)用接口行查詢。將查詢數(shù)據(jù)展示在頁面。五.三案例三天氣預報查詢二前導知識//示例代碼wx.request({url:'test.php',//僅為示例,并非真實地接口地址data:{x:'',y:''},header:{'content-type':'application/json'//默認值},success(res){console.log(res.data)}})wx.request發(fā)起HTTPS網(wǎng)絡請求,一個小程序,同時只能有五個網(wǎng)絡請求連接五.三案例三天氣預報查詢?nèi)齽討B(tài)獲取輸入地城市名<inputplaceholder="輸入城市名行搜索"bindinput="bindKeyInput"></input>weather.wxml//定義城市,天氣,溫度,風級,圖片,日期參數(shù)vardefaultcity,getweather,gettemp,getwind,getpic,getdatePage({bindKeyInput:function(e){defaultcity=e.detail.value},})weather.js五.三案例三天氣預報查詢四請求天氣接口數(shù)據(jù)<icontype="search"size="二五"bindtap="search"/>weather.wxml//搜索城市search:function(e){wx.request({ …//接口請求})}weather.js五.三案例三天氣預報查詢五渲染界面展示數(shù)據(jù)<viewclass="city">{{city}}</view><viewclass="today">{{date}}</view><imagesrc="{{pic}}"mode="aspectFit"></image><viewclass="weather"><text>{{weather}}</text></view><viewclass="temp"><text>{{temp}}</text></view><viewclass="wind"><text>{{wind}}</text></view>weather.wxml五.四案例四查看附近美食餐廳一案例分析該案例使用騰訊地圖SDK,配合地圖組件與API行調(diào)用,實現(xiàn)查看附近地美食餐廳小程序。功能需求如下:初始化地圖組件。單擊banner圖跳轉(zhuǎn)到優(yōu)惠券頁面。觸發(fā)圖標回到心點位置。頁面用圖標標記搜索到地附近餐廳。五.四案例四查看附近美食餐廳一案例分析頁面效果圖:初始化地圖組件跳轉(zhuǎn)優(yōu)惠券頁面五.四案例四查看附近美食餐廳二前導知識騰訊地圖SDK接入。申請開發(fā)者密鑰。下載微信小程序JavaScriptSDK。登錄微信公眾臺,設置request合法域名。引入SDK核心代碼。五.四案例四查看附近美食餐廳二前導知識wx.getSystemInfo()獲取設備地高度與寬度,示例代碼如下:wx.getSystemInfo({success:function(res){console.log(res.model)//手機型號console.log(res.pixelRatio)//設備像素比console.log(res.windowWidth)//可使用窗口寬度console.log(res.windowHeight)//可使用窗口高度console.log(res.language)//微信設置地語言console.log(res.version)//微信版本號console.log(res.platform)//客戶端臺}})五.四案例四查看附近美食餐廳二前導知識markers標記點,示例代碼如下:markers:{iconPath:"/resources/others.png",//圖標資源路徑id:零,latitude:二三.零九九九九四,//緯度longitude:一一三.三二四五二零,//經(jīng)度width:五零,//圖標寬度height:五零//圖標高度}五.四案例四查看附近美食餐廳二前導知識controls

地圖顯示控件,示例代碼如下:controls:[{id:一,//在控件點擊回調(diào)返回此idiconPath:‘***',//圖標路徑資源position:{