微信小程序開發(fā)邊做邊學(xué) 課件全套 吳曉春 知識(shí)點(diǎn)篇-微信小程序 第1章 搭建開發(fā)環(huán)境、心理測試小程序-操作篇 第10章 初始云開發(fā)及實(shí)戰(zhàn)

小程序開發(fā)從入門到實(shí)踐01搭建開發(fā)環(huán)境02開發(fā)工具介紹03小程序目錄結(jié)構(gòu)04小程序開發(fā)入門CONTENTS目錄搭建開發(fā)環(huán)境知識(shí)點(diǎn)小程序開發(fā)準(zhǔn)備工作1.賬號(hào)信息在填寫賬號(hào)信息是需要填寫郵箱、密碼、確認(rèn)密碼、驗(yàn)證碼，填寫完畢后，勾選“你已閱讀并同意《微信公眾平臺(tái)服務(wù)協(xié)議》及《微信小程序平臺(tái)服務(wù)條款》”，勾選后單擊“注冊(cè)”按鈕提交填寫好的賬號(hào)信息。注意所填郵箱必須滿足以下條件：（1）未注冊(cè)過微信公眾平臺(tái)；（2）未注冊(cè)過微信開發(fā)平臺(tái)；（3）未用于綁定過個(gè)人微信號(hào)。其中每個(gè)郵箱只能申請(qǐng)一個(gè)小程序，如果開發(fā)者沒有滿足條件的郵箱，可以先去申請(qǐng)一個(gè)新的郵箱，再進(jìn)行小程序賬號(hào)的注冊(cè)。小程序開發(fā)準(zhǔn)備工作2.郵箱激活在賬號(hào)信息提交后，進(jìn)入郵箱激活頁面，單擊“登錄郵箱”按鈕，登錄到注冊(cè)小程序的郵箱查看激活文件小程序開發(fā)準(zhǔn)備工作3.信息登記完成郵箱激活后，進(jìn)入信息登記頁面，其中注冊(cè)國家/地區(qū)選擇默認(rèn)選項(xiàng)“中國大陸”，主體類型根據(jù)開發(fā)者實(shí)際情況進(jìn)行選擇，主要有個(gè)人、企業(yè)、政府、媒體以及其他組織5種主體類型小程序開發(fā)AppID：小程序管理員可在微信公眾平臺(tái)查看自己的AppID。AppID必須填實(shí)際的小程序AppID，否則部分功能將無法使用。2.項(xiàng)目目錄：為項(xiàng)目代碼包存放的路徑地址，可選擇默認(rèn)的目錄，也可以選擇自己新建的空文件夾所在的目錄。3.開發(fā)模式：開發(fā)模式有兩個(gè)選項(xiàng)，分別是小程序和插件，插件是可被添加到小程序內(nèi)直接使用的功能組件。開發(fā)者可以像開發(fā)小程序一樣開發(fā)一個(gè)插件，供其他小程序使用。4.后端服務(wù)：后端服務(wù)有“不使用云服務(wù)”與“小程序·云開發(fā)”，本節(jié)案例選擇不使用云服務(wù)。5.開發(fā)語言：開發(fā)語言可選擇“JavaScript”與“TypeScript”Helloword小程序知識(shí)點(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ū)域主要包括個(gè)人中心、模擬器、編輯器、調(diào)試器和云開發(fā)個(gè)人中心：賬號(hào)切換和消息提醒；模擬器：單擊切換顯示/隱藏模擬器面板；編輯器：單擊切換顯示/隱藏編輯器面板；調(diào)試器：單擊切換顯示/隱藏調(diào)試器面板；云開發(fā)：單擊創(chuàng)建云開發(fā)。2.中間區(qū)域工具欄的中間區(qū)域主要包括小程序模式、編譯模式、編譯、預(yù)覽、遠(yuǎn)程調(diào)試、切后臺(tái)和清緩存小程序模式：選擇小程序模式與插件模式；編譯模式：普通編譯、自定義編譯和通過二維碼編譯；編譯：單擊編譯小程序項(xiàng)目；預(yù)覽：單擊生成二維碼進(jìn)行真機(jī)預(yù)覽；真機(jī)調(diào)試：單擊生成二維碼進(jìn)行真機(jī)調(diào)試；切后臺(tái)：點(diǎn)擊切換前臺(tái)/后臺(tái)；清緩存：可清除數(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ī)型號(hào)、顯示比例和模擬網(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是后臺(tái)控制器，開發(fā)者可以在此輸出和調(diào)試代碼，代碼報(bào)錯(cuò)和警告會(huì)在此處顯示。開發(fā)者可以在JS文件中使用console.log（）語句查看代碼的執(zhí)行情況以及數(shù)據(jù)內(nèi)容輸出調(diào)試小程序開發(fā)2.SourceSources的功能：用于顯示當(dāng)前項(xiàng)目的腳本文件，同瀏覽器開發(fā)不同，微信小程序框架會(huì)對(duì)腳本文件進(jìn)行編譯的工作，所以在Sourcespanel中開發(fā)者看到的文件是經(jīng)過處理之后的腳本文件，開發(fā)者的代碼都會(huì)被包裹在define函數(shù)中，并且對(duì)于Page代碼，在尾部會(huì)有require的主動(dòng)調(diào)用。如圖所示。小程序開發(fā)

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

小程序開發(fā)app.jsonapp.json:該文件用來對(duì)微信小程序進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多tab等。詳見圖。注：在上述app.json配置列表中，常用該文件內(nèi)不可包含注釋，否則不可運(yùn)行。其中，app.json的屬性相對(duì)較多，本小節(jié)簡單介紹相對(duì)常用的幾個(gè)屬性。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)都對(duì)應(yīng)一個(gè)頁面的路徑+文件名信息。通俗來講，就是你的小程序需要顯示一個(gè)頁面，就需要在該文件中注冊(cè)。此外需要注意一點(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屬性

如果小程序是一個(gè)多tab應(yīng)用（客戶端窗口的底部或頂部有tab欄可以切換頁面），可以通過tabBar配置項(xiàng)指定tab欄的表現(xiàn)，以及tab切換時(shí)顯示的對(duì)應(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接受一個(gè)數(shù)組，只能配置最少2個(gè)、最多5個(gè)tab。tab按數(shù)組的順序排序，每個(gè)項(xiàng)都是一個(gè)對(duì)象，其屬性值如表所示。屬性類型必填說明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個(gè)屬性值的作用區(qū)域，如圖所示。app.json文件中的其他屬性在后續(xù)案例中使用到時(shí)再仔細(xì)講解，本節(jié)就不再贅述了。小程序開發(fā)app.wxssapp.wxss文件是小程序的全局樣式文件，作用于每一個(gè)頁面，其中，WXSS(WeiXinStyleSheets)是一套樣式語言，用于描述WXML的組件樣式。該文件是可選文件，如果沒有全局樣式規(guī)定，可以省略不寫，app.wxss文件中的代碼如所示。小程序開發(fā)wxss文件js文件json文件wxml文件對(duì)于小程序中的每個(gè)頁面，都需要在頁面對(duì)應(yīng)的js文件中調(diào)用page方法注冊(cè)頁面示例，指定頁面初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。每一個(gè)小程序頁面也可以使用同名.json文件來對(duì)本頁面的窗口表現(xiàn)進(jìn)行配置，頁面中配置項(xiàng)會(huì)覆蓋app.json的window中相同的配置項(xiàng)。新設(shè)置的選項(xiàng)只會(huì)顯示在當(dāng)前頁面上，不會(huì)影響其他頁面。WXML（WeiXinMarkupLanguage）是框架設(shè)計(jì)的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)。Wxml文件主要具有數(shù)據(jù)綁定、列表渲染、條件渲染、模板和引用的能力。具體的能力如何使用會(huì)在后面章節(jié)中涉及時(shí)做介紹。文件類型必需作用js是頁面邏輯wxml是頁面結(jié)構(gòu)json否頁面配置wxss否頁面樣式表頁面文件WXSS(WeiXinStyleSheets)是一套樣式語言，用于描述WXML的組件樣式。在頁面文件中只要用于設(shè)置當(dāng)前的樣式效果，該文件中規(guī)定的樣式會(huì)覆蓋app.wxss全局樣式中產(chǎn)生沖突的規(guī)定，但不會(huì)影響其他頁面。小程序開發(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ā)入門知識(shí)點(diǎn)小程序開發(fā)小程序基本開發(fā)是基于MVC，即模型、視圖和控制器。模型層在這里體現(xiàn)的不是很明顯，大部分時(shí)候都以全局變量或頁面局部變量的形式存在，一般存在于控制器中。視圖由.wxml文件所表示，它將控制器得到的數(shù)據(jù)和wxml文件進(jìn)行組合和渲染。而視圖與控制器的交互通過綁定事件的形式觸發(fā)控制器各個(gè)函數(shù)的執(zhí)行，大部分事件會(huì)傳遞目標(biāo)節(jié)點(diǎn)對(duì)象作為其參數(shù)。當(dāng)新建項(xiàng)目時(shí)，會(huì)建立小程序主控制邏輯與配置文件，其中包括app.js(控制小程序邏輯，響應(yīng)生命周期回掉函數(shù)操作，全局變量的定義等)，此文件用于注冊(cè)小程序；app.json(小程序窗口，特性配置等，像下拉刷新，導(dǎo)航欄配置，tabBar等)；app.wxss(樣式配置)。接下來具體的頁面操作才是和用戶交互的真正載體，每個(gè)頁面都單獨(dú)存放一個(gè)文件夾，方便管理，同時(shí)WAService會(huì)將此文件夾中的頁面樣式文件進(jìn)行渲染。每個(gè)頁面都由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

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

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

修改完上述值，會(huì)發(fā)現(xiàn)界面發(fā)生改變，如圖所示。小程序開發(fā)Helloworld小程序中涉及到的是簡單的數(shù)據(jù)綁定，數(shù)據(jù)綁定使用Mustache語法（雙大括號(hào)）將變量包起來，該項(xiàng)目中主要作用于內(nèi)容，作用于內(nèi)容的代碼如下：數(shù)據(jù)綁定2小程序開發(fā)注：js文件中，在page方法的data數(shù)組中定義了message變量，并給message附上初始值’HelloMINA!’，然后在wxml文件中使用{{message}}，將message的值顯示在界面上。以上為數(shù)據(jù)綁定的例子?；氐絟elloworld小程序項(xiàng)目中，其中{{motto}}的值為HelloWorld，userInfo為數(shù)組，主要存儲(chǔ)了用戶的信息，{{userInfo.avatarUrl}}和{{userInfo.nickName}}分別為微信用戶的頭像和昵稱，如左圖所示2.1小程序開發(fā)接下來可以修改一下js文件中motto的值，如圖1所示，修改后效果圖如圖2所示。2.2小程序開發(fā)再修改一下動(dòng)態(tài)獲取的昵稱，如圖所示，在/pages/index目錄下，修改index.wxml文件。2.3小程序開發(fā)小程序開發(fā)將{{userInfo.nickName}}改為你想要的任何名字，如圖所示，然后編譯。2.4示例結(jié)果給helloworld小程序添加一個(gè)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ā)這邊給大家推薦一個(gè)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:打開方式不對(duì)C:沒有關(guān)閉防火墻D:網(wǎng)絡(luò)故障3.微信小程序新建項(xiàng)目提示Error:{"ret":80203,"errmsg":""}的原因可能是（）。A:選擇了小程序云開發(fā)B:不使用云開發(fā)或者建立普通快速啟動(dòng)模板C:中文命名項(xiàng)目D:目錄沒有選在D盤4.創(chuàng)建tabBar，讀取圖片失敗不可能的原因是（）。A:tabBar的pagepath不正確B:tabBar的iconPath不正確C:tabBar的selectedPath不正確D:tabBar的text使用中文謝謝觀看小程序開發(fā)從入門到實(shí)踐

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

