模塊5 微信小程序API（下）《微信小程序》教學課件

《微信小程序》?精品課件合集第X章XXXX模塊5微信小程序API（下）【案例5-1】羅盤動畫01案例分析“羅盤動畫”微信小程序分為圖片區(qū)域和按鈕區(qū)域，實現了對圖片的一系列動畫操作，包括旋轉、縮放、移動、傾斜等。案例分析分別點擊“旋轉”“縮放”“移動”“傾斜”按鈕可以實現圖片的旋轉、縮放、移動、傾斜效果；點擊“旋轉并縮放”按鈕可以實現圖片的旋轉并縮放效果；點擊“旋轉后縮放”按鈕可以實現圖片先進行旋轉，之后再縮放的效果；點擊“同時展示全部”按鈕可以實現圖片同時進行旋轉、縮放、移動、傾斜的效果；點擊“按順序展示全部”按鈕可以實現圖片逐一進行旋轉、縮放、移動、傾斜效果；點擊“回到原始狀態(tài)”按鈕可以將圖片恢復成初始狀態(tài)。

先定一個小目標！掌握動畫API，能夠完成動畫的制作知識儲備動畫API知識儲備什么是動畫API？動畫API知識儲備動畫API用于在微信小程序中完成動畫效果的制作。在微信小程序中添加動畫效果，可以讓頁面中的內容動起來。動畫效果對瀏覽者的視覺沖擊力遠遠高于靜態(tài)畫面，更能吸引瀏覽者。動畫API知識儲備動畫API的使用方法如下：第一步：通過wx.createAnimation()方法獲取Animation實例；第二步：調用Animation實例的方法實現動畫效果。varanimation=wx.createAnimation(Objectobject)Animation實例（也是一個對象）動畫API選項類型說明durationnumber動畫持續(xù)時間，單位毫秒，默認值為400毫秒timingFunctionstring動畫的效果，默認值為lineardelaynumber動畫延遲時間，單位毫秒，默認值為0transformOriginstring設置旋轉元素的基點位置，默認值為50%50%0，這3個數字分別表示x軸、y軸和z軸的位置知識儲備wx.createAnimation()方法的常用選項如下表。

動畫API合法值說明linear動畫從頭到尾的速度是相同的ease動畫以低速開始，然后加快，在結束前變慢ease-in動畫以低速開始ease-in-out動畫以低速開始和結束ease-out動畫以低速結束step-start動畫第一幀就跳至結束狀態(tài)直到結束step-end動畫—直保持開始狀態(tài)，最后一幀跳到結束狀態(tài)知識儲備wx.createAnimation()方法的timingFunction選項有多個合法值，具體如下表。

動畫API方法說明rotate(numberangle)旋轉。從原點順時針旋轉一個角度，角度取值范圍為[-180,

180]export()導出動畫隊列。export()方法每次調用后會清掉之前的動畫操作scale(numbersx,numbersy)縮放。當僅有sx參數時，表示在x軸、y軸同時縮放sx倍數；如果sx和sy參數都存在，sx表示x軸縮放倍數，sy表示y軸縮放倍數translate(numbertx,numberty)平移變換。當只有tx參數時，表示x軸偏移tx，單位為px；如果tx和ty參數都存在，表示在x軸偏移tx，單位為px，在y軸偏移ty，單位為pxskew(numberax,numberay)傾斜。相對x軸、y軸傾斜的角度，角度取值范圍為[-180,

180]知識儲備Animation實例的常用方法如下表。

動畫API方法說明step(Objectobject)表示一組動畫完成。當調用任意多個動畫方法組成一組動畫時，一組動畫中的所有動畫會同時開始，一組動畫完成后才會進行下一組動畫opacity(numbervalue)設置透明度，范圍為0~1backgroundColor(stringvalue)設置背景色width(number|stringvalue)設置寬度top(number|stringvalue)設置top值知識儲備動畫API>>接上表

步驟1演示動畫API的使用在pages/index/index.js文件的Page({})中定義頁面初始數據move。動畫API知識儲備data:{move:{}},move對象用于保存動畫隊列步驟3步驟4步驟2在pages/index/index.wxml文件編寫頁面結構。動畫API知識儲備演示動畫API的使用<viewanimation="{{move}}">helloworld</view><buttonbindtap="translate">動畫</button>綁定事件處理函數為translate()步驟1步驟3步驟4步驟2在pages/index/index.js文件的Page({})中定義translate()函數實現動畫效果。動畫API知識儲備演示動畫API的使用translate:function(){varanimation=wx.createAnimation({duration:4000,timingFunction:'ease'})animation.translate(50,70).step()this.setData({move:animation.export()})}步驟1步驟3步驟4步驟2完成上述代碼后，運行程序，單擊“動畫”按鈕后，“helloworld”向右下角平移，單擊按鈕前后的對比效果圖如下。動畫API知識儲備演示動畫API的使用步驟1步驟3步驟4步驟2

先定一個小目標！掌握“羅盤動畫”微信小程序的準備工作，能夠成功搭建小程序目錄結構案例實現1.準備工作1創(chuàng)建一個新的微信小程序項目，項目名稱為“羅盤動畫”，模板選擇“不使用模板”。創(chuàng)建項目案例實現1.準備工作2在app.json文件中配置一個compass頁面。配置頁面3在pages/compass/compass.json文件中配置頁面導航欄。配置導航欄4復制pages/compass/compass.wxss文件和images文件夾。復制素材案例實現1.準備工作“羅盤動畫”微信小程序的目錄結構

