微信小程序開發(fā)邊做邊學(xué) 課件 知識點(diǎn)篇-微信小程序 第1-3章 搭建開發(fā)環(huán)境、心理測試小程序、授權(quán)頁面知識點(diǎn)講解

小程序開發(fā)從入門到實(shí)踐01搭建開發(fā)環(huán)境02開發(fā)工具介紹03小程序目錄結(jié)構(gòu)04小程序開發(fā)入門CONTENTS目錄搭建開發(fā)環(huán)境知識點(diǎn)小程序開發(fā)準(zhǔn)備工作1.賬號信息在填寫賬號信息是需要填寫郵箱、密碼、確認(rèn)密碼、驗(yàn)證碼，填寫完畢后，勾選“你已閱讀并同意《微信公眾平臺服務(wù)協(xié)議》及《微信小程序平臺服務(wù)條款》”，勾選后單擊“注冊”按鈕提交填寫好的賬號信息。注意所填郵箱必須滿足以下條件：（1）未注冊過微信公眾平臺；（2）未注冊過微信開發(fā)平臺；（3）未用于綁定過個人微信號。其中每個郵箱只能申請一個小程序，如果開發(fā)者沒有滿足條件的郵箱，可以先去申請一個新的郵箱，再進(jìn)行小程序賬號的注冊。小程序開發(fā)準(zhǔn)備工作2.郵箱激活在賬號信息提交后，進(jìn)入郵箱激活頁面，單擊“登錄郵箱”按鈕，登錄到注冊小程序的郵箱查看激活文件小程序開發(fā)準(zhǔn)備工作3.信息登記完成郵箱激活后，進(jìn)入信息登記頁面，其中注冊國家/地區(qū)選擇默認(rèn)選項(xiàng)“中國大陸”，主體類型根據(jù)開發(fā)者實(shí)際情況進(jìn)行選擇，主要有個人、企業(yè)、政府、媒體以及其他組織5種主體類型小程序開發(fā)AppID：小程序管理員可在微信公眾平臺查看自己的AppID。AppID必須填實(shí)際的小程序AppID，否則部分功能將無法使用。2.項(xiàng)目目錄：為項(xiàng)目代碼包存放的路徑地址，可選擇默認(rèn)的目錄，也可以選擇自己新建的空文件夾所在的目錄。3.開發(fā)模式：開發(fā)模式有兩個選項(xiàng)，分別是小程序和插件，插件是可被添加到小程序內(nèi)直接使用的功能組件。開發(fā)者可以像開發(fā)小程序一樣開發(fā)一個插件，供其他小程序使用。4.后端服務(wù)：后端服務(wù)有“不使用云服務(wù)”與“小程序·云開發(fā)”，本節(jié)案例選擇不使用云服務(wù)。5.開發(fā)語言：開發(fā)語言可選擇“JavaScript”與“TypeScript”Helloword小程序知識點(diǎn)小程序開發(fā)開發(fā)工具介紹開發(fā)者工具界面，從上到下，從左到右，分別為：菜單欄、工具欄、模擬器、編輯器、調(diào)試器五大部分小程序開發(fā)主體文件菜單欄菜單欄中主要包括了項(xiàng)目、文件、編輯、工具、界面、設(shè)置和微信開發(fā)者工具，它們的下拉菜單如圖所示。“項(xiàng)目”下拉菜單“文件”下拉菜單“界面”下拉菜單（g）“微信開發(fā)工具”下拉菜單小程序開發(fā)主體文件菜單欄菜單欄中主要包括了項(xiàng)目、文件、編輯、工具、界面、設(shè)置和微信開發(fā)者工具，它們的下拉菜單如圖所示。

“編輯”下拉菜單

“設(shè)置”下拉菜單