事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。1.Bindtap事件綁定小程序開發(fā)心理測試小程序中總共有4個(gè)事件，其事件處理函數(shù)對(duì)應(yīng)的事件觸發(fā)結(jié)果如表所示。事件處理函數(shù)所處頁面事件觸發(fā)結(jié)果beginAnswerindex跳轉(zhuǎn)至test頁面answerClickAtest顯示下一題，并判斷A對(duì)應(yīng)的是題庫中哪個(gè)選擇，給對(duì)應(yīng)選項(xiàng)的值+1，滿足index=20時(shí)，跳至result頁面answerClickBtest顯示下一題，并判斷B對(duì)應(yīng)的是題庫中哪個(gè)選擇，給對(duì)應(yīng)選項(xiàng)的值+1，滿足index=20時(shí)，跳至result頁面answerClickCtest顯示下一題，并判斷B對(duì)應(yīng)的是題庫中哪個(gè)選擇，給對(duì)應(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)的某個(gè)頁面wx.redirectTo關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。但是不允許跳轉(zhuǎn)到tabbar頁面wx.navigateTo保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。但是不能跳到tabbar頁面。使用wx.navigateBack可以返回到原頁面。小程序中頁面棧最多十層wx.navigateBack關(guān)閉當(dāng)前頁面，返回上一頁面或多級(jí)頁面?？赏ㄟ^getCurrentPages獲取當(dāng)前的頁面棧，決定需要返回幾層。小程序開發(fā)其中心理測試小程序中用到了wx.navigateTo和wx.redirectTo，這邊通過修改index.js中的路由來看一下兩個(gè)路由之間的區(qū)別，一開始index.js文件的事件處理函數(shù)beginAnswer中使用的是wx.navigateTo，此時(shí)test與result頁面如圖所示，進(jìn)入test和result頁面均可單擊“<”按鈕回到index頁面。test初始頁面小程序開發(fā)其中心理測試小程序中用到了wx.navigateTo和wx.redirectTo，這邊通過修改index.js中的路由來看一下兩個(gè)路由之間的區(qū)別，一開始index.js文件的事件處理函數(shù)beginAnswer中使用的是wx.navigateTo，此時(shí)test與result頁面如圖所示，進(jìn)入test和result頁面均可單擊“<”按鈕回到index頁面。result初始頁面小程序開發(fā)如果將wx.navigateTo改為wx.redirectTo，會(huì)發(fā)現(xiàn)頁面左上角的“<”不見了，無法回到index頁面test修改后頁面小程序開發(fā)如果將wx.navigateTo改為wx.redirectTo，會(huì)發(fā)現(xiàn)頁面左上角的“<”不見了，無法回到index頁面result修改后頁面小程序開發(fā)聲明變量在js中，未在data數(shù)組中定義的變量，可以通過var語句來進(jìn)行變量聲明，在聲明變量的同時(shí)也可以向變量賦值，如test.js文件中的一段代碼：3.聲明變量與變量賦值小程序開發(fā)2.變量賦值在js文件的函數(shù)中給變量賦值的方法有兩種，這里舉一個(gè)簡單的例子，首先將index.wxml文件中button的“開始測試”改為“{{msg}}”，使button中的文字變成一個(gè)變量，然后在index.js文件的data數(shù)組中添加變量msg，并賦予初值“開始測試”，最后將事件處理函數(shù)beginAnswer進(jìn)行修改，代碼如左圖所示。小程序開發(fā)如果將this.setData({})改為使用this.data.msg=‘測試結(jié)束’來改變msg變量的值，會(huì)發(fā)現(xiàn)雖然可以改變msg的值，但是頁面不會(huì)更新小程序開發(fā)this.setData是用來更新界面的，this.data是用來獲取頁面data對(duì)象的，它們都可以用于給變量賦值，如果需要查看賦值后變量的值，需要在this.setData({})語句外使用console.log()打印查看變量的值。小程序開發(fā)2.相對(duì)路徑在index.js文件中，事件處理函數(shù)beginAnswer的wx.navigateTo路由的url使用的就是相對(duì)路徑，其中“../”指的是當(dāng)前文件所在的上一級(jí)目錄，即index文件夾所在的目錄，“../test/test”指的就是index所在目錄中test文件夾中的test文件。另外“./”指的是當(dāng)前目錄，“../../”指的是當(dāng)前文件所在的上上級(jí)目錄，以此類推。絕對(duì)路徑“/pages/test/test”即為test文件所在的絕對(duì)路徑，若將url改為絕對(duì)路徑“/pages/test/test”也能實(shí)現(xiàn)頁面的跳轉(zhuǎn)。4.絕對(duì)路徑與相對(duì)路徑小程序開發(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（）中定義一個(gè)值，這邊定義為options，即可使用option.A獲取A的值，并賦值給result頁面的變量A，B、C也一樣。開發(fā)者可以嘗試用console.log（options）打印看一下options中的值小程序開發(fā)變量賦值在js文件的函數(shù)中給變量賦值的方法有兩種，這里舉一個(gè)簡單的例子，首先將index.wxml文件中button的“開始測試”改為“{{msg}}”，使button中的文字變成一個(gè)變量，然后在index.js文件的data數(shù)組中添加變量msg，并賦予初值“開始測試”，最后將事件處理函數(shù)beginAnswer進(jì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ù)的獲?。ó惒剑﹚x.getStorageSync(stringkey)數(shù)據(jù)的獲取（同步）wx.getStorageInfo(Objectobject)存儲(chǔ)信息的獲?。ó惒剑﹚x.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屬性wxss屬性介紹rpx（responsivepixel）:可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在iPhone6上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。屬性名類型說明srcString圖片資源地址modeString圖片裁剪、縮放的模式binderrorHandleEvent當(dāng)錯(cuò)誤發(fā)生時(shí)，發(fā)布到AppService的事件名，事件對(duì)象event.detail={errMsg:'somethingwrong'}bindloadHandleEvent當(dāng)圖片載入完畢時(shí)，發(fā)布到AppService的事件名，事件對(duì)象event.detail={height:'圖片高度px',width:'圖片寬度px'}設(shè)備rpx換算px(屏幕寬度/750)px換算rpx(750/屏幕寬度)iPhone51rpx=0.42px1px=2.34rpxiPhone61rpx=0.5px1px=2rpxiPhone6Plus 1rpx=0.552px1px=1.81rpx注：image組件默認(rèn)寬度300px、高度225px感謝觀看小程序開發(fā)從入門到實(shí)踐知識(shí)點(diǎn)修改我的信息模塊開發(fā)MyInfo頁面調(diào)整知識(shí)點(diǎn)小程序開發(fā)1.性別信息顯示調(diào)整仔細(xì)看我的頁面，發(fā)現(xiàn)“性別”這一欄顯示的是2，而不是男或女由于性別是微信從用戶所注冊(cè)的微信中獲取的，并且以數(shù)字方式保存在數(shù)據(jù)庫中，所以需要在myinfo.js的data{}中設(shè)一個(gè)數(shù)組來顯示用戶的性別信息，其中0對(duì)應(yīng)“保密”、1對(duì)

應(yīng)“男”、2對(duì)應(yīng)“女”小程序開發(fā)修改：myinfo,wxml中“性別”一欄對(duì)應(yīng)的變量從{{userinfo.sex}}變?yōu)閧{sex_array[userinfo.sex]}}，這樣我的頁面就可以正常顯示性別了

