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

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

“編輯”下拉菜單

“設置”下拉菜單

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

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

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

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

networkTimeoutObject否網絡超時時間

debugboolean否是否開啟debug模式，默認關閉

functionalPagesboolean否是否啟用插件功能頁，默認關閉2.1.0subpackagesObject[]否分包結構配置1.7.3workersstring否Worker代碼放置目錄1.9.90requireBackgroundModesstring[]否需要在后臺使用能力，如[音樂播放]

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

navigationBarTextStylestringwhite導航欄標題顏色，僅支持black/white

navigationBarTitleTextstring

導航欄標題文字內容

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

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

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

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

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

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

tab上的文字默認顏色，僅支持十六進制顏色selectedColorHexColor是

tab上的文字選中時的顏色，僅支持十六進制顏色backgroundColorHexColor是

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

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

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

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

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

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

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

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

否請求參數(shù)headerobject

否設置請求的header，header中不能設置Referer。content-type默認為application/jsonmethodstringGET否HTTP請求方法dataTypestringjson否返回的數(shù)據格式responseTypestringtext否響應的數(shù)據類型successfunction

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

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

否接口調用結束的回調函數(shù)（調用成功失敗都會執(zhí)行）3.wx.login()小程序開發(fā)每個微信小程序都可以有自己的本地緩存，可以通過數(shù)據緩存API可以對本地緩存進行設置、獲取和清理。同一個微信用戶，同一個小程序storage上限為10MB。localStorage以用戶維度隔離，同一臺設備上，A用戶無法讀取到B用戶的數(shù)據。注意：如果用戶儲存空間不足，微信會清空最近最久未使用的小程序的本地緩存。因此不建議將關鍵信息全部存在localStorage，以防儲存空間不足或用戶換設備的情況。函數(shù)名說明wx.setStorage(Objectobject)數(shù)據的存儲（異步）wx.setStorageSync(stringkey,anydata)數(shù)據的存儲（同步）wx.getStorage(Objectobject)數(shù)據的獲?。ó惒剑﹚x.getStorageSync(stringkey)數(shù)據的獲取（同步）wx.getStorageInfo(Objectobject)存儲信息的獲?。ó惒剑﹚x.getStorageInfoSync()存儲信息的獲?。ㄍ剑﹚x.removeStorage(Objectobject)數(shù)據的移除（異步）wx.removeStorageSync(stringkey)數(shù)據的移除（同步）wx.clearStorage(Objectobject)數(shù)據的清空（異步）wx.clearStorageSync()數(shù)據的清空（同步）4.數(shù)據緩存數(shù)據緩存API函數(shù)類型小程序開發(fā)屬性類型默認值必填說明titlestring

是提示的標題contentstring

是提示的內容showCancelbooleantrue否是否顯示取消按鈕cancelTextstring‘取消’否取消按鈕的文字，最多4個字符cancelColorstring#000000否取消按鈕的文字顏色，必須是16進制格式的顏色字符串confirmTextstring‘確定’否確認按鈕的文字，最多4個字符confirmColorstring#576B95否確認按鈕的文字顏色，必須是16進制格式的顏色字符串successfunction

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

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

否接口調用結束的回調函數(shù)（調用成功、失敗都會執(zhí)行）其中success回調函數(shù)的返回參數(shù)屬性類型說明最低版本confirmboolean為true時，表示用戶點擊了確定按鈕

cancelboolean為true時，表示用戶點擊了取消（用于Android系統(tǒng)區(qū)分點擊蒙層關閉還是點擊取消按鈕關閉）1.0.05.wx.showModal()小程序使用wx.showModel(Objectobject)顯示模態(tài)對話框，其中object參數(shù)說明如表所示。注冊頁面知識點講解小程序開發(fā)注冊頁面知識點講解1.微信官方UI庫WeUIWeUI是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程序量身設計，令用戶的使用感知更加統(tǒng)一。包含button、article、actionsheet、icon等各式元素。WeUI基礎樣式庫下載地址：/Tencent/weui-wxss。開發(fā)者可以將樣式庫下載并使用微信web開發(fā)者工具打開dist目錄，導入dist目錄后，可以預覽樣式庫小程序開發(fā)微信官方UI庫WeUI開發(fā)者可以在樣式庫里選擇自己所需要的樣式，然后直接將需要的樣式的wxml復制黏貼至自己的項目中，然后將WeUI中style文件拷貝至自己的項目目錄中，如將圖目錄下style文件夾拷貝至圖3–19目錄下。小程序開發(fā)將style文件夾拷貝至自己開發(fā)的項目后，還需要在app.wxss文件中使用@import導入weui的樣式，如圖3–20所示。到這里，就可以正常使用WeUI庫中微信的官方樣式了。微信官方UI庫WeUI小程序開發(fā)2.bindchange事件bindchange事件與bindtap事件不同，它主要是當輸入框中的內容發(fā)生改變時，觸發(fā)對應的事件處理函數(shù)，并且輸入框中的值可以通過event.detail.value來獲取,例如如下事例：wxml文件代碼：小程序開發(fā)2.bindchange事件bindchange事件與bindtap事件不同，它主要是當輸入框中的內