“工具”下拉菜單小程序開發(fā)工具欄1.左側(cè)區(qū)域工具欄的左側(cè)區(qū)域主要包括個人中心、模擬器、編輯器、調(diào)試器和云開發(fā)個人中心：賬號切換和消息提醒；模擬器：單擊切換顯示/隱藏模擬器面板；編輯器：單擊切換顯示/隱藏編輯器面板；調(diào)試器：單擊切換顯示/隱藏調(diào)試器面板；云開發(fā)：單擊創(chuàng)建云開發(fā)。2.中間區(qū)域工具欄的中間區(qū)域主要包括小程序模式、編譯模式、編譯、預(yù)覽、遠(yuǎn)程調(diào)試、切后臺和清緩存小程序模式：選擇小程序模式與插件模式；編譯模式：普通編譯、自定義編譯和通過二維碼編譯；編譯：單擊編譯小程序項(xiàng)目；預(yù)覽：單擊生成二維碼進(jìn)行真機(jī)預(yù)覽；真機(jī)調(diào)試：單擊生成二維碼進(jìn)行真機(jī)調(diào)試；切后臺：點(diǎn)擊切換前臺/后臺；清緩存：可清除數(shù)據(jù)緩存、文件緩存、授權(quán)數(shù)據(jù)、網(wǎng)絡(luò)緩存、登錄狀態(tài)與全部緩存。小程序開發(fā)3.右側(cè)區(qū)域工具欄的右側(cè)區(qū)域主要包括上傳、版本管理、社區(qū)和詳情上傳：將代碼上傳為開發(fā)版本；版本管理：單擊開啟代碼版本管理（使用git進(jìn)行版本管理）；社區(qū)：單擊進(jìn)入開放社區(qū)；詳情：顯示項(xiàng)目詳情、項(xiàng)目設(shè)置和域名信息；云開發(fā)：單擊創(chuàng)建云開發(fā)。小程序開發(fā)模擬器模擬在器面板頂部可以切換手機(jī)型號、顯示比例和模擬網(wǎng)絡(luò)連接狀態(tài)，并進(jìn)行模擬操作，模擬器底部的狀態(tài)欄，可以直觀地看到當(dāng)前運(yùn)行小程序的場景值，頁面路徑及頁面參數(shù)。如圖所示。小程序開發(fā)編輯器編輯器主要包含項(xiàng)目目錄結(jié)構(gòu)區(qū)與代碼編輯區(qū)，如圖所示。小程序開發(fā)調(diào)試器調(diào)試器分為10大功能模塊：Console、Source、Network、Security、AppData、Audits、Sensor、Storage、Trace以及Wxml。小程序開發(fā)調(diào)試器1.ConsoleConsole是后臺控制器，開發(fā)者可以在此輸出和調(diào)試代碼，代碼報(bào)錯和警告會在此處顯示。開發(fā)者可以在JS文件中使用console.log（）語句查看代碼的執(zhí)行情況以及數(shù)據(jù)內(nèi)容輸出調(diào)試小程序開發(fā)2.SourceSources的功能：用于顯示當(dāng)前項(xiàng)目的腳本文件，同瀏覽器開發(fā)不同，微信小程序框架會對腳本文件進(jìn)行編譯的工作，所以在Sourcespanel中開發(fā)者看到的文件是經(jīng)過處理之后的腳本文件，開發(fā)者的代碼都會被包裹在define函數(shù)中，并且對于Page代碼，在尾部會有require的主動調(diào)用。如圖所示。小程序開發(fā)