如左圖所示小程序開發(fā)2.增加頁面跳轉(zhuǎn)

在點(diǎn)擊需要修改的信息時(shí)，進(jìn)入修改我的信息頁面。其中我的頁面的樣式選擇的是帶說明、跳轉(zhuǎn)的列項(xiàng)表

因此用到了navigator組件。navigator跳轉(zhuǎn)分為兩個(gè)狀態(tài)，一種是關(guān)閉當(dāng)前頁面，一種是不關(guān)閉當(dāng)前頁面。屬性類型默認(rèn)值說明urlstring

應(yīng)用內(nèi)的跳轉(zhuǎn)鏈接；open-typestringnavigator跳轉(zhuǎn)方式；hover-classstringnavigator-hover指定點(diǎn)擊時(shí)的樣式類，當(dāng)hover-class=”none”時(shí)，點(diǎn)擊效果；值說明navigate對(duì)應(yīng)wx.navigateTo或wx.navigateToMiniProgram的功能redirect對(duì)應(yīng)wx.redirectTo的功能switchTab對(duì)應(yīng)wx.switchTab的功能reLaunch對(duì)應(yīng)wx.reLaunch的功能navigateBack對(duì)應(yīng)wx.navigateBack的功能exit退出小程序，target="miniProgram"時(shí)生效

