第1章初識(shí)微信小程序

第1章初識(shí)微信小程序第2章技術(shù)框架第3章WXML標(biāo)簽語(yǔ)言第4章WXSS樣式語(yǔ)言第5章JavaScript交互邏輯第6章小程序組件第7章小程序API第8章人臉識(shí)別應(yīng)用實(shí)例第9章小游戲開(kāi)發(fā)實(shí)例第10章綜合實(shí)例—在線商場(chǎng)全套PPT課件能力CAPACITY要求了解小程序的發(fā)展歷程。掌握微信小程序的注冊(cè)過(guò)程。掌握微信小程序開(kāi)發(fā)工具的安裝。認(rèn)識(shí)微信小程序安裝開(kāi)發(fā)工具本章小結(jié)一、發(fā)展歷程發(fā)2016年1月11日，微信內(nèi)部研究微信新的形態(tài)，叫“微信小程序”。2016年9月21日，微信小程序正式開(kāi)啟內(nèi)測(cè)。2017年1月9日，萬(wàn)眾矚目的第一批微信小程序正式低調(diào)上線。2017年12月28日，微信更新的6.6.1版本開(kāi)放了小游戲。2018年1月18日，微信提供了電子化的侵權(quán)投訴渠道。展2018年1月25日，從移動(dòng)應(yīng)用分享至微信的小程序頁(yè)面，用戶訪問(wèn)時(shí)支持打開(kāi)來(lái)源應(yīng)用。2018年3月，微信正式宣布小程序廣告組件啟動(dòng)內(nèi)測(cè)。2018年7月13日，小程序任務(wù)欄功能升級(jí)，新增“我的小程序”板塊。2018年8月10日，微信宣布，小程序后臺(tái)數(shù)據(jù)分析及插件功能升級(jí)，開(kāi)發(fā)者可查看已添加“我的小程序”的用戶數(shù)。2018年9月28日，微信“功能直達(dá)”正式開(kāi)放。2019年3月26日，微信“小程序評(píng)測(cè)”功能上線，該功能旨在鼓勵(lì)開(kāi)發(fā)者將小程序做得更好，提供了更優(yōu)質(zhì)的服務(wù)、更優(yōu)秀的用戶體驗(yàn)。二、小程序功能對(duì)話分享歷史列表消息通知小程序切換線下掃碼識(shí)別二維碼附近的小程序關(guān)聯(lián)公眾號(hào)支持定義關(guān)鍵字微信辟謠助手三、小程序的注冊(cè)登錄微信公眾平臺(tái)網(wǎng)站，單擊右上角的“立即注冊(cè)”鏈接進(jìn)入小程序注冊(cè)頁(yè)面采用立即注冊(cè)的方式三、小程序的注冊(cè)采用復(fù)用公眾號(hào)資質(zhì)（1）登錄微信公眾平臺(tái)，進(jìn)入已有的公眾號(hào)賬號(hào)，單擊“小程序管理”選項(xiàng)。（2）進(jìn)入小程序管理頁(yè)面，選擇“快速注冊(cè)并認(rèn)證小程序”選項(xiàng)。然后借助公眾號(hào)資質(zhì)，綁定小程序管理員，即可完成小程序注冊(cè)安裝開(kāi)發(fā)工具認(rèn)識(shí)微信小程序本章小結(jié)第一步第二步第三步第四步對(duì)于微信小程序開(kāi)發(fā)工具，可在微信官方文檔網(wǎng)站下載最新的小程序開(kāi)發(fā)工具版本，然后根據(jù)計(jì)算機(jī)自身安裝的操作系統(tǒng)版本，選擇適用于Windows64位、Windows32位或者macOS的安裝版本。一、下載與安裝

三、開(kāi)發(fā)工具功能介紹

1．模擬器模擬器模擬微信小程序在客戶端真實(shí)的邏輯表現(xiàn)，對(duì)于絕大部分的API模擬器能夠呈現(xiàn)出正確的狀態(tài)2．編輯器微信小程序編輯器可以對(duì)當(dāng)前項(xiàng)目進(jìn)行代碼編寫(xiě)和文件的添加、刪除及重命名等基本操作

三、開(kāi)發(fā)工具功能介紹

3．調(diào)試器調(diào)試器分為11個(gè)功能模塊：Console、Sources、Network、Security、Mock、AppData、Audits、Sensor、Storage、Trace和Wxml。Console模塊有兩大功能，開(kāi)發(fā)者輸入和調(diào)試代碼，以及微信小程序的錯(cuò)誤輸出，Security、Mock、Audits和Trace模塊分別可以實(shí)現(xiàn)對(duì)小程序進(jìn)行安全認(rèn)證、模擬數(shù)據(jù)、體驗(yàn)評(píng)分和監(jiān)控性能的功能。4．云開(kāi)發(fā)云開(kāi)發(fā)為開(kāi)發(fā)者提供完整的原生云端支持和微信服務(wù)支持，弱化后端和運(yùn)維概念，開(kāi)發(fā)者無(wú)須搭建服務(wù)器，使用平臺(tái)提供的API進(jìn)行核心業(yè)務(wù)開(kāi)發(fā)，即可實(shí)現(xiàn)快速上線和迭代。同時(shí)，這一功能同開(kāi)發(fā)者已經(jīng)使用的云服務(wù)相互兼容，并不互斥。單擊微信小程序開(kāi)發(fā)工具的“云開(kāi)發(fā)”模塊，會(huì)彈出云開(kāi)發(fā)控制臺(tái)窗口，如圖1-18所示。云開(kāi)發(fā)控制臺(tái)主要包括運(yùn)營(yíng)分析、數(shù)據(jù)庫(kù)、存儲(chǔ)和云函數(shù)4個(gè)模塊。開(kāi)發(fā)者可以使用云開(kāi)發(fā)的云函數(shù)、數(shù)據(jù)庫(kù)、存儲(chǔ)和云調(diào)用等功能。三、常見(jiàn)快捷鍵Ctrl+S保存Shift+Alt+F空行、縮進(jìn)等Alt+Up，Alt+Down直接對(duì)當(dāng)前光標(biāo)所在行進(jìn)行移動(dòng)操作Shift+Alt+Up，Shift+Alt+Down直接對(duì)當(dāng)前光標(biāo)所在行進(jìn)行復(fù)制操作Ctrl+Shift+Enter在當(dāng)前光標(biāo)所在的行上方插入一行格式調(diào)整相關(guān)操作快捷鍵三、常見(jiàn)快捷鍵Ctrl+Home，Ctrl+End將光標(biāo)移動(dòng)到文件首位或尾部Ctrl+I選中當(dāng)前光標(biāo)所在的行Shift+Home,Shift+End選中從行首至光標(biāo)處代碼、選中從光標(biāo)處至行尾代碼光標(biāo)相關(guān)操作快捷鍵安裝開(kāi)發(fā)工具認(rèn)識(shí)微信小程序本章小結(jié)本章小結(jié)本章從微信小程序的發(fā)展歷程開(kāi)始，先介紹小程序的功能和小程序注冊(cè)的方式，然后講解了微信小程序的安裝開(kāi)發(fā)工具，對(duì)微信小程序的開(kāi)發(fā)做了一個(gè)入門級(jí)的講解，為后續(xù)更深入的開(kāi)發(fā)進(jìn)行講解做鋪墊。THANKS

第2章技術(shù)框架