3.NetworkNetwork面板主要用于觀察和顯示request和socket的請求情況（請求接口，請求參數(shù)，返回值），如圖所示。小程序開發(fā)4.SecuritySecurity面板是小程序的安全面板，開發(fā)者可以通過該面板去調(diào)試當(dāng)前網(wǎng)頁的安全和認(rèn)證等問題并確保是否已經(jīng)在網(wǎng)站上正確地實(shí)現(xiàn)HTTPS，如圖所示。小程序開發(fā)5.AppDataAppData面板主要用于顯示當(dāng)前項(xiàng)目當(dāng)前時(shí)刻AppData具體數(shù)據(jù)，實(shí)時(shí)地反饋項(xiàng)目數(shù)據(jù)情況，開發(fā)者也可以在此處編輯數(shù)據(jù)，并及時(shí)地反饋到界面上，如圖所示。小程序開發(fā)6.AuditsAudits面板主要具有體驗(yàn)評分功能，開發(fā)者單擊“開始檢查”按鈕，并操作小程序項(xiàng)目，系統(tǒng)會在小程序運(yùn)行過程中實(shí)時(shí)檢查，分析出一些可能導(dǎo)致體驗(yàn)不好的地方，并定位出哪里有問題，以及給出一些優(yōu)化意見，如圖所示。小程序開發(fā)7.SensorSensor面板用于模擬手機(jī)傳感器，在PC端測試時(shí)，開發(fā)者可以手動錄入傳感器數(shù)據(jù)，例如地理位置經(jīng)緯度、加速度計(jì)坐標(biāo)等，如圖所示。小程序開發(fā)8.StorageStorage面板用于顯示當(dāng)前項(xiàng)目中使用wx.setStorage或者wx.setStorageSync后的本地?cái)?shù)據(jù)存儲情況，如圖所示。小程序開發(fā)9.TraceTrace面板是小程序的調(diào)試追蹤面板，目前只支持Android手機(jī)，如圖所示。小程序開發(fā)10.WxmlWxml的使用：幫助開發(fā)者開發(fā)Wxml轉(zhuǎn)化后的界面。在這里可以看到真實(shí)的頁面結(jié)構(gòu)以及結(jié)構(gòu)對應(yīng)的wxss屬性，同時(shí)可以通過修改對應(yīng)wxss屬性，在模擬器中實(shí)時(shí)看到修改的情況。通過調(diào)試模塊左上角的選擇器，還可以快速找到頁面中組件對應(yīng)的wxml代碼，如圖所示。小程序目錄結(jié)構(gòu)知識點(diǎn)小程序開發(fā)項(xiàng)目配置文件01020304主體文件頁面文件其他文件小程序開發(fā)項(xiàng)目配置文件新建小程序時(shí)，都會自動生成一個項(xiàng)目配置文件，即項(xiàng)目根目錄下的project.config.json文件，如圖所示。項(xiàng)目配置文件中主要通過定義項(xiàng)目名稱、AppID等內(nèi)容來對項(xiàng)目進(jìn)行配置。小程序開發(fā)主體文件必須放在項(xiàng)目的根目錄下app.jsapp.jsonapp.wxss文件作用小程序開發(fā)app.jsapp.js為系統(tǒng)的方法處理全局文件，也就是說文件中規(guī)定的函數(shù)和數(shù)據(jù)，在整個小程序中，每一個框架頁面和文件都可以使用this獲取。每個小程序都會有一個app.js文件，有且只有一個，位于項(xiàng)目的根目錄。該文件App()函數(shù)用來注冊一個小程序，如圖所示。接受一個object參數(shù)，其指定小程序的生命周期函數(shù)等。詳見：/miniprogram/dev/framework/app-service/app.html。小程序開發(fā)app.jsonapp.json:該文件用來對微信小程序進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多tab等。詳見圖。注：在上述app.json配置列表中，常用該文件內(nèi)不可包含注釋，否則不可運(yùn)行。其中，app.json的屬性相對較多，本小節(jié)簡單介紹相對常用的幾個屬性。屬性類型必填描述最低版本pagesstring[]是頁面路徑列表

windowObject否全局的默認(rèn)窗口表現(xiàn)

tabBarObject否底部tab欄的表現(xiàn)

networkTimeoutObject否網(wǎng)絡(luò)超時(shí)時(shí)間

debugboolean否是否開啟debug模式，默認(rèn)關(guān)閉

functionalPagesboolean否是否啟用插件功能頁，默認(rèn)關(guān)閉2.1.0subpackagesObject[]否分包結(jié)構(gòu)配置1.7.3workersstring否Worker代碼放置目錄1.9.90requireBackgroundModesstring[]否需要在后臺使用能力，如[音樂播放]