open-type的合法值navigator組件屬性小程序開發(fā)2.增加頁面跳轉(zhuǎn)因此要完成頁面跳轉(zhuǎn)，只需要給navigator組件的url屬性添加跳轉(zhuǎn)鏈接，使得點(diǎn)擊需要修改的信息時(shí)，跳轉(zhuǎn)至change頁面，以“姓名”為例。其中跳轉(zhuǎn)路徑中帶了changWhat參數(shù)，且changWhat=name，實(shí)現(xiàn)帶參跳轉(zhuǎn)，以便后續(xù)識(shí)別修改的是什么信息。另外手機(jī)號(hào)、性別、學(xué)校、學(xué)號(hào)和入學(xué)年份的跳轉(zhuǎn)路徑中的changeWhat參數(shù)的值分別為tel、sex、school、num和enter_year。小程序開發(fā)2.增加頁面跳轉(zhuǎn)關(guān)于頭像信息的修改，豆豆云助教中暫不支持修改頭像的功能，因此“頭像”的navigator組件中的url屬性就不需要了，另外給它添加一個(gè)bindtap的事件處理函數(shù)，使得點(diǎn)擊頭像時(shí)，提示“頭像暫不支持修改”，但是刪了url屬性之后，單擊“頭像”按鈕時(shí)，會(huì)報(bào)錯(cuò)，如圖所示。這是由于navigator組件中open-type屬性默認(rèn)值為“navigate”，對(duì)應(yīng)的是wx.navigateTo的功能，使用navigateTo是需要有“url”屬性。navigator組件報(bào)錯(cuò)小程序開發(fā)2.增加頁面跳轉(zhuǎn)因此將navigator組件改為view組件，具體代碼如下。myinfo.wxml文件：小程序開發(fā)2.增加頁面跳轉(zhuǎn)因此將navigator組件改為view組件，具體代碼如下。小程序開發(fā)其中myinfo.js文件中涉及到了兩個(gè)知識(shí)點(diǎn)，分別是wx.showToast()和方法調(diào)用。wx.showToast()wx.showMaodel()一樣是界面交互中的一種消息提示框，其屬性詳見左邊所示表格。屬性類型默認(rèn)值必填說明titlestring