能力CAPACITY要求了解WXML標(biāo)簽語(yǔ)言的概念。掌握數(shù)據(jù)綁定、頁(yè)面渲染的使用方法。掌握事件綁定和常用事件的使用方法。熟悉模板與引用的使用方法?？傮w技術(shù)框架邏輯層視圖層組件事件與行為數(shù)據(jù)緩存插件本章小結(jié)一、運(yùn)行機(jī)制運(yùn)行機(jī)制小程序啟動(dòng)有兩種情況，一種是“冷啟動(dòng)”，另一種是“熱啟動(dòng)”。假如用戶已經(jīng)打開(kāi)過(guò)某小程序，然后在一定時(shí)間內(nèi)再次打開(kāi)該小程序，此時(shí)只需將后臺(tái)的小程序切換到前臺(tái)，這個(gè)過(guò)程就是熱啟動(dòng)；冷啟動(dòng)指的是用戶首次打開(kāi)或小程序被微信主動(dòng)銷毀后再次打開(kāi)的情況，此時(shí)小程序需要重新加載啟動(dòng)。小程序冷啟動(dòng)時(shí)如果發(fā)現(xiàn)新版本，客戶端將會(huì)異步下載新版本的代碼包，并同時(shí)用客戶端本地的包進(jìn)行啟動(dòng)，即新版本的小程序需要等待下一次冷啟動(dòng)才會(huì)應(yīng)用。對(duì)于運(yùn)行機(jī)制，需要注意的是，小程序沒(méi)有重啟的概念。另外，當(dāng)小程序進(jìn)入后臺(tái)時(shí)，客戶端會(huì)維持一段時(shí)間的運(yùn)行狀態(tài)，超過(guò)一定時(shí)間后（小程序會(huì)被微信主動(dòng)銷毀。當(dāng)短時(shí)間內(nèi)連續(xù)收到兩次以上系統(tǒng)內(nèi)存警告信息時(shí)，微信也會(huì)銷毀小程序。二、啟動(dòng)配置三、目錄結(jié)構(gòu)pages文件夾utils文件夾全局文件app.js全局文件app.json圖片編輯工具文件app.wxss一個(gè)小程序主體部分由3種文件組成，必須放在項(xiàng)目的根目錄另外，一個(gè)小程序頁(yè)面由4個(gè)文件組成邏輯層總體技術(shù)框架視圖層組件事件與行為數(shù)據(jù)緩存插件本章小結(jié)一、程序注冊(cè)（4）關(guān)閉：當(dāng)用戶從掃一掃、轉(zhuǎn)發(fā)等入口（場(chǎng)景值為1007,1008,1011,1025）進(jìn)入小程序，并在沒(méi)有置頂小程序的情況下退出，小程序會(huì)被銷毀，此功能公共庫(kù)版本1.1.0開(kāi)始支持。（3）銷毀：只有當(dāng)小程序進(jìn)入后臺(tái)一定時(shí)間，或者系統(tǒng)資源占用過(guò)高時(shí)，小程序才會(huì)被真正銷毀，此時(shí)代表小程序的生命周期結(jié)束。（1）在邏輯層，app方法用來(lái)注冊(cè)一個(gè)小程序。App方法接受一個(gè)object參數(shù)，用于指定小程序的生命周期函數(shù)等。app()方法有且僅有一個(gè)，存放于app.js中。（2）前臺(tái)、后臺(tái)：用戶在當(dāng)前界面運(yùn)行或操作小程序時(shí)為前臺(tái)；當(dāng)用戶單擊左上角關(guān)閉按鈕，或者按設(shè)備Home鍵離開(kāi)微信時(shí)，小程序并沒(méi)有被直接銷毀，而是進(jìn)入后臺(tái)；當(dāng)再次進(jìn)入微信或再次打開(kāi)小程序時(shí)，小程序又會(huì)從后臺(tái)進(jìn)入前臺(tái)。二、路由與場(chǎng)景值路由方式頁(yè)面棧AB頁(yè)面棧以棧（先進(jìn)后出）的形式維護(hù)頁(yè)面與頁(yè)面之間的關(guān)系。小程序提供了getCurrentPages()函數(shù)獲取頁(yè)面棧，第一個(gè)元素為首頁(yè)，最后一個(gè)元素為當(dāng)前頁(yè)面三、模塊化和API（1）js文件的模塊化：在每個(gè)js文件里定義的變量、函數(shù)，只在當(dāng)前的文件里有效（2）wxs文件的模塊化，<wxs>標(biāo)簽屬性如下：module：當(dāng)前<wxs>標(biāo)簽的模塊名，必填字段。src：引用wxs文件的相對(duì)路徑。（3）wxml文件模塊化。wxml提供了模板可以在模板中定義代碼片段，然后在不同的地方調(diào)用。API小程序提供了一個(gè)簡(jiǎn)單、高效的應(yīng)用開(kāi)發(fā)框架，豐富的組件和API，幫助開(kāi)發(fā)者在微信中開(kāi)發(fā)具有原生APP體驗(yàn)的服務(wù)。模塊化js、wxs、wxml這3類文件都可以模塊化視圖層總體技術(shù)框架邏輯層組件事件與行為數(shù)據(jù)緩存插件本章小結(jié)一、WXML條件渲染在小程序中，可以使用wx:if來(lái)設(shè)定渲染判斷條件。如果條件符合，則渲染某一部分內(nèi)容。使用這個(gè)函數(shù)，與其他語(yǔ)言中使用if函數(shù)來(lái)打印東西一樣。引用WXML提供兩種文件引用方式，分別是import和include。import可以在該文件中使用目標(biāo)文件定義的template。列表渲染先在相應(yīng)的js文件中，定義一個(gè)列表變量，然后在wxml文件中，使用wx:for來(lái)引用該列表變量。事件事件是視圖層到邏輯層的通信方式，它可以將用戶的行為反饋到邏輯層進(jìn)行處理。數(shù)據(jù)綁定數(shù)據(jù)綁定就是在視圖上規(guī)定動(dòng)態(tài)變量，并在js腳本中進(jìn)行定義。模板模板的意思是在WXML中，引用相同或類似的部分。二、WXSSWXSS是小程序的樣式語(yǔ)言，用于描述WXML的組件樣式。WXSS用來(lái)決定WXML的組件應(yīng)怎樣顯示，是純粹的樣式文件，該文件決定了字體的大小和背景顏色等。三、組件第1，2類基礎(chǔ)組件第1類是視圖容器（ViewContainer）第2類是基礎(chǔ)內(nèi)容（BasicContent）第3類至第7類基礎(chǔ)組件第3類至第7類分別是表單（Form）、導(dǎo)航（Navigation）、多媒體（Media）、地圖（Map）和畫(huà)布（Canvas）?？蚣転殚_(kāi)發(fā)者提供了一系列基礎(chǔ)組件，開(kāi)發(fā)者可以通過(guò)組合這些基礎(chǔ)組件進(jìn)行快速開(kāi)發(fā)。組件事件與行為數(shù)據(jù)緩存插件總體技術(shù)框架邏輯層視圖層本章小結(jié)一、開(kāi)發(fā)插件要開(kāi)發(fā)微信小程序插件，首先需要打開(kāi)開(kāi)發(fā)者工具，進(jìn)入小程序項(xiàng)目單擊小程序項(xiàng)目右下角的“創(chuàng)建”鏈接，就可以創(chuàng)建插件了。二、使用插件引入插件代碼包使用插件前，使用者要在app.json中聲明需要使用的插件在分包內(nèi)引入插件代碼包如果插件只在一個(gè)分包內(nèi)使用，可以將插件放在該分包內(nèi)使用插件使用插件時(shí)，插件的代碼對(duì)于使用者來(lái)說(shuō)是不可見(jiàn)的。為了正確使用插件，應(yīng)查看插件詳情頁(yè)面中的“開(kāi)發(fā)文檔”一節(jié)三、插件功能頁(yè)插件所有者小程序激活功能頁(yè)特性跳轉(zhuǎn)到功能頁(yè)插件功能頁(yè)是插件所有者小程序中的一個(gè)特殊頁(yè)面。插件所有者小程序，指的是與插件AppID相同的小程序要在插件中調(diào)用插件功能頁(yè)，需要先激活插件所有者小程序的功能頁(yè)特性。具體來(lái)說(shuō)，在插件所有者小程序的app.json文件中添加functionalPages定義字段，并令其值為true功能頁(yè)不能使用wx.navigateTo進(jìn)行跳轉(zhuǎn)，而是需要一個(gè)組件。以獲取用戶信息為例，可以在插件中放置如下的<functionalnavigator>組件 獲取用戶信息，包括openid和昵稱等（相當(dāng)于wx.login和wx.getUserInfo的功能），詳見(jiàn)用戶信息功能頁(yè)。 支付（相當(dāng)于wx.requestPayment），詳見(jiàn)支付功能頁(yè)。 獲取收貨地址（相當(dāng)于wx.chooseAddress），詳見(jiàn)收貨地址功能頁(yè)。本章小結(jié)總體技術(shù)框架邏輯層視圖層組件時(shí)間與行為數(shù)據(jù)緩存插件本章小結(jié)01本章小結(jié)本章從微信小程序的總體框架開(kāi)始，先介紹小程序的運(yùn)行機(jī)制，包括它的啟動(dòng)配置和目錄結(jié)構(gòu)，然后介紹邏輯層的程序注冊(cè)、路由與場(chǎng)景值、模塊化和API的相關(guān)知識(shí)點(diǎn)，又從小程序的標(biāo)簽語(yǔ)言WLML、樣式語(yǔ)言WXSS、組件等方面介紹了展示給用戶的視圖層，同時(shí)講解了如何開(kāi)發(fā)和使用小程序插件。THANKS《微信小程序開(kāi)發(fā)技術(shù)》（第1版）

第3章WXML標(biāo)簽語(yǔ)言

能力CAPACITY要求了解WXML標(biāo)簽語(yǔ)言的的概念。掌握數(shù)據(jù)綁定、頁(yè)面渲染的使用方法。掌握事件綁定和常用事件的使用方法。熟悉模板與引用的使用方法。數(shù)據(jù)綁定語(yǔ)法規(guī)范頁(yè)面渲染事件模板與引用一、語(yǔ)法規(guī)范