小程序開發(fā)app.jsonapp.json:該文件用來對微信小程序進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多tab等。詳見圖。注：在上述app.json配置列表中，常用該文件內(nèi)不可包含注釋，否則不可運(yùn)行。其中，app.json的屬性相對較多，本小節(jié)簡單介紹相對常用的幾個屬性。pluginsObject否使用到的插件1.9.6preloadRuleObject否分包預(yù)下載規(guī)則2.3.0resizableboolean否iPad小程序是否支持屏幕旋轉(zhuǎn)，默認(rèn)關(guān)閉2.4.0navigateToMiniProgramAppIdListstring[]否需要跳轉(zhuǎn)的小程序列表2.4.0usingComponentsObject否全局自定義配置開發(fā)者工具1.02.1810190permissionObject否小程序接口權(quán)限相關(guān)設(shè)置微信客戶端7.0.0小程序開發(fā)pages屬性pages屬性主要用于指定小程序由哪些頁面組成，每一項(xiàng)都對應(yīng)一個頁面的路徑+文件名信息。通俗來講，就是你的小程序需要顯示一個頁面，就需要在該文件中注冊。此外需要注意一點(diǎn)，pages配置項(xiàng)中第一條記錄為最先呈獻(xiàn)給用戶的界面。除此之外的數(shù)組順序盡量按照呈現(xiàn)給用戶界面的順序進(jìn)行排序。以helloworld小程序?yàn)槔?，如所示，小程序中共有index頁面和logs頁面，其中index頁面為該項(xiàng)目的初始頁面。開發(fā)者如果想將logs頁面變?yōu)槌跏柬撁?，只需將logs頁面路徑放置于pages配置項(xiàng)的第一行即可。小程序開發(fā)windows屬性window屬性主要用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航欄、標(biāo)題與窗口背景顏色，具體所包含的屬性如表所示。屬性類型默認(rèn)值描述最低版本navigationBarBackgroundColorHexColor#000000導(dǎo)航欄背景顏色

navigationBarTextStylestringwhite導(dǎo)航欄標(biāo)題顏色，僅支持black/white

navigationBarTitleTextstring

導(dǎo)航欄標(biāo)題文字內(nèi)容

navigationStylestringdefault導(dǎo)航欄樣式，僅支持以下值:default/custom微信客戶端6.6.0backgroundColorHexcolor#ffffff窗口的背景色

backgroundTextStylestringdark下拉loading的樣式，僅支持dark/light

backgroundColorTopstring#ffffff頂部窗口的背景色，僅iOS支持微信客戶端6.5.16backgroundColorBottomstring#ffffff底部窗口的背景色，僅iOS支持微信客戶端6.5.16enablePullDownRefreshbooleanfalse是否開啟全局的下拉刷新

onReachBottomDistancenumber50頁面上拉觸底事件觸發(fā)時(shí)距頁面底部距離，單位為px

pageOrientationstringportrait屏幕旋轉(zhuǎn)設(shè)置，支持auto/portrait/landscape2.4.0(auto)/2.5.0(landscape)注1：HexColor的屬性值只支持十六進(jìn)制顏色值，如"#ff00ff"，大小寫不限。小程序開發(fā)windows屬性window屬性中各屬性值的作用區(qū)域，如圖微信接口功能圖所示。小程序開發(fā)tabar屬性

如果小程序是一個多tab應(yīng)用（客戶端窗口的底部或頂部有tab欄可以切換頁面），可以通過tabBar配置項(xiàng)指定tab欄的表現(xiàn)，以及tab切換時(shí)顯示的對應(yīng)頁面。tabBar的屬性值如表1-3所示。屬性類型必填默認(rèn)值描述colorHexColor是

tab上的文字默認(rèn)顏色，僅支持十六進(jìn)制顏色selectedColorHexColor是

tab上的文字選中時(shí)的顏色，僅支持十六進(jìn)制顏色backgroundColorHexColor是

Tab的背景色，僅支持十六進(jìn)制顏色borderStylestring否blacktabBar上邊框的顏色，僅支持black/whitelistArray是