是提示內(nèi)容iconstring‘success’否圖標(biāo)imagestring

否自定義圖標(biāo)的本地路徑，image的優(yōu)先級(jí)高于icondurationnumber1500否提示的延遲時(shí)間maskbooleanfalse否是否顯示透明蒙層，防止觸摸穿透successfunction

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

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

否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）wx.showToast()屬性小程序開發(fā)其中icon的合法值詳見左邊表格值說明success顯示成功圖標(biāo)，此時(shí)title文本最多顯示7個(gè)漢字長度loading顯示加載圖標(biāo)，此時(shí)title文本最多顯示7個(gè)漢字長度none不顯示圖標(biāo)，此時(shí)title文本最多可顯示兩行，1.9.0及以上版本支持小程序開發(fā)當(dāng)icon取值不同時(shí)，消息提示框提示顯示圖標(biāo)不同，開發(fā)者可以根據(jù)自己的需求選擇不同的icon值，如圖所示。圖icon值為none圖icon值為success圖icon值為loading小程序開發(fā)2.方法調(diào)用在myinfo.js文件中openAlert為自定義的一個(gè)方法，該方法中含有一個(gè)參數(shù)e，用于顯示消息提示框的標(biāo)題即title，且該方法實(shí)現(xiàn)的是顯示消息提示框的功能。方法定義后，調(diào)用該方法時(shí)，需要使用“this.方法名”即this.openAlert調(diào)用方法，myinfo.js中的事件處理函數(shù)choseImage中，調(diào)用openAlert方法，實(shí)現(xiàn)點(diǎn)擊頭像時(shí)，觸發(fā)choseImage函數(shù)，彈出消息提示框。其中“頭像暫不支持修改”為openAlert方法中參數(shù)e的值。change頁面實(shí)現(xiàn)知識(shí)點(diǎn)小程序開發(fā)Change頁面布局change頁面的也相對(duì)簡單，只要一個(gè)簡單的文本框即可，頁面最終效果，如圖所示。change頁面最終效果圖