在小程序中，WXML用的標(biāo)簽名字與HTML有點(diǎn)不同。小程序WXML用的標(biāo)簽是view，button，text等，這些標(biāo)簽是小程序給開(kāi)發(fā)者包裝好的基本能力，另外，小程序還提供了地圖、視頻、音頻等組件的能力。一、語(yǔ)法規(guī)范從上面的WXML語(yǔ)法規(guī)則可以看出，它與HTML語(yǔ)言非常相似。下面用WXML語(yǔ)言編寫(xiě)一個(gè)簡(jiǎn)單的小程序。<!--index.wxml--><viewclass="container"><viewclass="userinfo"><buttonwx:if="{{!hasUserInfo&&canIUse}}"open-type="getUserInfo"bindgetuserinfo="getUserInfo">你的頭像昵稱</button><blockwx:else><imagebindtap="bindViewTap"class="userinfo-avatar"src="{{userInfo.avatarUrl}}"mode="cover"></image><textclass="userinfo-nickname">{{userInfo.nickName}}</text></block></view><viewclass="usermotto"><textclass="user-motto">{{motto}}</text></view></view>一、語(yǔ)法規(guī)范運(yùn)行結(jié)果如圖所示。WXML具有如下特點(diǎn)：WXML的單標(biāo)簽必需是“/>”結(jié)尾的，不然會(huì)報(bào)錯(cuò)。2.WXML的基礎(chǔ)標(biāo)簽<view>是塊標(biāo)簽，<text>是文本標(biāo)簽，但是使用其他標(biāo)簽，比如div，并且都是inline標(biāo)簽。3.?scroll-view（滾動(dòng)條）的scroll-top（垂直滾動(dòng)）和scroll-left（橫向滾動(dòng)）可以修改scroll-view的滾動(dòng)位置。4.input目前只支持文字居左，其他都是不行的（模擬器可以）。5.只有checkbox-group有change事件，單個(gè)的checkbox是沒(méi)有的，如果只有一個(gè)checkbox，外面套一個(gè)checkbox-group，可以用switchtype="checkbox"代替。6.map組建目前直接在app第一個(gè)頁(yè)面加載會(huì)出現(xiàn)加載失敗，這需要在onLoad之后再加載，可以先wx:if="false"，然后在onLoad之后改成true。7.map,canvas是在webview上面蓋一個(gè)native組件，它們沒(méi)法被overflow以及上面蓋元素，所以不建議在頁(yè)面上做彈層和蒙層。數(shù)據(jù)綁定語(yǔ)法規(guī)范頁(yè)面渲染事件模板與引用二、數(shù)據(jù)綁定WXML在小程序中擴(kuò)展名為*.wxml，主要有數(shù)據(jù)綁定、列表渲染、條件渲染、模板、事件、引用等功能。用戶界面呈現(xiàn)會(huì)因?yàn)闀r(shí)刻不同，數(shù)據(jù)發(fā)生變化而有所不同，也會(huì)因?yàn)橛脩舨僮靼l(fā)生了動(dòng)態(tài)改變，這就要求程序的運(yùn)行過(guò)程中，要有動(dòng)態(tài)的去改變渲染界面的能力，從而達(dá)到更好的用戶體驗(yàn)。WXML的數(shù)據(jù)均來(lái)自對(duì)應(yīng)Page的data，數(shù)據(jù)綁定使用Mustache語(yǔ)法（雙大括號(hào)）將變量包起來(lái)，它主要對(duì)三方面進(jìn)行綁定。二、數(shù)據(jù)綁定

1、文本內(nèi)容綁定在*.wxml文件里輸入如下代碼：<view>{{message}}</view>同時(shí)在*.js文件里輸入如下代碼：Page({data:{message:'HelloCHINA!'}})運(yùn)行結(jié)果如右圖所示。二、數(shù)據(jù)綁定2.組件屬性(需要在雙引號(hào)之內(nèi))在*.wxml文件里輸入如下代碼：<viewid="item-{{id}}"></view>同時(shí)在*.js文件里輸入如下代碼：Page({data:{id:0}})控制屬性(需要在雙引號(hào)之內(nèi))，如下：在*.wxml文件里輸入如下代碼：<viewwx:if="{{condition}}"></view><view

wx:if='{{!condition}}'

style='color:{{color}}'>//推薦雙引號(hào)，但是單引號(hào)也能用同時(shí)在*.js文件里輸入如下代碼：Page({data:{condition:true}})二、數(shù)據(jù)綁定3.2.2運(yùn)算綁定可以在{{}}內(nèi)進(jìn)行簡(jiǎn)單的運(yùn)算，支持的有如下幾種方式：1.三元運(yùn)算2.算數(shù)運(yùn)算3.邏輯判斷4.字符串運(yùn)算5.數(shù)據(jù)路徑運(yùn)算二、數(shù)據(jù)綁定3.2.3組合綁定1.數(shù)組<viewwx:for="{{[zero,1,2,3,4]}}">{{item}}</view>同時(shí)在*.js文件里輸入如下代碼：Page({data:{zero:0}})最終組合成數(shù)組[0,1,2,3,4]。2.對(duì)象<templateis="objectCombine"data="{{for:a,bar:b}}"></template>數(shù)據(jù)綁定語(yǔ)法規(guī)范頁(yè)面渲染事件模板與引用三、頁(yè)面渲染頁(yè)面渲染是瀏覽器的工作，它大致分為三步，一是加載，就是根據(jù)請(qǐng)求的URL進(jìn)行域名解析，向服務(wù)器發(fā)起請(qǐng)求，接收文件；二是解析，即對(duì)加載到的資源進(jìn)行語(yǔ)法解析，建議相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)；三是渲染，需要構(gòu)建渲染樹(shù)，對(duì)各個(gè)元素進(jìn)行位置計(jì)算、樣式計(jì)算等等，然后根據(jù)渲染樹(shù)對(duì)頁(yè)面進(jìn)行渲染。這幾個(gè)過(guò)程不是完全孤立的，會(huì)有交叉。三、頁(yè)面渲染3.3.1列表渲染列表渲染就是將一個(gè)數(shù)組內(nèi)的所有數(shù)據(jù)依次展示在界面上，它常用場(chǎng)景有文章列表和商品列表。比如，在組件的wx:for屬性上綁定一個(gè)數(shù)組，就可以使用數(shù)組中項(xiàng)目的值來(lái)重復(fù)渲染該組件，如下：在*.wxml文件里輸入如下代碼。<viewwx:for="{{forText}}"wx:key="index"><view>{{index}}{{item}}</view></view>同時(shí)在*.js文件里輸入如下代碼，Page({data:{forText:[1,2,3,4,5,6]}})三、頁(yè)面渲染3.3.2條件渲染在小程序的不同生命周期和不同的用戶操作情況下，可能需要為用戶展示和響應(yīng)不同的內(nèi)容，在這個(gè)時(shí)候，可以借助條件渲染來(lái)展示內(nèi)容。1.控制單個(gè)組件的顯示在組件上加入wx:if來(lái)控制組件的顯示和隱藏，如下：<viewwx:if="{{condition}}">123</view>當(dāng)wx:if對(duì)應(yīng)的值為true的時(shí)候，對(duì)應(yīng)組件會(huì)進(jìn)行渲染；當(dāng)wx:if對(duì)應(yīng)的值為false的時(shí)候，對(duì)應(yīng)的組件不會(huì)進(jìn)行渲染。三、頁(yè)面渲染2.else屬性需要注意幾點(diǎn)，一是wx:if進(jìn)行條件判斷的時(shí)候，使用wx:if來(lái)進(jìn)行初始的條件判斷，可單獨(dú)出現(xiàn)；二是對(duì)于wx:else，如果需要進(jìn)行多種條件判斷結(jié)果，使用wx:else來(lái)輔助進(jìn)行結(jié)果判斷；三是對(duì)于wx:elif，如果項(xiàng)目不止兩個(gè)判斷結(jié)果，使用wx:elif來(lái)輔助進(jìn)行結(jié)果的輸出。示例如下:<viewwx:if="{{length>5}}"></view><viewwx:elif="{{length>2}}"></view><viewwx:else></view>數(shù)據(jù)綁定語(yǔ)法規(guī)范頁(yè)面渲染事件模板與引用四、事件

事件是視圖層到邏輯層的通訊方式，它可以將用戶的行為反饋到邏輯層進(jìn)行處理。事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。事件對(duì)象可以攜帶額外信息，如id,dataset,touches。3.4.1事件分類微信小程序把事件總體上分為兩大類：一類是冒泡事件，另一類是非冒泡事件。四、事件3.4.2事件綁定事件綁定是小程序進(jìn)行交互的一個(gè)非常重要的環(huán)節(jié)，事件綁定的寫(xiě)法同組件的屬性，以key、value的形式。key以bind或catch開(kāi)頭，然后跟上事件的類型，如bindtap,catchtouchstart，value是一個(gè)字符串，需要在對(duì)應(yīng)的Page中定義同名的函數(shù)。不然當(dāng)觸發(fā)事件的時(shí)候會(huì)報(bào)錯(cuò)。

常用的事件綁定主要單擊、雙擊、長(zhǎng)按、滑動(dòng)、多點(diǎn)觸控等。數(shù)據(jù)綁定語(yǔ)法規(guī)范頁(yè)面渲染事件模板與引用五、模板與引用

微信小程序?yàn)榻鉀Q頁(yè)面里重復(fù)代碼的問(wèn)題，提供了模板機(jī)制（template），把一些可以復(fù)用的代碼放置在模板里進(jìn)行定義，定義后就可以在其他界面里調(diào)用，這樣就實(shí)現(xiàn)了代碼的復(fù)用。特別在項(xiàng)目應(yīng)用中多使用模板，，可以在模板中定義代碼片段，然后在不同的地方調(diào)用。3.5.1模板1.定義模板模板是以<template>開(kāi)始，以<template/>結(jié)束的一段代碼，一般新建一個(gè)wxml文件，在<template>中使用name屬性，作為模板的名字。然后在<template/>內(nèi)定義代碼片段，如：<templatename="msgItem"><view><text>{{index}}:{{msg}}</text><text>Time:{{time}}</text></view></template>五、模板與引用2.使用模板使用is屬性，聲明需要的使用的模板，然后將模板所需要的data傳入，如：<templateis="msgItem"data="{{...item}}"/>Page({data:{item:{index:0,msg:'thisisatemplate',time:'2016-09-15'}}})五、模板與引用3.5.2引用WXML提供兩種文件引用方式import和include。import可以引入目標(biāo)文件中的template，template以外的不會(huì)被引入，在當(dāng)前文件中使用該template，還保持獨(dú)立的template；include則是將目標(biāo)文件中的template代碼進(jìn)行整體引入，相當(dāng)于復(fù)制過(guò)來(lái)，沒(méi)有了獨(dú)立性。1．importimport引用可以在該文件中使用目標(biāo)文件定義的template，如：在item.wxml中定義了一個(gè)叫item的template：<templatename="item"><text>{{text}}</text></template>THANKS《微信小程序開(kāi)發(fā)技術(shù)》（第1版）