tab的列表，詳見list屬性表positionstring否bottomtabBar的位置，僅支持bottom/topcustomboolean否false自定義tabBar其中l(wèi)ist接受一個數(shù)組，只能配置最少2個、最多5個tab。tab按數(shù)組的順序排序，每個項(xiàng)都是一個對象，其屬性值如表所示。屬性類型必填說明pagePathstring是頁面路徑，必須在pages中先定義textstring是Tab上按鈕文字iconPathstring否圖片路徑，icon大小限制為40kb，建議尺寸81px*81px，不支持網(wǎng)絡(luò)圖片。當(dāng)position為top時(shí)，不顯示iconselectedIconPathstring否選中時(shí)的圖片路徑，icon大小限制為40kb，建議尺寸81px*81px，不支持網(wǎng)絡(luò)圖片。當(dāng)position為top時(shí)，不顯示icon小程序開發(fā)tabBar個屬性值的作用區(qū)域，如圖所示。app.json文件中的其他屬性在后續(xù)案例中使用到時(shí)再仔細(xì)講解，本節(jié)就不再贅述了。小程序開發(fā)app.wxssapp.wxss文件是小程序的全局樣式文件，作用于每一個頁面，其中，WXSS(WeiXinStyleSheets)是一套樣式語言，用于描述WXML的組件樣式。該文件是可選文件，如果沒有全局樣式規(guī)定，可以省略不寫，app.wxss文件中的代碼如所示。小程序開發(fā)wxss文件js文件json文件wxml文件對于小程序中的每個頁面，都需要在頁面對應(yīng)的js文件中調(diào)用page方法注冊頁面示例，指定頁面初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。每一個小程序頁面也可以使用同名.json文件來對本頁面的窗口表現(xiàn)進(jìn)行配置，頁面中配置項(xiàng)會覆蓋app.json的window中相同的配置項(xiàng)。新設(shè)置的選項(xiàng)只會顯示在當(dāng)前頁面上，不會影響其他頁面。WXML（WeiXinMarkupLanguage）是框架設(shè)計(jì)的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)。Wxml文件主要具有數(shù)據(jù)綁定、列表渲染、條件渲染、模板和引用的能力。具體的能力如何使用會在后面章節(jié)中涉及時(shí)做介紹。文件類型必需作用js是頁面邏輯wxml是頁面結(jié)構(gòu)json否頁面配置wxss否頁面樣式表頁面文件WXSS(WeiXinStyleSheets)是一套樣式語言，用于描述WXML的組件樣式。在頁面文件中只要用于設(shè)置當(dāng)前的樣式效果，該文件中規(guī)定的樣式會覆蓋app.wxss全局樣式中產(chǎn)生沖突的規(guī)定，但不會影響其他頁面。小程序開發(fā)如本章新建的HelloWorld小程序中utils文件夾就是用來存放公共JS文件在調(diào)用時(shí)只需在文件中加入consthttps=require('文件目錄');即可調(diào)用，如圖所示。全局調(diào)用自定義的JS文件前需要在被調(diào)用JS文件中使用module.exports={可被調(diào)用的函數(shù)}進(jìn)行聲明其他文件小程序開發(fā)入門知識點(diǎn)小程序開發(fā)小程序基本開發(fā)是基于MVC，即模型、視圖和控制器。模型層在這里體現(xiàn)的不是很明顯，大部分時(shí)候都以全局變量或頁面局部變量的形式存在，一般存在于控制器中。視圖由.wxml文件所表示，它將控制器得到的數(shù)據(jù)和wxml文件進(jìn)行組合和渲染。而視圖與控制器的交互通過綁定事件的形式觸發(fā)控制器各個函數(shù)的執(zhí)行，大部分事件會傳遞目標(biāo)節(jié)點(diǎn)對象作為其參數(shù)。當(dāng)新建項(xiàng)目時(shí)，會建立小程序主控制邏輯與配置文件，其中包括app.js(控制小程序邏輯，響應(yīng)生命周期回掉函數(shù)操作，全局變量的定義等)，此文件用于注冊小程序；app.json(小程序窗口，特性配置等，像下拉刷新，導(dǎo)航欄配置，tabBar等)；app.wxss(樣式配置)。接下來具體的頁面操作才是和用戶交互的真正載體，每個頁面都單獨(dú)存放一個文件夾，方便管理，同時(shí)WAService會將此文件夾中的頁面樣式文件進(jìn)行渲染。每個頁面都由js文件進(jìn)行控制，wxml進(jìn)行布局，wxss進(jìn)行樣式設(shè)置。用于響應(yīng)生命周期方法有onLoad(監(jiān)聽頁面加載)，onReady(監(jiān)聽頁面初次渲染完成)，onShow(監(jiān)聽頁面顯示)，onHide(監(jiān)聽頁面隱藏)，onUnload(監(jiān)聽頁面卸載)。小程序框架打開新建好的helloworld小程序，通過app.json的pages字段可以知道當(dāng)前小程序的所有頁面路徑:修改windows屬性1

這個配置說明在HelloWorld小程序項(xiàng)目定義了兩個頁面，分別位于pages/index/index和pages/logs/logs。而寫在pages字段的第一個頁面"pages/index/index"就是我們進(jìn)入到這個小程序之后的首頁（打開小程序看到的第一個頁面）。于是微信客戶端就把首頁的代碼裝載進(jìn)來，通過小程序底層的一些機(jī)制，就可以渲染出這個首頁。小程序開發(fā)