先定一個小目標！掌握“羅盤動畫”頁面結構的實現，能夠完成頁面結構的編寫案例實現2.實現“羅盤動畫”微信小程序的頁面結構案例實現圖片區(qū)域的頁面結構2.實現“羅盤動畫”微信小程序的頁面結構案例實現按鈕區(qū)域的頁面結構2.實現“羅盤動畫”微信小程序的頁面結構

先定一個小目標！掌握“羅盤動畫”頁面邏輯的實現，能夠完成頁面邏輯的編寫案例實現3.實現“羅盤動畫”微信小程序的頁面邏輯案例實現實現步驟在pages/compass/compass.js文件中編寫頁面所需要的數據;編寫onReady()函數，在頁面初次渲染完成時，創(chuàng)建一個動畫實例animation；編寫rotate()函數，實現從原點隨機旋轉某一個角度的效果；編寫scale()函數，實現圖片隨機縮放的效果；編寫translate()函數，實現平移變換的效果；編寫skew()函數，實現使對象相對x、y軸坐標進行隨機傾斜;3.實現“羅盤動畫”微信小程序的頁面邏輯案例實現編寫rotateAndScale()函數，實現同時進行旋轉和縮放；編寫rotateThenScale()函數，實現旋轉之后縮放的效果；編寫all()函數，實現同時展示全部動畫；編寫allOrder()函數，實現按順序展示全部動畫；編寫reset()函數，實現將動畫回到初始狀態(tài)。3.實現“羅盤動畫”微信小程序的頁面邏輯【案例5-2】用戶登錄02案例分析“用戶登錄”微信小程序用于為用戶提供登錄。在日常生活中，需要用戶登錄的場景有很多，例如，當用戶在手機中瀏覽文章想要收藏時、在線上購買商品時、進入軟件查詢個人信息時，只有用戶登錄自己的賬號以后，才可以進一步使用這些功能。案例分析點擊默認頭像可以選擇用微信頭像來作為小程序頭像；點擊“請輸入昵稱”輸入框可以手動填寫昵稱或使用微信昵稱作為昵稱；點擊“獲取用戶的積分”按鈕時，如果用戶已登錄，則會顯示對應的積分，如果用戶未登錄，則會顯示“用戶不存在，或未登錄”。案例分析點擊默認頭像選擇頭像，點擊“請輸入昵稱”輸入框，在輸入框中輸入“用戶登錄”昵稱后，選擇頭像和填寫昵稱后的頁面效果。

先定一個小目標！熟悉登錄流程時序，能夠歸納微信小程序的登錄流程知識儲備1.登錄流程時序知識儲備什么是登錄流程時序？1.登錄流程時序知識儲備登錄流程時序由微信小程序官方文檔提供，通過對登錄流程時序的學習，可以完成登錄功能的開發(fā)。微信官方提供的登錄功能可以方便地獲取微信提供的用戶身份標識，從而使開發(fā)者服務器能夠識別每個微信小程序用戶。1.登錄流程時序知識儲備微信小程序官方文檔提供的登錄流程時序圖如下。1.登錄流程時序知識儲備小程序用戶登錄流程的參與角色用戶使用的客戶端，即微信小程序。開發(fā)者服務器微信小程序的后端服務器，用于為微信小程序用戶提供服務。微信接口服務微信為開發(fā)者服務器提供的接口。1.登錄流程時序獲取code將code發(fā)送給開發(fā)者服務器校驗登錄憑證開發(fā)者服務器自定義登錄態(tài)在微信小程序中通過wx.login()方法獲取臨時登錄憑證code。開發(fā)者服務器將appid、appsecret和code發(fā)送給微信接口服務進行登錄憑證校驗，如果校驗成功，微信接口服務會返回session_key、openid、unionid等信息。在獲取code后，使用wx.request()方法將code發(fā)送給開發(fā)者服務器。在開發(fā)者服務器中為登錄成功的用戶生成一個token，然后通過驗證token的有效性來識別用戶的登錄狀態(tài)。知識儲備1.登錄流程時序演示登錄流程

先定一個小目標！掌握登錄API，能夠運用wx.login()方法實現用戶登錄知識儲備2.登錄API知識儲備登錄API有什么作用？2.登錄API登錄API可以完成登錄功能的開發(fā)。微信小程序提供了登錄API，其使用方法是，調用wx.login()方法獲取用戶登錄憑證code，獲取后，將它發(fā)送給開發(fā)者服務器。知識儲備2.登錄API知識儲備選項類型說明timeoutnumber超時時間，單位毫秒successfunction調用成功的回調函數failfunction調用失敗的回調函數completefunction調用結束的回調函數wx.login()方法的常用選項如下表。