第4章WXSS樣式語(yǔ)言

能力CAPACITY要求了解WXSS樣式語(yǔ)言的的概念。了解WXSS的尺寸單位。掌握選擇器的使用方法。掌握樣式的使用方法。選擇器尺寸單位樣式使用一、尺寸單位

在WXSS中,引入了rpx(responsivepixel)尺寸單位，引用這種單位的目的是適配不同寬度的屏幕，使得開(kāi)發(fā)起來(lái)更簡(jiǎn)單。rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，規(guī)定屏幕寬為750rpx。如在iPhone6上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。對(duì)于不同型號(hào)的iPhone手機(jī)，rpx表現(xiàn)的自適應(yīng)如表4-1所示。設(shè)備rpx換算px(屏幕寬度/750)px換算rpx(750/屏幕寬度)iPhone51rpx=0.42px1px=2.34rpxiPhone61rpx=0.5px1px=2rpxiPhone6Plus1rpx=0.552px1px=1.81rpx表4-1rpx表現(xiàn)的自適應(yīng)一、尺寸單位4.1.1物理像素

一個(gè)物理像素是顯示器(手機(jī)屏幕)上最小的物理顯示單元，在操作系統(tǒng)的調(diào)度下，每一個(gè)設(shè)備像素都有自己的顏色值和亮度值。設(shè)備獨(dú)立像素(也稱密度無(wú)關(guān)像素)，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中的一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(比如css像素)，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。因此，物理像素和設(shè)備獨(dú)立像素之間存在著一定的對(duì)應(yīng)關(guān)系，這就是設(shè)備像素比。

設(shè)備像素比(devicepixelratio，dpr)定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系，它的值可以按如下的公式的得到：設(shè)備像素比=物理像素/設(shè)備獨(dú)立像素//在某一方向上，x方向或者y方向一、尺寸單位4.1.2邏輯像素

像素表示圖像元素的意思。一個(gè)像素只能表達(dá)一個(gè)色塊，是顯示的最小的一個(gè)單元。可以把像素分為以下兩種：物理像素Physicalpixels邏輯像素Logicalpixels

其中物理像素也被稱為設(shè)備像素，即設(shè)備在出廠的時(shí)候就已經(jīng)固定了像素。而邏輯像素在CSS中也被稱為CSS像素(CSSpixels)，是為Web開(kāi)發(fā)者創(chuàng)造的，在CSS和JavaScript中使用的一個(gè)抽象的層，每一個(gè)CSS聲明和幾乎所有的JavaScript屬性都使用CSS像素。例如平時(shí)使用Chrome的設(shè)備調(diào)試工具的時(shí)候，iPhone6是高<code>667px</code>，寬是<code>375px</code>，

與蘋果官方的</code>1334pxx750px</code>，長(zhǎng)寬分別少了2倍，那么面積就少了4倍，這就是經(jīng)常說(shuō)的Retina屏幕用四個(gè)(物理)像素表示一個(gè)(邏輯)像素。一、尺寸單位4.1.3像素比這里的像素比表示為設(shè)備像素比（dpr）。在早先的移動(dòng)設(shè)備中，并沒(méi)有dpr的概念，隨著技術(shù)的發(fā)展，移動(dòng)設(shè)備的屏幕像素密度越來(lái)越高。比如iPhone4的分辨率比之前的iPhone版本提高了一倍，但屏幕尺寸卻沒(méi)有變化，這意味著同樣大小的屏幕上，像素多了一倍，于是dpr=2。在Chrome瀏覽器可以通過(guò)以下代碼獲取設(shè)備的dpr：letdpr=window.devicePixelRatio;而通過(guò)下面的代碼可以獲取設(shè)備的邏輯像素：letlogicalHeight=screen.height;letlogicalWidth=screen.width;選擇器尺寸單位樣式使用二、選擇器屬性類型默認(rèn)值必填說(shuō)明最低版本modestringselector否選擇器類型1.0.0disabledbooleanfalse否是否禁用1.0.0bindcanceleventhandle

否取消選擇時(shí)觸發(fā)1.9.90對(duì)于選擇器，通過(guò)mode區(qū)分，微信官方給出了五種選擇器，分別為普通選擇器，多列選擇器（multiSelector），時(shí)間選擇器（time），日期選擇器（date），省市區(qū)選擇器（region），默認(rèn)是普通選擇器。主要屬性如表4-2所示。表4-2選擇器的主要屬性二、選擇器4.2.1類選擇器除了微信官方給出了五種選擇器，還有類選擇器，它的語(yǔ)法如下。在CSS中，類選擇器以一個(gè)點(diǎn)號(hào)顯示，如下。.center{text-align:center}在上面的例子中，所有擁有center類的HTML元素均為居中。在下面的HTML代碼中，h1和p元素都有center類，這意味著兩者都將遵守“.center”選擇器中的規(guī)則。<h1class="center">Thisheadingwillbecenter-aligned</h1><pclass="center">Thisparagraphwillalsobecenter-aligned.</p>注意：類名的第一個(gè)字符不能使用數(shù)字。二、選擇器4.2.2ID選擇器ID選擇器可以為標(biāo)有特定id的HTML元素指定特定的樣式，以“#”來(lái)定義。下面設(shè)定兩個(gè)ID選擇器，第一個(gè)定義元素的顏色為紅色，第二個(gè)定義元素的顏色為綠色，如下：#red{color:red;}#green{color:green;}下面的HTML代碼中，id屬性為red的p元素顯示為紅色，而id屬性為green的p元素顯示為綠色。<pid="red">這個(gè)段落是紅色。</p><pid="green">這個(gè)段落是綠色。</p>注意：id屬性只能在每個(gè)HTML文檔中出現(xiàn)一次。二、選擇器4.2.3組合選擇器

組合選擇器組合使用不同的選擇器，可以匹配更特定的元素。它通過(guò)已有選擇器的標(biāo)簽，給其他標(biāo)簽添加css樣式效果。組合選擇器包括父子選擇器與兄弟選擇器。1.父子選擇器父子選擇器通過(guò)已有選擇器的父級(jí)標(biāo)簽，給嵌套其中的子級(jí)或者后代標(biāo)簽，指定css樣式效果，它包括父子選擇器與后代選擇器。2.兄弟選擇器

兄弟選擇器包括相鄰兄弟選擇器和一般兄弟選擇器。相鄰兄弟選擇器是給已有選擇器標(biāo)簽之后相鄰的一個(gè)平級(jí)標(biāo)簽添加樣式，選擇器通過(guò)“+”添加樣式對(duì)。選擇器尺寸單位樣式使用三、樣式使用WXSS提供了全局的樣式和局部樣式。可以用一個(gè)app.wxss作為全局樣式，會(huì)作用于當(dāng)前小程序的所有頁(yè)面，局部頁(yè)面樣式page.wxss僅對(duì)當(dāng)前頁(yè)面生效4.3.1樣式導(dǎo)入使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用“;”表示語(yǔ)句結(jié)束，示例代碼如下：[css]viewplaincopy/**common.wxss**/.small-p{padding:5px;}[css]viewplaincopy/**app.wxss**/@import"common.wxss";.middle-p{padding:15px;}三、樣式使用4.3.2內(nèi)聯(lián)樣式、

在內(nèi)聯(lián)樣式中，框架組件支持使用style、class屬性來(lái)控制組件的樣式。對(duì)于style，靜態(tài)的樣式統(tǒng)一寫(xiě)到class中。style接收動(dòng)態(tài)的樣式，在運(yùn)行時(shí)會(huì)進(jìn)行解析，盡量避免將靜態(tài)的樣式寫(xiě)進(jìn)style中，以免影響渲染速度。代碼示例如下：<!--index.wxml--><viewstyle="width:500rpx;height:30rpx;background-color:{{colorValue}};">hello,world!</view>

對(duì)于class，用于指定樣式規(guī)則，其屬性值是樣式規(guī)則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上，樣式類名之間用空格分隔。THANKS《微信小程序開(kāi)發(fā)技術(shù)》（第1版）

第5章JavaScript交互邏輯

能力CAPACITY要求了解JavaScript的概念。掌握J(rèn)avaScript語(yǔ)法、面向?qū)ο笤O(shè)計(jì)。掌握J(rèn)SON語(yǔ)法結(jié)構(gòu)。面向?qū)ο笤O(shè)計(jì)模塊規(guī)范JSON介紹JavaScript基礎(chǔ)一、JavaScript基礎(chǔ)JavaScript基礎(chǔ)：