小程序啟動之后，在app.js定義的App實(shí)例的onLaunch回調(diào)會被執(zhí)行:1.1小程序開發(fā)1.2整個小程序只有一個App實(shí)例，是全部頁面共享的，接下來簡單看看小程序的一個頁面是怎么寫的。對于window字段，可以理解為頁面外觀的一些顯示：修改一下window屬性的值，逐一將navigationBarBackgroundColor的值改為”0ca”，navigationBarTitleText的值改為”微信”,navigationBarTextStyle的值改為”white”,每修改一個值編譯一次代碼，觀察模擬器中頁面的變化，更好地體會每個值對應(yīng)的作用區(qū)域在哪里，修改值如圖所示。1.31.4

修改完上述值，會發(fā)現(xiàn)界面發(fā)生改變，如圖所示。小程序開發(fā)Helloworld小程序中涉及到的是簡單的數(shù)據(jù)綁定，數(shù)據(jù)綁定使用Mustache語法（雙大括號）將變量包起來，該項(xiàng)目中主要作用于內(nèi)容，作用于內(nèi)容的代碼如下：數(shù)據(jù)綁定2小程序開發(fā)注：js文件中，在page方法的data數(shù)組中定義了message變量，并給message附上初始值’HelloMINA!’，然后在wxml文件中使用{{message}}，將message的值顯示在界面上。以上為數(shù)據(jù)綁定的例子。回到helloworld小程序項(xiàng)目中，其中{{motto}}的值為HelloWorld，userInfo為數(shù)組，主要存儲了用戶的信息，{{userInfo.avatarUrl}}和{{userInfo.nickName}}分別為微信用戶的頭像和昵稱，如左圖所示2.1小程序開發(fā)接下來可以修改一下js文件中motto的值，如圖1所示，修改后效果圖如圖2所示。2.2小程序開發(fā)再修改一下動態(tài)獲取的昵稱，如圖所示，在/pages/index目錄下，修改index.wxml文件。2.3小程序開發(fā)小程序開發(fā)將{{userInfo.nickName}}改為你想要的任何名字，如圖所示，然后編譯。2.4示例結(jié)果給helloworld小程序添加一個tabBar，代碼圖添加tabBar3小程序開發(fā)小程序開發(fā)1.新建images文件夾，用于存放icon的圖片，images的添加方法有兩種：1）單擊目錄結(jié)構(gòu)區(qū)左上方的“+”按鈕，選擇新建目錄，并命名為images；2）打開項(xiàng)目存放目錄，在項(xiàng)目文件夾下新建images文件夾。小程序開發(fā)2.將icon的圖片黏貼到images文件夾下，即可將圖片放置于images目錄下小程序開發(fā)這邊給大家推薦一個icon的下載網(wǎng)站，網(wǎng)址為，開發(fā)者可以在該網(wǎng)址下載自己需要的icon作業(yè)思考已知wxml頁面上有：<view>{{msg}}<view>在js頁面上有Page（｛data:{msg:‘hello’｝｝），那么頁面最終顯示的文字效果是（）。A:{{msg}}B:msgC:{{hello}}D:hello2.正確下載微信開發(fā)者工具無法顯示二維碼的原因可能是（）。A:小程序軟件有問題B:打開方式不對C:沒有關(guān)閉防火墻D:網(wǎng)絡(luò)故障3.微信小程序新建項(xiàng)目提示Error:{"ret":80203,"errmsg":""}的原因可能是（）。A:選擇了小程序云開發(fā)B:不使用云開發(fā)或者建立普通快速啟動模板C:中文命名項(xiàng)目D:目錄沒有選在D盤4.創(chuàng)建tabBar，讀取圖片失敗不可能的原因是（）。A:tabBar的pagepath不正確B:tabBar的iconPath不正確C:tabBar的selectedPath不正確D:tabBar的text使用中文謝謝觀看小程序開發(fā)從入門到實(shí)踐

知識點(diǎn)心理測試小程序小程序開發(fā)事件是視圖層到邏輯層的通訊方式。

事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)。1.Bindtap事件綁定小程序開發(fā)心理測試小程序中總共有4個事件，其事件處理函數(shù)對應(yīng)的事件觸發(fā)結(jié)果如表所示。事件處理函數(shù)所處頁面事件觸發(fā)結(jié)果beginAnswerindex跳轉(zhuǎn)至test頁面answerClickAtest顯示下一題，并判斷A對應(yīng)的是題庫中哪個選擇，給對應(yīng)選項(xiàng)的值+1，滿足index=20時(shí)，跳至result頁面answerClickBtest顯示下一題，并判斷B對應(yīng)的是題庫中哪個選擇，給對應(yīng)選項(xiàng)的值+1，滿足index=20時(shí)，跳至result頁面answerClickCtest顯示下一題，并判斷B對應(yīng)的是題庫中哪個選擇，給對應(yīng)選項(xiàng)的值+1，滿足index=20時(shí)，跳至result頁面小程序開發(fā)2.路由小程序API中的路由共有5種路由路由規(guī)則wx.switchTab跳轉(zhuǎn)到tabBar頁面，并關(guān)閉其他所有非tabBar頁面wx.reLaunch關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面wx.redirectTo關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)到tabbar頁面wx.navigateTo保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不能跳到tabbar頁面。使用wx.navigateBack可以返回到原頁面。小程序中頁面棧最多十層wx.navigateBack關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面?？赏ㄟ^getCurrentPages獲取當(dāng)前的頁面棧，決定需要返回幾層。小程序開發(fā)其中心理測試小程序中用到了wx.navigateTo和wx.redirectTo，這邊通過修改index.js中的路由來看一下兩個路由之間的區(qū)別，一開始index.js文件的事件處理函數(shù)beginAnswer中使用的是wx.navigateTo，此時(shí)test與result頁面如圖所示，進(jìn)入test和result頁面均可單擊“<”按鈕回到index頁面。test初始頁面小程序開發(fā)其中心理測試小程序中用到了wx.navigateTo和wx.redirectTo，這邊通過修改index.js中的路由來看一下兩個路由之間的區(qū)別，一開始index.js文件的事件處理函數(shù)beginAnswer中使用的是wx.navigateTo，此時(shí)test與result頁面如圖所示，進(jìn)入test和result頁面均可單擊“<”按鈕回到index頁面。result初始頁面小程序開發(fā)如果將wx.navigateTo改為wx.redirectTo，會發(fā)現(xiàn)頁面左上角的“<”不見了，無法回到index頁面test修改后頁面小程序開發(fā)如果將wx.navigateTo改為wx.redirectTo，會發(fā)現(xiàn)頁面左上角的“<”不見了，無法回到index頁面result修改后頁面小程序開發(fā)聲明變量在js中，未在data數(shù)組中定義的變量，可以通過var語句來進(jìn)行變量聲明，在聲明變量的同時(shí)也可以向變量賦值，如test.js文件中的一段代碼：3.聲明變量與變量賦值小程序開發(fā)2.變量賦值在js文件的函數(shù)中給變量賦值的方法有兩種，這里舉一個簡單的例子，首先將index.wxml文件中button的“開始測試”改為“{{msg}}”，使button中的文字變成一個變量，然后在index.js文件的data數(shù)組中添加變量msg，并賦予初值“開始測試”，最后將事件處理函數(shù)beginAnswer進(jìn)行修改，代碼如左圖所示。小程序開發(fā)如果將this.setData({})改為使用this.data.msg=‘測試結(jié)束’來改變msg變量的值，會發(fā)現(xiàn)雖然可以改變msg的值，但是頁面不會更新小程序開發(fā)this.setData是用來更新界面的，this.data是用來獲取頁面data對象的，它們都可以用于給變量賦值，如果需要查看賦值后變量的值，需要在this.setData({})語句外使用console.log()打印查看變量的值。小程序開發(fā)2.相對路徑在index.js文件中，事件處理函數(shù)beginAnswer的wx.navigateTo路由的url使用的就是相對路徑，其中“../”指的是當(dāng)前文件所在的上一級目錄，即index文件夾所在的目錄，“../test/test”指的就是index所在目錄中test文件夾中的test文件。另外“./”指的是當(dāng)前目錄，“../../”指的是當(dāng)前文件所在的上上級目錄，以此類推。絕對路徑“/pages/test/test”即為test文件所在的絕對路徑，若將url改為絕對路徑“/pages/test/test”也能實(shí)現(xiàn)頁面的跳轉(zhuǎn)。4.絕對路徑與相對路徑小程序開發(fā)帶參跳轉(zhuǎn)在test.js文件中，answerClickA的一段代碼實(shí)現(xiàn)了當(dāng)index=20時(shí)，從test頁面跳轉(zhuǎn)至result頁面，跳轉(zhuǎn)時(shí)攜帶參數(shù)A、B和C的值，代碼如下：小程序開發(fā)在result頁面的頁面參數(shù)中可以看到帶參跳轉(zhuǎn)時(shí)的參數(shù)，如圖所示。小程序開發(fā)如果想用使用頁面參數(shù)，可以在result頁面的js文件中使用生命周期函數(shù)來獲取頁面參數(shù)，給生命周期函數(shù)function（）中定義一個值，這邊定義為options，即可使用option.A獲取A的值，并賦值給result頁面的變量A，B、C也一樣。開發(fā)者可以嘗試用console.log（options）打印看一下options中的值小程序開發(fā)變量賦值在js文件的函數(shù)中給變量賦值的方法有兩種，這里舉一個簡單的例子，首先將index.wxml文件中button的“開始測試”改為“{{msg}}”，使button中的文字變成一個變量，然后在index.js文件的data數(shù)組中添加變量msg，并賦予初值“開始測試”，最后將事件處理函數(shù)beginAnswer進(jìn)行修改，代碼如下。謝謝觀看小程序開發(fā)從入門到實(shí)踐知識點(diǎn)我的頁面模塊開發(fā)授權(quán)頁面知識點(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)識OpenID和會話密鑰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ù)請求。每個用戶訪問該小程序都有產(chǎn)生一個唯一的openid，這個openid為用戶訪問該小程序的標(biāo)識符。因此，可以把openid作為用戶唯一標(biāo)識符并存于數(shù)據(jù)庫中用以后續(xù)操作。注意點(diǎn)：小程序開發(fā)開發(fā)者服務(wù)器與微信接口服務(wù)之間的交互是由后臺實(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)用成功失敗都會執(zhí)行）由于app.js會先于其他頁面執(zhí)行，所以比較適合處理一些注冊函數(shù)，因此將wx.login()方法寫在app.js文件中。小程序開發(fā)wx.request()主要用于發(fā)送https網(wǎng)絡(luò)請求，其屬性詳見表格屬性類型默認(rèn)值必填說明urlstring

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