2.登錄API知識儲備屬性類型說明codestring用戶登錄憑證（有效期5分鐘）success回調函數執(zhí)行后，其參數會接收到一個對象，對象中有一個code屬性，如下表。code即為調用wx.login()方法獲取的用戶登錄憑證。注意2.登錄API2.登錄API知識儲備wx.login()方法的具體用法wx.login({success:res=>{if(res.code){ //res.code為登錄獲取的codewx.request({ //登錄成功之后發(fā)起網絡請求url:':3000/login',method:'post',data:{code:res.code //設置參數，把code傳遞給服務器}})}else{ //登錄失敗，在控制臺輸出錯誤信息console.log('登錄失?。?+res.errMsg)}}})

先定一個小目標！掌握數據緩存API，能夠對數據進行存儲、獲取和移除等操作知識儲備3.數據緩存API知識儲備數據緩存API有什么作用？3.數據緩存API數據緩存API可以實現數據的緩存，從而加快讀取數據的速度。在微信小程序中，需要保存一些臨時數據時，例如，保存用戶登錄后獲取到的token，或保存一些經常需要從服務器中下載的數據，提高微信小程序下次打開時的加載速度。知識儲備3.數據緩存API知識儲備方式方法說明異步wx.setStorage()將數據存儲在本地緩存指定的key中wx.getStorage()從本地緩存中異步獲取指定key的內容wx.getStorageInfo()異步獲取當前storage的相關信息wx.removeStorage()從本地緩存中移除指定key同步wx.setStorageSync()wx.setStorage()方法的同步版本wx.getStorageSync()wx.getStorage()方法的同步版本wx.getStorageInfoSync()wx.getStorageInfo()方法的同步版本wx.removeStorageSync()wx.removeStorage()方法的同步版本常見的數據緩存方法如下表。

3.數據緩存API存儲的最大數據長度注意：單個key允許存儲的最大數據長度為1MB，所有數據存儲上限為10MB。知識儲備3.數據緩存API知識儲備選項類型說明keystring本地緩存中指定的key，該項為必填項dataany需要存儲的內容，只支持原生類型，Date及能夠通過JSON.stringify()序列化的對象，該項為必填項successfunction調用成功的回調函數failfunction調用失敗的回調函數completefunction調用結束的回調函數wx.setStorage()方法的常用選項如下表。

3.數據緩存API知識儲備選項類型說明keystring本地緩存中指定的key，該項為必填項successfunction調用成功的回調函數failfunction調用失敗的回調函數completefunction調用結束的回調函數wx.getStorage()方法的常用選項如下表。

3.數據緩存API知識儲備VS異步方法不會阻塞當前任務異步方法需要通過傳入回調函數獲取結果在發(fā)生錯誤時，異步方法會執(zhí)行fail()回調函數返回錯誤同步方法名以Sync結尾同步方法直到處理完之后才能繼續(xù)向下執(zhí)行同步方法通過返回值獲取結果在發(fā)生錯誤時，同步方法通過try...catch捕獲異常來獲取錯誤信息同步方法3.數據緩存API知識儲備3.數據緩存API使用異步方法存儲、獲取緩存數據示例wx.setStorage({

//存儲緩存數據key:'key', //本地緩存中指定的keydata:'value', //需要存儲的內容（支持對象或字符串）success:res=>{}, //接口調用成功的回調函數fail:res=>{} //接口調用失敗的回調函數})wx.getStorage({

//獲取緩存數據key:'key',

//本地緩存中指定的keysuccess:res=>{ //接口調用成功的回調函數console.log(res.data)},fail:res=>{} //接口調用失敗的回調函數})

先定一個小目標！掌握頭像昵稱填寫功能，能夠實現頭像選擇和昵稱填寫知識儲備4.頭像昵稱填寫知識儲備為什么要填寫頭像昵稱？4.頭像昵稱填寫知識儲備頭像昵稱是在用戶登錄小程序后，顯示在頁面中的頭像和昵稱。目前，微信小程序不允許開發(fā)者在未獲得用戶同意的情況下展示用戶的頭像和昵稱，當需要展示時，應使用微信小程序的頭像昵稱填寫功能。4.頭像昵稱填寫知識儲備將button組件的open-type屬性值設置為chooseAvatar，當用戶選擇頭像之后，可通過bindchooseavatar綁定的事件處理函數獲取頭像信息的臨時路徑。頭像選擇的使用方法昵稱填寫的使用方法將input組件的type屬性值設置為nickname，當用戶在此input進行輸入時，鍵盤上方會展示用戶的微信昵稱，用戶可以使用該昵稱，也可以手動填寫昵稱。4.頭像昵稱填寫步驟1演示頭像昵稱填寫功能的使用在pages/index/index.js文件中編寫頁面所需的數據。知識儲備constdefaultAvatar='/images/avatar.png'Page({data:{avatarUrl:defaultAvatar},})默認頭像路徑步驟3步驟4步驟24.頭像昵稱填寫在pages/index/index.wxml文件中編寫頁面結構。知識儲備<buttonclass="avatar-wrapper"open-type="chooseAvatar"bindchooseavatar="onChooseAvatar"><imageclass="avatar"src="{{avatarUrl}}"/></button><inputtype="nickname"class="nickname"placeholder="請輸入昵稱"/>步驟1步驟3步驟4步驟24.頭像昵稱填寫演示頭像昵稱填寫功能的使用在pages/index/index.wxss文件中編寫樣式。知識儲備.avatar-wrapper{width:160rpx;height:160rpx;padding:0;background:none;}.avatar{width:160rpx;height:160rpx;border-radius:20rpx;}步驟1步驟3步驟4步驟2.nickname{width:80%;height:100rpx;margin:20pxauto;border:1pxsolid#000000;text-align:center;}4.頭像昵稱填寫演示頭像昵稱填寫功能的使用在pages/index/index.js文件中編寫onChooseAvatar()函數，獲取頭像信息的臨時路徑。知識儲備步驟1步驟3步驟4步驟2onChooseAvatar:function(e){const{avatarUrl}=e.detailthis.setData({avatarUrl})}4.頭像昵稱填寫演示頭像昵稱填寫功能的使用在手機中預覽微信小程序。首先在微信開發(fā)者工具中單擊“預覽”按鈕，獲得預覽二維碼，然后用手機中的微信客戶端掃描二維碼打開微信小程序，初始頁面效果如右圖所示。知識儲備4.頭像昵稱填寫演示頭像昵稱填寫功能的使用在初始頁面中，點擊初始頭像后、選擇“用微信頭像”后、點擊昵稱輸入框后、點擊“用微信昵稱”后的頁面效果如下。知識儲備4.頭像昵稱填寫點擊“用微信昵稱”后點擊初始頭像后選擇“用微信頭像”后點擊昵稱輸入框后演示頭像昵稱填寫功能的使用

先定一個小目標！掌握App()函數，能夠運用該函數執(zhí)行特定操作或共享數據知識儲備5.App()函數知識儲備什么是App()函數？5.App()函數知識儲備若要在微信小程序啟動、顯示、隱藏時執(zhí)行某些操作，或者在各個頁面中需要共享一些數據時，可以通過App()函數實現。App()函數用于注冊一個微信小程序，該函數必須在app.js文件中調用，且只能調用一次。5.App()函數知識儲備App()函數的參數是一個對象，通過該對象可以指定應用生命周期回調函數和保存一些共享數據。

應用生命周期函數應用生命周期函數是指微信小程序“啟動→運行→銷毀”期間依次調用的函數。

5.App()函數知識儲備函數名說明onLaunch()監(jiān)聽微信小程序初始化，微信小程序初始化完成時觸發(fā)，全局只觸發(fā)一次onShow()監(jiān)聽微信小程序啟動或切前臺，微信小程序啟動或從后臺進入前臺時觸發(fā)onError()錯誤監(jiān)聽函數，微信小程序腳本錯誤或者API調用報錯時觸發(fā)onHide()監(jiān)聽微信小程序切后臺，微信小程序從前臺進入后臺時觸發(fā)onPageNotFound()頁面不存在監(jiān)聽函數，微信小程序要打開的頁面不存在時觸發(fā)應用生命周期回調函數如下表。

5.App()函數知識儲備5.App()函數演示App實例的獲取通過getApp()函數獲取App實例之后，可以訪問App實例的屬性或調用App實例的方法。

//getApp()函數獲取微信小程序全局唯一的App實例constapp=getApp()定義在App()函數的參數{}中的方法，可以直接使用this獲取App實例，不必使用getApp()函數。注意

先定一個小目標！案例實現掌握“用戶登錄”微信小程序的準備工作，能夠成功搭建小程序目錄結構1.準備工作1創(chuàng)建一個新的微信小程序項目，項目名稱為“用戶登錄”，模板選擇“不使用模板”。創(chuàng)建項目案例實現23在pages/index/index.json文件中配置頁面導航欄。配置導航欄4進入“服務器端”文件夾，在index.js文件的wx對象中填寫自己的appid和appsecret。執(zhí)行命令啟動服務器。啟動服務器1.準備工作復制pages/index/index.wxss文件和images文件夾。復制素材案例實現1.準備工作“用戶登錄”微信小程序的目錄結構

先定一個小目標！案例實現掌握用戶登錄的實現，能夠完成用戶登錄2.實現用戶登錄定義頁面所需的數據;在微信小程序啟動時調用login()方法實現自動登錄；在微信開發(fā)者工具的本地設置中勾選“不校驗合法域名、web-view（業(yè)務域名）、TLS版本以及HTTPS證書”復選框。實現小程序啟動時自動執(zhí)行登錄操作步驟案例實現2.實現用戶登錄案例實現2.實現用戶登錄運行程序，微信小程序控制臺輸出結果、服務器控制臺輸出結果如下圖。微信小程序控制臺輸出結果：獲得了logincode并收到了服務器返回的token，說明登錄成功。服務器控制臺輸出結果：獲取到logincode和session，并且session中包含session_key和openid，說明用戶登錄憑證code驗證成功。微信小程序控制臺輸出結果服務器控制臺輸出結果

先定一個小目標！3.檢查用戶是否已經登錄案例實現掌握檢查用戶是否已經登錄的實現，能夠完成用戶是否已經登錄的檢查案例實現檢查用戶是否已經登錄的實現思路微信小程序登錄成功后，會將服務器返回的token保存在globalData和數據緩存中。下次啟動微信小程序時，應該先判斷token是否存在，如果存在，則直接取出這個token即可，不用再執(zhí)行登錄操作。需要注意的是，token有可能會過期，一旦token過期就需要重新登錄，因此用數據緩存中取出token后，應先驗證token是否過期，再使用token。3.檢查用戶是否已經登錄在app.js文件的App({})中編寫checkLogin()方法，用于判斷token是否存在，如果token存在，則請求服務器，判斷token是否有效;修改app.js文件中的onLaunch()函數的代碼，用于在微信小程序啟動后檢查用戶是否已經登錄，如果沒有則執(zhí)行登錄操作。檢查用戶是否已經登錄的實現步驟案例實現3.檢查用戶是否已經登錄

先定一個小目標！4.獲取用戶的積分案例實現掌握獲取用戶積分的實現，能夠完成用戶積分的獲取在服務器端程序index.js中，當用戶成功登錄微信小程序以后，會自動為用戶生成初始積分100，并提供接口:3000/credit用于獲取積分。案例實現4.獲取用戶的積分在pages/index/index.wxml文件中編寫“獲取用戶的積分”按鈕;在pages/index/index.js文件中編寫代碼，獲取App實例，定義credit()方法用于調用wx.request()方法向服務器發(fā)送請求，如果請求成功，在控制臺中輸出服務器的返回結果。獲取用戶積分功能的實現步驟案例實現4.獲取用戶的積分案例實現當用戶已登錄時，等待控制臺中輸出了token后，單擊“獲取用戶的積分”按鈕，服務器返回的用戶積分如下圖。服務器返回的用戶積分控制臺中輸出的結果當用戶未登錄時，單擊“獲取用戶的積分”按鈕則無法獲取用戶積分，此時控制臺中輸出的結果如下圖。4.獲取用戶的積分

先定一個小目標！案例實現掌握獲取用戶頭像和昵稱的實現，能夠完成用戶頭像和昵稱的獲取5.獲取用戶頭像和昵稱在pages/index/index.js文件中定義頁面所需的數據；在pages/index/index.wxml中，在“獲取用戶的積分”按鈕上方編寫頁面結構代碼；在pages/index/index.js文件中編寫onChooseAvatar()函數，獲取頭像信息的臨時路徑。獲取用戶頭像和昵稱的實現步驟案例實現5.獲取用戶頭像和昵稱【案例5-3】查看附近美食餐廳03案例分析“查看附近美食餐廳”微信小程序打開后，會顯示一個地圖組件，并提供一些功能按鈕。案例分析地圖頁面上方的banner圖，用于顯示優(yōu)惠券領取信息；地圖左下角有一個定位按鈕，點擊此按鈕可以將地圖中心點設為當前定位的位置；點擊banner圖跳轉到優(yōu)惠券頁面。案例分析優(yōu)惠券頁面，顯示兩個優(yōu)惠券，且都是“已領取”的狀態(tài)。

先定一個小目標！掌握騰訊地圖SDK，能夠實現騰訊地圖SDK的接入和使用知識儲備1.騰訊地圖SDK知識儲備騰訊地圖SDK有什么作用？1.騰訊地圖SDK騰訊地圖SDK是一套為開發(fā)者提供多種地理位置服務的工具，可以使開發(fā)者在自己的應用中加入地圖相關的功能，輕松訪問騰訊地圖服務和數據，更好地實現微信小程序的地圖功能。知識儲備1.騰訊地圖SDK知識儲備騰訊地圖SDK的使用步驟分為以下5步。申請開發(fā)者秘鑰登錄微信小程序管理后臺添加合法域名在微信小程序中聲明權限134使用騰訊地圖SDK5下載騰訊地圖SDK21.騰訊地圖SDK知識儲備申請開發(fā)者秘鑰打開騰訊位置服務網站，單擊右上角“注冊”按鈕進行注冊，注冊后單擊“登錄”按鈕登錄。1.騰訊地圖SDK知識儲備申請開發(fā)者秘鑰將鼠標指針移到導航欄的“開發(fā)文檔”上，會彈出下拉菜單，單擊下拉菜單中的“微信小程序JavaScriptSDK”鏈接，進入微信小程序JavaScriptSDK頁面。1.騰訊地圖SDK知識儲備申請開發(fā)者秘鑰單擊微信小程序JavaScriptSDK頁面中的“申請秘鑰”鏈接進入“我的應用”頁面。1.騰訊地圖SDK知識儲備申請開發(fā)者秘鑰單擊“我的應用”頁面中的“+創(chuàng)建應用”按鈕，會彈出“創(chuàng)建應用”懸浮框。1.騰訊地圖SDK知識儲備申請開發(fā)者秘鑰在“創(chuàng)建應用”懸浮框中填寫“應用名稱”和“應用類型”，應用名稱為“map”，應用類型為“餐飲”，填寫完成后單擊“創(chuàng)建”按鈕，進入創(chuàng)建完成頁面。1.騰訊地圖SDK知識儲備申請開發(fā)者秘鑰在創(chuàng)建完成頁面中單擊“添加key”鏈接，會彈出“添加key到「map」應用”懸浮框。1.騰訊地圖SDK知識儲備申請開發(fā)者秘鑰在彈出的懸浮框中根據實際需求填寫完成后，單擊“添加”按鈕，會提示“創(chuàng)建key成功”，進入創(chuàng)建完成后“我的應用”頁面。1.騰訊地圖SDK知識儲備下載騰訊地圖SDK版本說明：騰訊地圖SDK根據不同的開發(fā)場景提供了多種版本；針對微信小程序開發(fā)，應使用“微信小程序JavaScriptSDK”，它可以在微信小程序中調用騰訊位置服務的POI檢索、關鍵詞輸入提示、地址解析、逆地址解析、行政區(qū)劃和距離計算等數據服務。1.騰訊地圖SDK知識儲備下載騰訊地圖SDK資源包下載：單擊“JavaScriptSDKv1.1”鏈接下載qqmap-wx-jssdk1.1.zip壓縮包。將qqmap-wx-jssdk.js文件存放到項目中的libs（自定義名稱）目錄下使用即可。單擊鏈接下載1.騰訊地圖SDK知識儲備登錄微信小程序管理后臺添加合法域名登錄微信小程序管理后臺，進入“開發(fā)→開發(fā)管理→開發(fā)設置→服務器域名”頁面，設置“request合法域名”。1.騰訊地圖SDK知識儲備在微信小程序中聲明權限微信小程序在獲取當前的地理位置時，需要開發(fā)者在app.json文件中對permission和requiredPrivateInfos進行聲明。"permission":{ //對微信小程序接口權限進行設置"scope.userLocation":{"desc":"你的位置信息將用于小程序位置接口的效果展示"}},"requiredPrivateInfos":[ //向用戶申請隱私信息"getLocation"],1.騰訊地圖SDK知識儲備騰訊地圖SDK的使用方法使用騰訊地圖SDK首先引入SDK核心類，通過newQQMapWX()構造函數創(chuàng)建QQMapWX實例；然后通過該實例的相關屬性和方法實現地點搜索等功能。在這里使用search()方法搜索周邊興趣點（PointofInterest，POI）信息，例如“酒店”“餐飲”“學?！钡?。1.騰訊地圖SDK知識儲備search()方法的常用選項如下表。使用騰訊地圖SDK選項類型說明keywordstringPOI搜索關鍵詞，默認周邊搜索locationstring|object位置坐標，默認為當前位置successfunction搜索成功的回調函數failfunction搜索失敗的回調函數1.騰訊地圖SDK知識儲備通過示例代碼演示騰訊地圖SDK的使用。使用騰訊地圖SDK//引入SDK核心類，js文件的位置可自行放置constQQMapWX=require('../../libs/qqmap-wx-jssdk.js')//創(chuàng)建QQMapWX實例constqqmapsdk=newQQMapWX({key:'填寫自己申請的開發(fā)者密鑰'})//實現邏輯代碼的編寫Page({

//見下一頁})1.騰訊地圖SDK知識儲備使用騰訊地圖SDK//實現邏輯代碼的編寫Page({

onShow:function(){

qqmapsdk.search({//搜索信息

keyword:'酒店',

success:res=>{console.log(res)},

fail:res=>{console.log(res)}

})

}})1.騰訊地圖SDK通過示例代碼演示騰訊地圖SDK的使用。知識儲備1.騰訊地圖SDK使用騰訊地圖SDK保存代碼后，控制臺中可以看到通過“酒店”關鍵詞搜索到的周邊POI信息。通過示例代碼演示騰訊地圖SDK的使用。

先定一個小目標！掌握map組件，能夠靈活運用map組件實現地圖效果知識儲備2.

map組件知識儲備map組件有什么作用？2.

map組件在微信小程序中，map組件可以為用戶提供地圖功能。map組件可以在頁面中顯示地圖，并且支持移動、縮放、添加標記點等功能。map組件通過<map></map>標簽來定義。知識儲備2.

map組件知識儲備屬性類型說明longitudenumber中心經度，為必填項latitudenumber中心緯度，為必填項scalenumber縮放級別，取值范圍為3~20，默認值為16markersArray.<marker>標記點數組show-locationboolean是否顯示帶有方向的當前定位點，默認值為falsebindregionchangeeventhandle視野發(fā)生變化時觸發(fā)的事件處理函數map組件的常用屬性如下表。

2.

map組件知識儲備屬性類型說明idnumber標記點id，在事件處理函數中通過id可以識別當前事件對應的標記點longitudenumber經度，浮點數，取值范圍為-180~180，為必填項latitudenumber緯度，浮點數，取值范圍為-90~90，為必填項iconPathstring設置標記點的圖標路徑，支持網絡路徑、本地路徑、代碼包路徑，為必填項titlestring標記點名，點擊時顯示zIndexnumber顯示層級alphanumber標記點的透明度，默認值為1，即無透明，取值范圍為0~1widthnumber/string標記點的圖標寬度heightnumber/string標記點的圖標高度markers數組中的每一項為一個表示標記點的marker對象，marker對象的屬性如下表。

2.

map組件步驟1演示marker標記點的定義在pages/index/index.wxml文件中為map組件添加markers屬性。知識儲備<mapid="myMap"markers="{{markers}}"scale="3"></map>步驟3步驟22.

map組件在pages/index/index.wxss中編寫樣式，讓地圖組件占滿整個頁面。知識儲備map{width:100%;height:100%;position:absolute;}演示marker標記點的定義步驟1步驟3步驟22.

map組件在pages/index/index.js文件中定義數據。知識儲備data:{markers:[{id:1, //標記點idiconPath:'/images/gps.png', //圖標路徑longitude:113.324520, //經度latitude:23.099994 //維度（廣州市）}]},2.

map組件演示marker標記點的定義步驟1步驟3步驟2

先定一個小目標！掌握地圖API，能夠實現地圖中地理位置的獲取等功能知識儲備3.地圖API知識儲備地圖API有什么作用？3.地圖API地圖API可以在map組件創(chuàng)建地圖完成后，在JS文件中對地圖進行控制。小程序中，使用wx.createMapContext()方法創(chuàng)建MapContext（Map上下文）實例，然后通過該實例的相關方法來操作map組件。知識儲備3.地圖API知識儲備方法說明getCenterLocation()獲取當前地圖中心的經緯度。返回GCJ-02坐標系moveToLocation()將地圖中心移至當前定位點MapContext實例的常用方法如下表。

3.地圖API知識儲備選項類型說明iconPathstring圖標路徑，支持網絡路徑、本地路徑、代碼包路徑successfunction接口調用成功的回調函數，通過其參數可以獲取longitude（經度）和longitude（緯度）failfunction接口調用失敗的回調函數completefunction接口調用結束的回調函數MapContext實例的getCenterLocation()方法的常用選項如下表。

3.地圖API知識儲備選項類型說明longitudenumber經度latitudenumber緯度successfunction接口調用成功的回調函數failfunction接口調用失敗的回調函數completefunction接口調用結束的回調函數MapContext實例的moveToLocation()方法的常用選項如下表。

3.地圖API知識儲備3.地圖API獲取當前地圖中心經緯度的示例//調用getCenterLocation()方法獲取當前地圖中心的經度和緯度mapCtx.getCenterLocation({success:res=>{constlongitude=res.longitudeconstlatitude=res.latitudeconsole.log(longitude,latitude)}})

先定一個小目標！掌握位置API，能夠實現獲取當前地理位置的功能知識儲備4.位置API知識儲備位置API有什么作用？4.位置API位置API用于實現獲取當前地理位置的功能。在日常生活中，通過地圖軟件可以實時定位自己或者朋友的位置，方便出行。微信小程序中，通過調用wx.getLocation()方法的success回調函數獲取定位結果。知識儲備4.位置API知識儲備使用位置API注意事項注意：對于正式項目，若要使用位置API，需要在微信小程序管理后臺的“開發(fā)管理-接口設置”頁面中申請開通，并且還需要在app.json文件中添加請求用戶隱私信息的聲明。//請求用戶隱私信息的聲明"requiredPrivateInfos":["getLocation"],4.位置API知識儲備選項類型說明typestring設為WGS84可返回GPS坐標，設為GCJ-02可以返回用于微信內置地圖查看位置的坐標successfunction接口調用成功的回調函數failfunction接口調用失敗的回調函數completefunction接口調用結束的回調函數wx.getLocation()方法的常用選項如下表。

4.位置API知識儲備屬性類型說明latitudenumber緯度，取值范圍為-90~90longitudenumber經度，取值范圍為-180~180speednumber速度，單位為m/saltitudenumber高度，單位為mwx.getLocation()方法的success()回調函數的參數是一個對象，該對象的屬性如下表。

4.位置API知識儲備演示wx.getLocation()方法的使用//調用wx.getLocation()方法獲取當前地理位置的經度和緯度wx.getLocation({type:'gcj02',success:res=>{constlongitude=res.longitudeconstlatitude=res.latitudeconsole.log(longitude,latitude)}})4.位置API

先定一個小目標！掌握路由API，能夠利用路由API實現頁面跳轉知識儲備5.路由API知識儲備路由API有什么作用？5.路由API知識儲備路由API的作用：用于實現頁面跳轉。wx.navigateTo()用于跳轉到另一個頁面，跳轉后原來的頁面會保留，并在導航欄左側提供一個返回按鈕，用戶可以返回到之前的頁面。該方法不能用于標簽頁切換。wx.redirectTo()用于關閉當前頁面，跳轉到一個新頁面。該方法不能用于標簽頁切換。wx.switchTab()用于跳轉到某個標簽頁，并關閉其他所有非標簽頁的頁面。常用的路由API方法5.路由API知識儲備選項類型說明urlstring需要跳轉的路徑，路徑后可以帶參數。參數與路徑之間使用“?”分隔，參數鍵與參數值用“=”相連，不同參數用“&”分隔，如'path?key=value&key2=value2'，該項為必填項successfunction調用成功的回調函數failfunction調用失敗的回調函數completefunction調用結束的回調函數路由API方法的常用選項如下表。

5.路由API步驟1演示路由API的使用知識儲備步驟3步驟4步驟2在pages/index/index.wxml文件中編寫一個按鈕，實現點擊按鈕時觸發(fā)navigateTo()函數。<buttonbindtap="navigateTo">路由</button>綁定事件處理函數為navigateTo()5.路由API在app.json文件中創(chuàng)建pages/list/list頁面，然后在pages/index/index.js文件中編寫navigateTo()函數，實現跳轉到pages/list/list頁面。知識儲備演示路由API的使用Page({

navigateTo:function(){

wx.navigateTo({

url:'/pages/list/list?id=1',

success:()=>{console.log('跳轉成功')},

fail:()=>{console.log('跳轉失敗')},

complete:()=>{console.log('跳轉完成')}

})

},})步驟1步驟3步驟4步驟25.路由API在pages/list/list.js文件中編寫onLoad()函數，輸出options參數的值。知識儲備onLoad:function(options){console.log(options)},步驟1步驟3步驟4步驟25.路由API演示路由API的使用保存上述代碼后，運行程序，單擊“路由”按鈕后，在控制臺中輸出結果。知識儲備步驟1步驟3步驟4步驟25.路由API通過查看控制臺中的結果，可以看出從index頁面成功跳轉到list頁面，并傳遞了參數id。演示路由API的使用

先定一個小目標！案例實現掌握“查看附近美食餐廳”微信小程序的準備工作，能夠成功搭建小程序目錄結構1.準備工作1創(chuàng)建一個新的微信小程序項目，項目名稱為“查看附近美食餐廳”，模板選擇“不使用模板”。創(chuàng)建項目案例實現23在app.json文件中配置map和coupon頁面。配置頁面4復制map.wxss、coupon.wxss文件、images和libs文件夾。復制素材1.準備工作分別在map.json文件和coupon.json文件中配置頁面導航欄。配置導航欄案例實現1.準備工作“查看附近美食餐廳”微信小程序的目錄結構

先定一個小目標！2.獲取初始數據案例實現掌握獲取初始數據的實現，能夠完成初始數據的獲取2.獲取初始數據案例實現獲取初始數據定義key屬性，屬性值為騰訊地圖SDK開發(fā)者密鑰;定義qqmapsdk，用于保存QQMapWX的實例；在data中定義scale用于保存縮放倍數，定義longitude用于保存地圖中心點經度，定義latitude用于保存中心點緯度，定義markers用于保存標記點;定義mapCtx屬性，用于保存MapContext實例，初始值設為null。在pages/map/map.js文件中編寫頁面所需的數據

先定一個小目標！3.在頁面中顯示地圖案例實現掌握在頁面中顯示地圖的實現，能夠完成中心點圖片和附近美食餐廳圖片的顯示案例實現頁面顯示地圖的實現步驟在pages/map/map.wxml文件中編寫頁面結構；在pages/map/map.js文件中編寫onLoad()函數，實現頁面加載時獲取當前位置的經度和緯度；在pages/map/map.js文件中編寫onReady()函數，實現頁面初次渲染時獲取MapContext實例;在app.json文件中聲明其需調用的地理位置相關接口。3.在頁面中顯示地圖在地圖界面上顯示中心點的圖片和附近美食餐廳的圖片

先定一個小目標！4.實現跳轉到優(yōu)惠券頁面案例實現掌握跳轉到優(yōu)惠券頁面的實現，能夠完成點擊優(yōu)惠券跳轉到優(yōu)惠券頁面案例實現跳轉到優(yōu)惠券頁面的實現步驟在pages/map/map.js文件中編寫bannerTap()函數；在pages/coupon/coupon.wxml文件中編寫優(yōu)惠券頁面的頁面結構。在pages/index/index頁面點擊優(yōu)惠券，實現跳轉到優(yōu)惠券頁面的功能4.實現跳轉到優(yōu)惠券頁面

先定一個小目標！5.實現查找附近美食餐廳功能案例實現掌握查找附近美食餐廳功能的實現，能夠根據當前位置搜索并標記出附近的餐廳案例實現查找附近美食餐廳的實現步驟在pages/map/map.js文件的Page({})中編寫getFood()函數，實現查找附近美食餐廳的功能；在pages/map/map.js文件中編寫regionChange()函數，實現地圖移動時更新地圖上的標記點；在pages/map/map.js文件中編寫controlTap()函數，將地圖中心移動到當前定位點；在微信開發(fā)者工具的本地設置中勾選“不校驗合法域名、web-view（業(yè)務域名）、TLS版本以及HTTPS證書”復選框。根據當前位置（經度和緯度）搜索附近的餐廳，并將其通過標記點標記出來5.實現查找附近美食餐廳功能【案例5-4】在線聊天04案例分析“在線聊天”微信小程序用于通過人工客服或機器客服來為用戶提供服務，及時解答用戶提出的問題。案例分析在頁面底部的輸入框中輸入“我來自微信小程序端”文本后，點擊“發(fā)送”按鈕，該頁面就會將用戶輸入的內容發(fā)送給服務器，并將用戶輸入的內容顯示在聊天界面的右側；當服務器收到消息后，會自動回復一條消息“自動回復”，顯示在聊天界面的左側。

先定一個小目標！掌握WebSocketAPI，能夠成功創(chuàng)建WebSocket連接知識儲備1.

WebSocketAPI知識儲備WebSocketAPI有什么作用？1.

WebSocketAPI知識儲備WebSocketAPI：允許服務器主動向微信小程序發(fā)送消息。WebSocket是一種在單個TCP連接上進行全雙工通信的協議，它會在客戶端與服務器之間專門建立一條通道，使客戶端與服務器之間的數據交換變得簡單?？蛻舳伺c服務器只需要完成一次握手，兩者之間就可以創(chuàng)建持久性的連接，并進行雙向數據傳輸。1.

WebSocketAPI知識儲備選項類型說明urlstring開發(fā)者服務器wss接口地址headerobjectHTTPHeader，Header中不能設置Referertimeoutnumber超時時間，單位為毫秒successfunction接口調用成功的回調函數failfunction接口調用失敗的回調函數completefunction接口調用結束的回調函數通過wx.connectSocket()方法可以創(chuàng)建一個WebSocket連接，該方法的常用選項如下表。

1.

WebSocketAPI知識儲備1.

WebSocketAPI演示wx.connectSocket()方法的使用wx.connectSocket({

//服務器地址url:'ws://:3000' })調用wx.connectSocket()方法創(chuàng)建WebSocket連接

先定一個小目標！掌握SocketTask，能夠使用SocketTask管理WebSocket連接知識儲備2.

SocketTask知識儲備SocketTask有什么作用？2.

SocketTask知識儲備當項目中同時存在多個WebSocket的連接時，使用SocketTask管理WebSocket連接，會使每一條鏈路的生命周期都更可控。而使用wx對象的方法可能會出現一些與預期不一致的情況。2.

SocketTask知識儲備演示SocketTask實例的創(chuàng)建//

ws1是一個SocketTask實例constws1=wx.connectSocket({url:'ws://:3000'})2.

SocketTaskwx.connectSocket()方法的返回值是一個SocketTask實例知識儲備2.

SocketTaskSocketTask實例的常用方法如下表。

方法說明send()通過WebSocket連接發(fā)送數據close()關閉WebSocket連接onOpen()監(jiān)聽WebSocket連接打開事件onClose()監(jiān)聽WebSocket連接關閉事件onError()監(jiān)聽WebSocket錯誤事件onMessage()監(jiān)聽WebSocket連接接收到服務器的消息事件知識儲備2.

SocketTaskSocketTask實例的send()方法的常用選項如下表。

選項類型說明