JavaScript（簡(jiǎn)稱JS）是一門完備的動(dòng)態(tài)編程語(yǔ)言，當(dāng)應(yīng)用于HTML文檔時(shí)，其可為網(wǎng)站提供動(dòng)態(tài)交互特性。JavaScript的應(yīng)用場(chǎng)合極其廣泛，從簡(jiǎn)單的幻燈片、照片庫(kù)、浮動(dòng)布局和響應(yīng)按鈕單擊，到復(fù)雜的游戲、2D和3D動(dòng)畫(huà)、大型數(shù)據(jù)庫(kù)驅(qū)動(dòng)程序等。一、JavaScript基礎(chǔ)基本語(yǔ)法1.輸出3.標(biāo)識(shí)符5.空格7.保留字9.變量8.注釋6.代碼換行4.大小寫(xiě)敏感2.分號(hào)10.運(yùn)算符一、JavaScript基礎(chǔ)控制結(jié)構(gòu)順序結(jié)構(gòu)條件選擇結(jié)構(gòu)循環(huán)結(jié)構(gòu)其他語(yǔ)句控制結(jié)構(gòu)面向?qū)ο笤O(shè)計(jì)模塊規(guī)范JSON介紹JavaScript基礎(chǔ)二、模塊規(guī)范模塊規(guī)范：為了解決，作用域，變量沖突，代碼組織的問(wèn)題，早期是沒(méi)有模塊化，隨著前端日益復(fù)雜，代碼組織越來(lái)越困難，出現(xiàn)了一系列模塊化規(guī)范，目前JavaScript通用的模塊化規(guī)范主要有CommonJS、AMD、UMD、CMD和ES6等。二、模塊規(guī)范模塊規(guī)范CommonJSAMDUMDCMDES6模塊規(guī)范二、模塊規(guī)范CommonJS規(guī)范CommonJS主要用于服務(wù)端的模塊化規(guī)范，可以說(shuō)Node.js是它的最佳實(shí)踐?？聪旅嬉粋€(gè)例子。二、模塊規(guī)范AMD規(guī)范上面的CommonJS規(guī)范不適合瀏覽器端的模塊化開(kāi)發(fā)，因?yàn)槭褂肅ommonJS請(qǐng)求模塊是一個(gè)同步的過(guò)程，如果瀏覽器用CommonJS規(guī)范去開(kāi)發(fā)很可能會(huì)出現(xiàn)阻塞情況或假死情況，為解決這種情況，出現(xiàn)了AMD規(guī)范。由于不是原生JS所支持的規(guī)范，AMD規(guī)范需要用到RequireJS庫(kù)。二、模塊規(guī)范UMD規(guī)范既然CommonJs和AMD規(guī)范一樣流行，那么似乎缺少一個(gè)統(tǒng)一的規(guī)范，所以人們產(chǎn)生了這樣的需求，希望有支持兩種規(guī)范的“通用”模式，于是通用模塊（UMD）規(guī)范誕生了。UMD是AMD和CommonJS的糅合，它的實(shí)現(xiàn)很簡(jiǎn)單：先判斷是否支持NodeJS模塊格式（exports是否存在），支持則使用NodeJS模塊格式；再判斷是否支持AMD（define是否存在），支持則使用AMD方式加載模塊。二、模塊規(guī)范CMD規(guī)范CMD典型的應(yīng)用就是Sea.js。Sea.js與RequireJS在實(shí)現(xiàn)上是差不多的，但是還是有一些區(qū)別，主要是在定義方式上和模塊的執(zhí)行時(shí)機(jī)上。定義模塊：define(function(require,exports,module){})可以看到，Sea.js在定義模塊的時(shí)候，并不會(huì)像RequireJS那樣依賴前置，而是根據(jù)就近依賴的原則，需要的時(shí)候再去引入。Sea.js主要是對(duì)模塊先加載不執(zhí)行，等遇到require的時(shí)候才會(huì)去執(zhí)行模塊。二、模塊規(guī)范ES6規(guī)范ES6模塊結(jié)合了CommonJS和AMD的優(yōu)點(diǎn)，其類似CommonJS，具有簡(jiǎn)潔的語(yǔ)法，支持對(duì)模塊循環(huán)引用；也類似AMD，支持異步加載和有條件的模塊加載。ES6模塊的設(shè)計(jì)思想是盡量靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。CommonJS和AMD模塊，都只能在運(yùn)行時(shí)確定這些內(nèi)容。例如，CommonJS模塊就是對(duì)象，輸入時(shí)必須查找對(duì)象屬性。面向?qū)ο笤O(shè)計(jì)模塊規(guī)范JSON介紹JavaScript基礎(chǔ)三、面向?qū)ο笤O(shè)計(jì)對(duì)象JaveScript雖然支持面向?qū)ο蟮木幊谭椒ǎ切枰ㄟ^(guò)一定的技巧才能勉強(qiáng)實(shí)現(xiàn)面向?qū)ο笳Z(yǔ)言的特性。它與其他強(qiáng)類型的面向?qū)ο笳Z(yǔ)言（如Java、C#），甚至弱類型的腳本語(yǔ)言（如Python）相比，其面向?qū)ο蟮奶匦钥梢杂米浇笠?jiàn)肘來(lái)形容。三、面向?qū)ο笤O(shè)計(jì)創(chuàng)建對(duì)象工廠模式構(gòu)造函數(shù)模式原型模式原型構(gòu)造組合動(dòng)態(tài)原型模式寄生構(gòu)造模式穩(wěn)妥構(gòu)造模式三、面向?qū)ο笤O(shè)計(jì)工廠模式工廠模式就是把實(shí)現(xiàn)同一件事情的相同的代碼放到一個(gè)函數(shù)中，以后如果再想實(shí)現(xiàn)這個(gè)功能，不需要重新編寫(xiě)這些代碼，只需要執(zhí)行當(dāng)前的函數(shù)即可，即函數(shù)的封裝。函數(shù)封裝的好處是“低耦合高內(nèi)聚”，即減少頁(yè)面中的冗余代碼，提高代碼的重復(fù)利用率。三、面向?qū)ο笤O(shè)計(jì)構(gòu)造函數(shù)模式使用工廠模式創(chuàng)建的對(duì)象，使用的構(gòu)造函數(shù)都是Object，所創(chuàng)建的對(duì)象都是Object類型，這樣導(dǎo)致無(wú)法區(qū)分出多種不同類型的對(duì)象。為解決這個(gè)問(wèn)題，需要采用構(gòu)造函數(shù)模式，構(gòu)造函數(shù)模式的目的就是創(chuàng)建一個(gè)自定義類，并且創(chuàng)建這個(gè)類的實(shí)例。構(gòu)造函數(shù)模式中擁有類和實(shí)例的概念，并且實(shí)例和實(shí)例之間是相互獨(dú)立的。三、面向?qū)ο笤O(shè)計(jì)原型模式當(dāng)創(chuàng)建一個(gè)函數(shù)時(shí)，解析器會(huì)向函數(shù)添加一個(gè)屬性prototype，這個(gè)屬性對(duì)應(yīng)著一個(gè)對(duì)象，這個(gè)對(duì)象就是所謂的原型對(duì)象。如果函數(shù)作為普通函數(shù)調(diào)用prototype，則沒(méi)有任何作用。當(dāng)函數(shù)以構(gòu)造函數(shù)的形式調(diào)用時(shí)，它所創(chuàng)建的對(duì)象中會(huì)有一個(gè)隱含的屬性，指向該構(gòu)造函數(shù)的原型對(duì)象，這里可以通過(guò)__proto__來(lái)訪問(wèn)該屬性。三、面向?qū)ο笤O(shè)計(jì)組合使用構(gòu)造函數(shù)模式和原型模式這是使用最為廣泛、認(rèn)同度最高的一種創(chuàng)建自定義類型的方法。這種方法可以避免上面那些模式的缺點(diǎn)，同時(shí)使用此模式可以讓每個(gè)實(shí)例都會(huì)有自己的一份實(shí)例屬性副本，但又共享著對(duì)方法的引用，這樣，即使實(shí)例屬性修改引用類型的值，也不會(huì)影響其他實(shí)例的屬性值了。三、面向?qū)ο笤O(shè)計(jì)動(dòng)態(tài)原型模式動(dòng)態(tài)原型模式將所有信息都封裝在了構(gòu)造函數(shù)中，通過(guò)在構(gòu)造函數(shù)中初始化原型（僅在必要的情況下），保持了同時(shí)使用構(gòu)造函數(shù)和原型的優(yōu)點(diǎn)。換句話說(shuō)，可以通過(guò)檢查某個(gè)應(yīng)該存在的方法是否有效，來(lái)決定是否需要初始化原型。三、面向?qū)ο笤O(shè)計(jì)寄生構(gòu)造函數(shù)模式這種模式的基本思想就是創(chuàng)建一個(gè)函數(shù)，該函數(shù)的作用僅僅是封裝創(chuàng)建對(duì)象的代碼，然后再返回新建的對(duì)象。除了使用new操作符并把使用的包裝函數(shù)叫做構(gòu)造函數(shù)之外，和工廠模式幾乎一樣。三、面向?qū)ο笤O(shè)計(jì)穩(wěn)妥構(gòu)造函數(shù)模式首先明白穩(wěn)妥對(duì)象指的是沒(méi)有公共屬性，而且其方法也不引用this。穩(wěn)妥對(duì)象最適合在一些安全環(huán)境中（這些環(huán)境會(huì)禁止使用this和new），或防止數(shù)據(jù)被其他應(yīng)用程序改動(dòng)時(shí)使用。面向?qū)ο笤O(shè)計(jì)模塊規(guī)范JSON介紹JavaScript基礎(chǔ)四、JSON介紹JSON：