否請求參數(shù)headerobject

否設(shè)置請求的header，header中不能設(shè)置Referer。content-type默認(rèn)為application/jsonmethodstringGET否HTTP請求方法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)用成功失敗都會執(zhí)行）3.wx.login()小程序開發(fā)每個微信小程序都可以有自己的本地緩存，可以通過數(shù)據(jù)緩存API可以對本地緩存進(jìn)行設(shè)置、獲取和清理。同一個微信用戶，同一個小程序storage上限為10MB。localStorage以用戶維度隔離，同一臺設(shè)備上，A用戶無法讀取到B用戶的數(shù)據(jù)。注意：如果用戶儲存空間不足，微信會清空最近最久未使用的小程序的本地緩存。因此不建議將關(guān)鍵信息全部存在localStorage，以防儲存空間不足或用戶換設(shè)備的情況。函數(shù)名說明wx.setStorage(Objectobject)數(shù)據(jù)的存儲（異步）wx.setStorageSync(stringkey,anydata)數(shù)據(jù)的存儲（同步）wx.getStorage(Objectobject)數(shù)據(jù)的獲?。ó惒剑﹚x.getStorageSync(stringkey)數(shù)據(jù)的獲取（同步）wx.getStorageInfo(Objectobject)存儲信息的獲?。ó惒剑﹚x.getStorageInfoSync()存儲信息的獲?。ㄍ剑﹚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個字符cancelColorstring#000000否取消按鈕的文字顏色，必須是16進(jìn)制格式的顏色字符串confirmTextstring‘確定’否確認(rèn)按鈕的文字，最多4個字符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)用成功、失敗都會執(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)對話框，其中object參數(shù)說明如表所示。注冊頁面知識點(diǎn)講解小程序開發(fā)注冊頁面知識點(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ā)對應(yīng)的事件處理函數(shù)，并且輸入框中的值可以通過event.detail.value來獲取,例如如下事例：wxml文件代碼：小程序開發(fā)2.bindchange事件bindchange事件與bindtap事件不同，它主要是當(dāng)輸入框中的內(nèi)