WeUI樣式庫中相似樣式小程序開發(fā)Change頁面布局將這兩個(gè)表單輸入的樣式對(duì)應(yīng)的wxml文件代碼，拷貝至doudouyun項(xiàng)目中，具體代碼如下。小程序開發(fā)Change頁面邏輯為了用戶的使用友好性，需要對(duì)change頁面的輸入框的placeholder與導(dǎo)航欄標(biāo)題文字進(jìn)行處理，使得用戶進(jìn)入修改頁面時(shí)，可以從placeholder與導(dǎo)航標(biāo)題中了解自己需要修改的是什么信息。另外在輸入框中顯示用戶原本的信息，以便用戶在修改信息時(shí)可以看到原本的信息，在原有信息基礎(chǔ)上進(jìn)行修改，具體效果如圖所示。小程序開發(fā)Change頁面邏輯對(duì)change頁面的頁面參數(shù)進(jìn)行處理，實(shí)現(xiàn)placeholder與title值的顯示。另外由于頁面參數(shù)中changeWhat的值均為英文，因此需要在data數(shù)組中增加一個(gè)infoArray數(shù)組，實(shí)現(xiàn)中英轉(zhuǎn)換。由于性別信息的特殊性，需要增加一個(gè)sex_array數(shù)組，部分代碼如左圖所示。小程序開發(fā)添加事件處理函數(shù)change頁面中需要添加兩個(gè)事件處理函數(shù)，分別添加在input組件和“保存”所在的view組件中，如圖4–8所示。小程序開發(fā)添加事件處理函數(shù)valuechange函數(shù)valuechange函數(shù)的主要作用是保存用戶修改信息時(shí)修改后的信息，因此需要在data數(shù)組中添加一個(gè)臨時(shí)變量tmp，初始值為空，用于存儲(chǔ)修改后的信息，具體代碼如下小程序開發(fā)2.submit函數(shù)submit函數(shù)的主要作用是向后臺(tái)提交修改后的信息，并更新數(shù)據(jù)庫，因此這里需要使用wx.request()向后臺(tái)發(fā)起請(qǐng)求，需要向后臺(tái)發(fā)送的數(shù)據(jù)有openid、change和value。添加事件處理函數(shù)配置文件的使用知識(shí)點(diǎn)小程序開發(fā)所有的wx.request()請(qǐng)求，url的網(wǎng)址都有很多共同之處，所以把共同之處作為一個(gè)宏進(jìn)行定義，后面維護(hù)起來方便修改與遷移。具體做法：新建config.js用作配置文件小程序開發(fā)在需要調(diào)用時(shí)引入，這里只舉1例配置文件中相應(yīng)數(shù)據(jù)的調(diào)用謝謝觀看小程序開發(fā)從入門到實(shí)踐知識(shí)點(diǎn)課程頁面模塊開發(fā)申請(qǐng)課程號(hào)知識(shí)點(diǎn)小程序開發(fā)申請(qǐng)課程號(hào)由于照搬了豆豆云的后臺(tái)，因此涉及到“加入課程”的概念，開發(fā)者需要向后臺(tái)申請(qǐng)一個(gè)課程，得到課程號(hào)，申請(qǐng)鏈接如下：/index.php/Api/User/createCourse?appid=123&courseName=1028教學(xué)&questionSet=1012&creater=大佬appid代表開發(fā)者小程序的appid，courseName代表要?jiǎng)?chuàng)建的課程的名字，開發(fā)者可自定義，questionSet代表實(shí)現(xiàn)預(yù)設(shè)的題目集（后續(xù)無法更改），creater代表創(chuàng)建者。小程序開發(fā)申請(qǐng)課程號(hào)其中對(duì)questionSet的題目集，后臺(tái)提供了8個(gè)題目集供開發(fā)者選擇，具體詳見表