JSON語(yǔ)法是JavaScript對(duì)象表示語(yǔ)法的子集，它的語(yǔ)法規(guī)則如下。數(shù)據(jù)在名稱/值對(duì)中。數(shù)據(jù)由逗號(hào)分隔。大括號(hào)保存對(duì)象。中括號(hào)保存數(shù)組。四、JSON介紹JSON：

1．JSON名稱/值對(duì)JSON數(shù)據(jù)的書(shū)寫(xiě)格式是：名稱/值對(duì)。名稱/值對(duì)包括字段名稱（在雙引號(hào)中），后面寫(xiě)一個(gè)冒號(hào)，然后是值。

"name":"JSON教程"這很容易理解，等價(jià)于這條JavaScript語(yǔ)句。name="JSON教程"四、JSON介紹JSON：

2．JSON值JSON值的類型如下。 數(shù)字（整數(shù)或浮點(diǎn)數(shù)）。 字符串（在雙引號(hào)中）。 邏輯值（true或false）。 數(shù)組（在中括號(hào)中）。 對(duì)象（在大括號(hào)中）。四、JSON介紹JSON：

3．JSON數(shù)字JSON數(shù)字可以是整型或者浮點(diǎn)型，示例如下。{"age":30}四、JSON介紹JSON：

4．JSON對(duì)象JSON對(duì)象在花括號(hào)“{}”中書(shū)寫(xiě)，對(duì)象可以包含多個(gè)名稱/值對(duì)。{"name":"JSON教程","url":""}這一點(diǎn)也容易理解，與這條JavaScript語(yǔ)句等價(jià)。name="JSON教程"url=""四、JSON介紹JSON：

5．JSON數(shù)組JSON數(shù)組在中括號(hào)中書(shū)寫(xiě)，可包含多個(gè)對(duì)象。{"sites":[{"name":"JSON教程","url":""},{"name":"google","url":""},{"name":"微博","url":""}]}在上面的例子中，對(duì)象"sites"是包含三個(gè)對(duì)象的數(shù)組。每個(gè)對(duì)象代表一條關(guān)于某個(gè)網(wǎng)站（name、url）的記錄。四、JSON介紹JSON：

6．JSON布爾值JSON布爾值可以是true或者false，示例如下。{"flag":true}四、JSON介紹JSON：

7．JSONnullJSON可以設(shè)置null值，示例如下。{"runoob":null}四、JSON介紹JSON：

8．JSON使用JavaScript語(yǔ)法因?yàn)镴SON使用JavaScript語(yǔ)法，所以無(wú)需額外的軟件就能處理JavaScript中的JSON。通過(guò)JavaScript，可以創(chuàng)建一個(gè)對(duì)象數(shù)組，并像這樣進(jìn)行賦值。varsites=[{"name":"json","url":""},{"name":"google","url":""},{"name":"微博","url":""}];四、JSON介紹JSON讀?。?/p>

JSON是JS的一個(gè)子集，所以可以在JS中輕松地讀寫(xiě)JSON。讀和寫(xiě)JSON都有兩種方法，分別是利用“.”操作符和“[key]”的方式。四、JSON介紹JSON創(chuàng)建：

JSON作為一種簡(jiǎn)單的數(shù)據(jù)格式，比XML更輕巧。它是JavaScript原生格式，這意味著在JavaScript中處理JSON數(shù)據(jù)不需要任何特殊的API或工具包。JSON的對(duì)象是一個(gè)無(wú)序的“名稱/值”集合。一個(gè)對(duì)象以“{”（左括號(hào)）開(kāi)始，“}”（右括號(hào)）結(jié)束。每個(gè)“名稱”后跟一個(gè)“:”（冒號(hào)），“‘名稱/值”之間使用“,”（逗號(hào)）分隔。四、JSON介紹JSON創(chuàng)建：

規(guī)則如下。（1）映射用冒號(hào)“：”表示。格式為“名稱:值”。（2）并列的數(shù)據(jù)之間用逗號(hào)“，”分隔。格式為“名稱1:值1,名稱2:值2”。（3）映射的集合（對(duì)象）用大括號(hào)“{}”表示。格式為“{名稱1:值1,名稱2:值2}”。（4）并列數(shù)據(jù)的集合（數(shù)組）用方括號(hào)“[]”表示。THANKS《微信小程序開(kāi)發(fā)技術(shù)》（第1版）

第6章小程序組件

能力CAPACITY要求了解小程序組件的分類。掌握視圖容器、表單組件、導(dǎo)航組件的使用。掌握媒體組件、自定義組件的使用。媒體組件表單組件自定義組件視圖容器基礎(chǔ)內(nèi)容導(dǎo)航組件地圖與畫(huà)布一、視圖容器視圖容器ViewScroll-viewSwiper一、視圖容器Viewview是小程序最常用最基礎(chǔ)的視圖容器，有多個(gè)屬性，如下所述。（1）hover是否啟用點(diǎn)擊態(tài)，默認(rèn)是false。（2）hover-class：指定按下去的樣式類，默認(rèn)值是none。（3）hover-start-time:按住后多久出現(xiàn)點(diǎn)擊態(tài)，單位為ms。（4）hover-stay-time：手指松開(kāi)后點(diǎn)擊態(tài)保留時(shí)間，單位為ms。一、視圖容器Scroll-viewscroll-view是可滾動(dòng)視圖區(qū)域，就是一個(gè)大的可滾動(dòng)的布局里面可以包裹小布局，如下所述。（1）scroll-x：是否允許橫向滾動(dòng)，默認(rèn)是false。設(shè)置代碼如下。<scroll-viewscroll-x={{false}}>（2）scroll-y：是否允許縱向滾動(dòng)。其他方面跟scroll-x一樣。（3）upper-threshold：距頂部/左邊多遠(yuǎn)時(shí)（單位px），觸發(fā)scrolltoupper事件。一、視圖容器Swiperswiper是滑動(dòng)組件容器，控制著一組輪播圖。在這個(gè)容器里需要存放的是它的組件，也就是swiper-item。swiper-item的高度默認(rèn)為swiper的100%，因此想要改變顯示的圖片的大小需要在swiper中修改。媒體組件表單組件自定義組件視圖容器基礎(chǔ)內(nèi)容導(dǎo)航組件地圖與畫(huà)布二、基礎(chǔ)內(nèi)容基礎(chǔ)內(nèi)容圖標(biāo)組件文本組件富文本組件進(jìn)度條二、基礎(chǔ)內(nèi)容圖標(biāo)組件圖標(biāo)組件icon是小程序提供的圖標(biāo)組件。借助icon組件，可以以更低的資源占用展示更加豐富的內(nèi)容屬性名類型默認(rèn)值說(shuō)明typeString

icon類型有效值：success/success_no_circle/info/warn/waiting/cancel/download/search/clearsizeNumber23icon的大小，單位pxcolorColor

icon的顏色，同css的color二、基礎(chǔ)內(nèi)容文本組件文本組件text是小程序最基礎(chǔ)的組件之一，借助text的組件，可以在頁(yè)面展示文字。text文本組件支持\n來(lái)?yè)Q行。屬性名類型默認(rèn)值說(shuō)明selectableBooleanfalse文本是否可選spaceStringfalse顯示連續(xù)空格decodeBooleanfalse是否解碼二、基礎(chǔ)內(nèi)容富文本組件富文本組件rich-text是小程序提供，能夠在小程序中渲染出富文本字符串。二、基礎(chǔ)內(nèi)容進(jìn)度條進(jìn)度條組件Progress是小程序提供的，能夠?qū)崿F(xiàn)小程序動(dòng)態(tài)加載。媒體組件表單組件自定義組件視圖容器基礎(chǔ)內(nèi)容導(dǎo)航組件地圖與畫(huà)布三、表單組件表單組件按鈕組件選擇器組件滾動(dòng)選擇器輸入框標(biāo)簽組件三、表單組件按鈕組件按鈕組件的屬性可參考微信官方文檔中的小程序組件部分。三、表單組件選擇器組件選擇器組件checkbox與HTML中的checkbox標(biāo)簽是一樣的，都是多選框，每個(gè)checkbox-group都可以放多個(gè)checkbox。三、表單組件滾動(dòng)選擇器組件滾動(dòng)選擇器支持5種選擇器，通過(guò)mode來(lái)區(qū)分： 普通選擇器mode=selector（默認(rèn)為普通） 多列選擇器mode=multiSelector 時(shí)間選擇器mode=time； 日期選擇器mode=date； 省市區(qū)選擇器mode=region三、表單組件輸入框小程序的輸入框主要有單行輸入框input和多行輸入框textarea，這兩個(gè)控件雖然看著比較簡(jiǎn)單，但使用時(shí)很容易出現(xiàn)各種問(wèn)題，如輸入時(shí)光標(biāo)跳轉(zhuǎn)等，需要注意如何避免這些問(wèn)題。三、表單組件標(biāo)簽組件MinUI是基于微信小程序自定義組件特性開(kāi)發(fā)而成的一套簡(jiǎn)潔、易用、高效的組件庫(kù)，適用場(chǎng)景廣，覆蓋小程序原生框架、各種小程序組件主流框架等，并且提供了高效的命令行工具。MinUI組件庫(kù)包含很多基礎(chǔ)的組件，其中l(wèi)abel標(biāo)簽組件是一個(gè)很常用的基礎(chǔ)元件。媒體組件表單組件自定義組件視圖容器基礎(chǔ)內(nèi)容導(dǎo)航組件地圖與畫(huà)布四、導(dǎo)航組件導(dǎo)航組件頁(yè)面導(dǎo)航自定義導(dǎo)航四、導(dǎo)航組件頁(yè)面導(dǎo)航導(dǎo)航頁(yè)面鏈接組件是用在wxml頁(yè)面中通過(guò)url鏈接跳轉(zhuǎn)的導(dǎo)航組件，它有3種類型。第一種是保留當(dāng)前頁(yè)面跳轉(zhuǎn)，跳轉(zhuǎn)后可以返回當(dāng)前頁(yè)，它與wx.navigatorTo跳轉(zhuǎn)效果是一樣的；第二種是關(guān)閉當(dāng)前頁(yè)跳轉(zhuǎn)，無(wú)法返回當(dāng)前頁(yè)，它與wx.reditrctTo跳轉(zhuǎn)效果一樣；第三種是跳轉(zhuǎn)到底部標(biāo)簽導(dǎo)航的指定頁(yè)面，它與wx.switchTab跳轉(zhuǎn)效果一樣。四、導(dǎo)航組件自定義導(dǎo)航開(kāi)發(fā)者可以將頁(yè)面內(nèi)的功能模塊抽象成自定義組件，以便在不同的頁(yè)面中重復(fù)使用；也可以將復(fù)雜的頁(yè)面拆分成多個(gè)低耦合的模塊，有助于代碼維護(hù)。自定義組件在使用時(shí)與基礎(chǔ)組件非常相似。媒體組件表單組件自定義組件視圖容器基礎(chǔ)內(nèi)容導(dǎo)航組件地圖與畫(huà)布五、媒體組件媒體組件圖片組件音頻組件視頻組件五、媒體組件圖片組件圖片組件Image是程序不可缺少的組件，可以這樣說(shuō)，一個(gè)app中image組件隨處可以看到，一般image有兩種加載方式，第一種是網(wǎng)絡(luò)圖片，第二種是本地圖片資源，都用src屬性去指定。五、媒體組件音頻組件audio是微信小程序中的音頻組件，可以輕松實(shí)現(xiàn)小程序中播放/停止音頻等自定義動(dòng)作，它的相關(guān)屬性說(shuō)明見(jiàn)微信官方文檔的小程序媒體組件部分。五、媒體組件視頻組件視頻組件video控件是微信小程序提供的系統(tǒng)組件之一，用于實(shí)現(xiàn)播放視頻的功能。它的相關(guān)屬性見(jiàn)微信官方文檔的小程序媒體組件部分。另外，它的標(biāo)簽寬度為300px、高度為225px，設(shè)置寬高需要通過(guò)wxss設(shè)置width和height。媒體組件表單組件自定義組件視圖容器基礎(chǔ)內(nèi)容導(dǎo)航組件地圖與畫(huà)布六、地圖與畫(huà)布地圖畫(huà)布地圖組件畫(huà)布組件六、地圖與畫(huà)布地圖組件小程序內(nèi)地圖組件可通過(guò)layer-style（地圖官網(wǎng)設(shè)置的樣式style編號(hào)）屬性選擇不同的底圖風(fēng)格。組件屬性的長(zhǎng)度單位默認(rèn)為px，2.4.0起支持傳入單位（rpx/px）。另外，屬性具體說(shuō)明可參考微信官方文檔的小程序地圖組件部分。六、地圖與畫(huà)布畫(huà)布組件畫(huà)布組件canvas標(biāo)簽?zāi)J(rèn)寬度為300px、高度為150px。另外，同一頁(yè)面中的canvas-id不可重復(fù)，如果使用一個(gè)已經(jīng)出現(xiàn)過(guò)的canvas-id，則該canvas標(biāo)簽對(duì)應(yīng)的畫(huà)布將被隱藏并不再正常工作。要注意原生組件使用限制，使用限制可參考微信官方文檔的小程序畫(huà)布組件部分。媒體組件表單組件自定義組件視圖容器基礎(chǔ)內(nèi)容導(dǎo)航組件地圖與畫(huà)布七、自定義組件自定義組件組件模板與樣式Component構(gòu)造器組件事件與行為組件間關(guān)系抽象節(jié)點(diǎn)七、自定義組件組件模板：組件模板的寫(xiě)法與頁(yè)面模板相同，它與組件數(shù)據(jù)結(jié)合后生成的節(jié)點(diǎn)樹(shù)，將被插入到組件的引用位置上。在組件模板中自定義組件可以提供一個(gè)<slot>節(jié)點(diǎn)，用于承載組件引用時(shí)自定義組件提供的子節(jié)點(diǎn)。七、自定義組件組件樣式：需要注意以下幾點(diǎn)。（1）組件和引用組件的頁(yè)面不能使用id選擇器（#a）、屬性選擇器（[a]）和標(biāo)簽名選擇器，請(qǐng)改用class選擇器。（2）組件和引用組件的頁(yè)面使用后代選擇器（.a.b），在一些極端情況下會(huì)有非預(yù)期的表現(xiàn)，請(qǐng)避免使用后代選擇器。（3）子元素選擇器（.a>.b）只能用于view組件與其子節(jié)點(diǎn)之間，用于其他組件可能導(dǎo)致非預(yù)期的情況。（4）繼承樣式，如font、color，會(huì)從組件外繼承到組件內(nèi)。（5）除繼承樣式外，app.wxss中的樣式、組件所在頁(yè)面的樣式對(duì)自定義組件無(wú)效（除非更改組件樣式隔離選項(xiàng)）。七、自定義組件Component構(gòu)造器Component構(gòu)造器可用于定義組件，調(diào)用Component構(gòu)造器時(shí)可以指定組件的屬性、數(shù)據(jù)、方法等。詳細(xì)的參數(shù)含義和使用請(qǐng)參考Component參考文檔。事實(shí)上，小程序的頁(yè)面也可以視為自定義組件，因而，頁(yè)面也可以使用Component構(gòu)造器構(gòu)造，擁有與普通組件一樣的定義段與實(shí)例方法。但此時(shí)要求對(duì)應(yīng)json文件中包含usingComponents定義段。七、自定義組件組件事件與行為什么是事件。（1）事件是視圖層到邏輯層的通信方式。（2）事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。（3）事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。（4）事件對(duì)象可以攜帶額外信息，如id、dataset、touches。七、自定義組件組件間關(guān)系這個(gè)例子中，custom-ul和custom-li都是自定義組件，這些組件有父子關(guān)系，相互間的通信往往比較復(fù)雜。此時(shí)在組件定義時(shí)加入relations定義，可以解決這樣的問(wèn)題七、自定義組件抽象節(jié)點(diǎn)自定義組件模板中的一些節(jié)點(diǎn)，其對(duì)應(yīng)的自定義組件不是由自定義組件本身確定的，而是自定義組件的調(diào)用者確定的。這時(shí)可以把這個(gè)節(jié)點(diǎn)聲明為“抽象節(jié)點(diǎn)”。THANKS《微信小程序開(kāi)發(fā)技術(shù)》（第1版）

第7章小程序API

能力CAPACITY要求了解小程序API的分類。掌握小程序API的使用方法。理解小程序API參數(shù)的使用。位置API文件API界面API網(wǎng)絡(luò)API媒體API數(shù)據(jù)API設(shè)備API開(kāi)放API一、網(wǎng)絡(luò)API網(wǎng)絡(luò)API發(fā)起請(qǐng)求上傳與下載WebSocket一、網(wǎng)絡(luò)API發(fā)起請(qǐng)求發(fā)起請(qǐng)求API方法為wx.request(Objectobject)，在微信小程序中可以通過(guò)此API方法發(fā)起HTTPS網(wǎng)絡(luò)請(qǐng)求，需要注意的是同時(shí)只能有5個(gè)網(wǎng)絡(luò)請(qǐng)求連接。屬性類型默認(rèn)值必填說(shuō)明urlstring

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

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