題目集id題目集名稱題目數(shù)量1001近代史題庫12871002浙江工商大學(xué)新生入學(xué)考試題庫12761003計(jì)算機(jī)網(wǎng)絡(luò)題庫2191008C語言二級(jí)模擬考試題庫1201009毛概題庫17661010C語言訓(xùn)練題13951011馬克思主義基本原理概論20591012思修道德修養(yǎng)與法律基礎(chǔ)1561課程模塊頁面布局知識(shí)點(diǎn)小程序開發(fā)課程信息模塊頁面布局1.課程信息模塊主要包括課程名稱、課程創(chuàng)建者、加入課程的人數(shù)以及課程號(hào)2.對(duì)于課程信息模塊的頁面布局，同樣可以參考WeUI樣式中表單-List-帶圖標(biāo)、說明的列表項(xiàng)，如圖所示。帶圖標(biāo)、說明的列表項(xiàng)小程序開發(fā)找到對(duì)應(yīng)的WeUI樣式后，將該樣式的對(duì)應(yīng)代碼復(fù)制黏貼到自己的項(xiàng)目代碼中。帶圖標(biāo)、說明的列表項(xiàng)具體代碼如下：課程信息模塊頁面布局小程序開發(fā)其中課程信息模塊wxml代碼如下：小程序開發(fā)class和style的區(qū)別在上圖中的wxml代碼中我們經(jīng)常會(huì)發(fā)現(xiàn)一個(gè)view屬性中既有class="weui-cell__hd"，又有style="position:relative;margin-right:10px;"雖然這他們都可以實(shí)現(xiàn)頁面的修改，但是兩者之間還是有區(qū)別的。比如在myinfo頁面添加一個(gè)button做測試，該button的wxml代碼如下：另外在myinfo.wxss中添加test樣式，test樣式中主要是跟style中一樣定義了字體顏色，該樣式代碼如下：小程序開發(fā)該button在style中color屬性值為藍(lán)色，class調(diào)用test樣式中color屬性值為紅色，無論如何修改test樣式中color屬性的值，按鈕字體顏色都是藍(lán)色，如圖所示。在wxml當(dāng)中前端讀取數(shù)據(jù)都是通過就近原則，所以style是直接在頁面語句中進(jìn)行編寫，在程序執(zhí)行的時(shí)候，style>class。測試button的字體顏色小程序開發(fā)2.position屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框，而不論該元素本身是什么類型。相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移。值描述absolute生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。fixed生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。relative生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。因此，"left:20"會(huì)向元素的LEFT位置添加20像素。static默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略top,bottom,left,right或者z-index聲明）。inherit規(guī)定應(yīng)該從父元素繼承position屬性的值。position屬性的值小程序開發(fā)3.margin-right屬性margin-right屬性設(shè)置元素的右外邊距，允許使用負(fù)值。margin-right屬性的值詳見表。值描述auto瀏覽器設(shè)置的右外邊距。length定義固定的右外邊距。默認(rèn)值是0。%定義基于父對(duì)象總高度的百分比右外邊距。inherit規(guī)定應(yīng)該從父元素繼承右外邊距。小程序開發(fā)修改課程練習(xí)模塊image屬性中margin-right的值為10px和100px，頁面效果如圖所示。margin-right值：10pxmargin-right值：100px小程序開發(fā)4.

display屬性display屬性規(guī)定元素應(yīng)該生成的框的類型。用于定義建立布局時(shí)元素生成的顯示框類型。對(duì)于HTML等文檔類型，如果使用display不謹(jǐn)慎會(huì)很危險(xiǎn)，因?yàn)榭赡苓`反HTML中已經(jīng)定義的顯示層次結(jié)構(gòu)。對(duì)于XML，由于XML沒有內(nèi)置的這種層次結(jié)構(gòu)，所有display是絕對(duì)必要的。display屬性的值詳見表。值描述none此元素不會(huì)被顯示。block此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。inline默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。inline-block行內(nèi)塊元素。（CSS2.1新增的值）list-item此元素會(huì)作為列表顯示。run-in此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。table此元素會(huì)作為塊級(jí)表格來顯示（類似<table>），表格前后帶有換行符。inline-table此元素會(huì)作為內(nèi)聯(lián)表格來顯示（類似<table>），表格前后沒有換行符。table-row-group此元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示（類似<tbody>）。table-header-group此元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示（類似<thead>）。table-footer-group此元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示（類似<tfoot>）。table-row此元素會(huì)作為一個(gè)表格行顯示（類似<tr>）。table-column-group此元素會(huì)作為一個(gè)或多個(gè)列的分組來顯示（類似<colgroup>）。table-column此元素會(huì)作為一個(gè)單元格列顯示（類似<col>）。table-cell此元素會(huì)作為一個(gè)表格單元格顯示（類似<td>和<th>）table-caption此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類似<caption>）inherit規(guī)定應(yīng)該從父元素繼承display屬性的值。小程序開發(fā)課程練習(xí)模塊頁面布局其中涉及到了float、box-sizing和width三種屬性。float屬性float屬性定義元素在哪個(gè)方向浮動(dòng)。任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。如果浮動(dòng)非替換元素，則要指定一個(gè)明確的寬度；否則，它們會(huì)盡可能地窄。其中float可能的值詳見表。值描述left元素向左浮動(dòng)。right元素向右浮動(dòng)。none默認(rèn)值。元素不浮動(dòng)，并會(huì)顯示在其在文本中出現(xiàn)的位置。inherit規(guī)定應(yīng)該從父元素繼承float屬性的值。小程序開發(fā)2.box-sizing屬性box-sizing屬性允許以特定的方式定義匹配某個(gè)區(qū)域的特定元素。例如，假如需要并排放置兩個(gè)帶邊框的框，可通過將box-sizing設(shè)置為"border-box"。這可令頁面呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。其中box-sizing屬性的值詳見表。值描述content-box寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。border-box為元素設(shè)定的寬度和高度決定了元素的邊框盒。就是說，為元素指定