否設(shè)置請(qǐng)求的header，header中不能設(shè)置Referer。content-type默認(rèn)為application/json一、網(wǎng)絡(luò)API上傳下載下載文件資源到本地?？蛻舳酥苯影l(fā)起一個(gè)HTTPSGET請(qǐng)求，返回文件的本地臨時(shí)路徑(本地路徑)，單次下載允許的最大文件為200MB。一、網(wǎng)絡(luò)API上傳下載將本地資源上傳到服務(wù)器。客戶端發(fā)起一個(gè)HTTPSPOST請(qǐng)求，其中content-type為multipart/form-data。位置API文件API界面API網(wǎng)絡(luò)API媒體API數(shù)據(jù)API設(shè)備API開(kāi)放API二、媒體API媒體API圖片錄音音頻相關(guān)視頻相關(guān)實(shí)時(shí)音視頻二、媒體API圖片1．保存圖片到系統(tǒng)相冊(cè)方法為wx.saveImageToPhotosAlbum(Objectobject)，此API用于保存圖片到系統(tǒng)相冊(cè)2．全屏預(yù)覽圖片方法為wx.previewImage(Objectobject)，此API用于在新頁(yè)面中全屏預(yù)覽圖片。預(yù)覽的過(guò)程中用戶可以進(jìn)行保存圖片、發(fā)送給朋友等操作。3．獲取圖片信息方法為wx.getImageInfo(Objectobject)，此API用于獲取圖片信息。網(wǎng)絡(luò)圖片需先配置download域名才能生效。4．壓縮圖片方法為pressImage(Objectobject)，此API用于壓縮圖片接口，可選壓縮質(zhì)量。5．客戶端會(huì)話選擇文件方法為wx.chooseMessageFile(Objectobject)，此API用于從客戶端會(huì)話選擇文件。6．本地相冊(cè)選擇圖片或使用相機(jī)拍照方法為wx.chooseImage(Objectobject)，此API用于從本地相冊(cè)選擇圖片或使用相機(jī)拍照。二、媒體API錄音錄音API包括錄音過(guò)程中涉及的所有方法，如開(kāi)始錄音、錄音管理器和停止錄音等。1．開(kāi)始錄音方法為wx.startRecord(Objectobject)

2．停止錄音方法為wx.stopRecord()3．錄音管理器方法為RecorderManager，是全局唯一的錄音管理器二、媒體API音頻相關(guān)音頻相關(guān)的API主要有播放語(yǔ)音、結(jié)束播放、設(shè)置播放選項(xiàng)、暫停播放、獲取音頻源、創(chuàng)建AudioContext對(duì)象和背景音頻等方法。1．播放語(yǔ)音方法為wx.playVoice(Objectobject)2．結(jié)束播放方法為wx.stopVoice(Objectobject)3．設(shè)置播放選項(xiàng)方法為wx.setInnerAudioOption(Objectobject)

4．暫停播放方法為wx.pauseVoice(Objectobject)

5．獲取音頻源方法為wx.getAvailableAudioSources(Objectobject)

6．創(chuàng)建AudioContext對(duì)象

分為InnerAudioContext對(duì)象和AudioContext對(duì)象二、媒體API視頻相關(guān)視頻相關(guān)的API主要有保存視頻、選擇視頻和創(chuàng)建VideoContext對(duì)象等方法。1．保存視頻方法為wx.saveVideoToPhotosAlbum(Objectobject)2．選擇視頻方法為wx.chooseVideo(Objectobject)3．創(chuàng)建VideoContext對(duì)象方法為wx.createVideoContext(stringid,Objectthis)二、媒體API實(shí)時(shí)音視頻實(shí)時(shí)音視頻實(shí)時(shí)音視頻API為wx.createLivePusherContext()，用于創(chuàng)建live-pusher上下文LivePusherContext對(duì)象。而wx.createLivePlayerContext(stringid,Objectthis)，則是創(chuàng)建live-player上下文LivePlayerContext對(duì)象。位置API文件API界面API網(wǎng)絡(luò)API媒體API數(shù)據(jù)API設(shè)備API開(kāi)放API三、文件API文件API讀取文件信息保存文件打開(kāi)文件刪除文件三、文件API讀取文件信息讀取文件信息wx.getSavedFileInfo(Objectobject)獲取本地文件的文件信息。此接口只能用于獲取已保存到本地的文件，若需要獲取臨時(shí)文件信息，請(qǐng)使用wx.getFileInfo()接口。三、文件API保存文件保存文件API為wx.saveFile(Objectobject)，用于保存文件到本地。需要注意的是saveFile會(huì)移動(dòng)臨時(shí)文件，因此調(diào)用成功后傳入的tempFilePath將不可用。三、文件API打開(kāi)文件打開(kāi)文件API為wx.openDocument(Objectobject)，用于頁(yè)面打開(kāi)文檔。三、文件API刪除文件刪除文件API為wx.removeSavedFile(Objectobject)，用于刪除本地緩存文件。位置API文件API界面API網(wǎng)絡(luò)API媒體API數(shù)據(jù)API設(shè)備API開(kāi)放API四、數(shù)據(jù)API數(shù)據(jù)API存儲(chǔ)緩存獲取緩存刪除緩存四、數(shù)據(jù)API存儲(chǔ)緩存存儲(chǔ)緩存的方法有兩個(gè)，一個(gè)為wx.setStorage，是異步版本，另一個(gè)為wx.setStorageSync是同步版本，它們都是將數(shù)據(jù)存儲(chǔ)在本地緩存指定的key中，會(huì)覆蓋原來(lái)該key對(duì)應(yīng)的內(nèi)容。數(shù)據(jù)存儲(chǔ)生命周期與小程序本身一致，即除非用戶主動(dòng)刪除或超過(guò)一定時(shí)間被自動(dòng)清理，否則數(shù)據(jù)都一直可用。單個(gè)key允許存儲(chǔ)的最大數(shù)據(jù)長(zhǎng)度為1MB，所有數(shù)據(jù)存儲(chǔ)上限為10MB。四、數(shù)據(jù)API獲取緩存獲取緩存API分為獲取緩存和獲取緩存信息兩個(gè)方法，具體如下。1．獲取緩存方法為wx.getStorage(stringkey)，用于從本地緩存中異步獲取指定key的內(nèi)容。對(duì)應(yīng)的同步方法為wx.getStorageSync(stringkey)。2．獲取緩存信息方法為Objectwx.getStorageInfo()，用于異步獲取當(dāng)前storage的相關(guān)信息。對(duì)應(yīng)的同步方法為wx.getStorageInfoSync()。四、數(shù)據(jù)API刪除緩存刪除和清除緩存方法為wx.clearStorage(Objectobject)，用于清理本地?cái)?shù)據(jù)緩存。位置API文件API界面API網(wǎng)絡(luò)API媒體API數(shù)據(jù)API設(shè)備API開(kāi)放API五、位置API位置API獲取位置查看位置地圖組件控制五、位置API獲取位置方法為wx.getLocation(Objectobject)，調(diào)用前需要用戶授權(quán)scope.userLocation獲取當(dāng)前的地理位置、速度。當(dāng)用戶離開(kāi)小程序后，此接口無(wú)法調(diào)用。工具中定位模擬使用IP定位，可能會(huì)有一定誤差，且工具目前僅支持GCJ-02（GCJ-02是由中國(guó)國(guó)家測(cè)繪局制訂的地理信息系統(tǒng)的坐標(biāo)系統(tǒng)，G表示國(guó)家（Guojia），C表示測(cè)繪（Cehui），J表示局（Ju））坐標(biāo)。使用第三方服務(wù)進(jìn)行逆地址解析時(shí)，請(qǐng)確認(rèn)第三方服務(wù)默認(rèn)的坐標(biāo)系，正確進(jìn)行坐標(biāo)轉(zhuǎn)換。五、位置API查看位置方法為wx.openLocation(Objectobject)，使用微信內(nèi)置地圖查看位置。五、位置API地圖組件控制方法為wx.chooseLocation(Objectobject)，用于打開(kāi)地圖選擇位置，調(diào)用前需要用戶授權(quán)scope.userLocation。位置API文件API界面API網(wǎng)絡(luò)API媒體API數(shù)據(jù)API設(shè)備API開(kāi)放API六、設(shè)備API設(shè)備API系統(tǒng)信息網(wǎng)絡(luò)連接加速度計(jì)羅盤撥打電話掃碼剪貼板藍(lán)牙屏幕手機(jī)聯(lián)系人六、設(shè)備API系統(tǒng)信息方法為wx.getSystemInfo(Objectobject)，用于獲取系統(tǒng)信息。六、設(shè)備API網(wǎng)絡(luò)連接網(wǎng)絡(luò)連接分為監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)變化事件和獲取網(wǎng)絡(luò)類型兩個(gè)方法。1．監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)變化事件方法為wx.onNetworkStatusChange(functioncallback)，用來(lái)監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)變化事件。2．獲取網(wǎng)絡(luò)類型方法為wx.getNetworkType(Objectobject)，用于獲取網(wǎng)絡(luò)類型。網(wǎng)絡(luò)類型主要包括wifi、2g、3g、4g、5g、unknown、none等。六、設(shè)備API加速度計(jì)加速度計(jì)主要包括開(kāi)始監(jiān)聽(tīng)加速度計(jì)、監(jiān)聽(tīng)加速度計(jì)事件和停止監(jiān)聽(tīng)加速度計(jì)三個(gè)方法。具體方法如下。1．開(kāi)始監(jiān)聽(tīng)加速度計(jì)方法為wx.startAccelerometer(Objectobject)，開(kāi)始監(jiān)聽(tīng)加速度數(shù)據(jù)。2．監(jiān)聽(tīng)加速度計(jì)事件方法為wx.onAccelerometerChange(functioncallback)，監(jiān)聽(tīng)加速度數(shù)據(jù)事件。3．停止監(jiān)聽(tīng)加速度計(jì)方法為wx.stopAccelerometer(Objectobject)，停止監(jiān)聽(tīng)加速度數(shù)據(jù)。六、設(shè)備API羅盤羅盤API