微信小程序開發(fā)實(shí)戰(zhàn)（第2版）全套PPT完整教學(xué)課件

第1章微信小程序入門《微信小程序開發(fā)實(shí)戰(zhàn)（第2版）》第1章微信小程序入門.pptx第2章微信小程序頁面制作.pptx第3章微信小程序頁面交互.pptx第4章微信小程序常用API（上）.pptx第5章微信小程序常用API（下）.pptx第6章綜合項(xiàng)目——“點(diǎn)餐”微信小程序.pptx第7章微信小程序開發(fā)進(jìn)階.pptx第8章uni-app項(xiàng)目——“短視頻”微信小程序.pptx全套PPT課件學(xué)習(xí)目標(biāo)/Target

了解微信小程序，能夠說出微信小程序的概念、特點(diǎn)、發(fā)展前景和宿主環(huán)境

掌握微信小程序開發(fā)賬號(hào)的注冊(cè)方法，能夠獨(dú)立完成微信小程序開發(fā)賬號(hào)的注冊(cè)

掌握獲取微信小程序AppID的方法，能夠從微信小程序管理后臺(tái)獲取AppID

掌握微信開發(fā)者工具的安裝方法，能夠獨(dú)立完成微信開發(fā)者工具的安裝學(xué)習(xí)目標(biāo)/Target

熟悉微信小程序的頁面組成，能夠解釋W(xué)XML、WXSS、JS和JSON文件的作用熟悉微信小程序的項(xiàng)目結(jié)構(gòu)，能夠解釋每個(gè)文件的作用掌握微信小程序項(xiàng)目的創(chuàng)建方法，能夠使用微信開發(fā)者工具創(chuàng)建項(xiàng)目

熟悉微信小程序的通信模型，能夠解釋微信小程序中渲染層、邏輯層及第三方服務(wù)器的通信方式學(xué)習(xí)目標(biāo)/Target熟悉微信開發(fā)者工具的主界面，能夠說出主界面中常用快捷按鈕的功能掌握微信小程序的項(xiàng)目設(shè)置，能夠根據(jù)需要對(duì)微信小程序進(jìn)行設(shè)置了解微信小程序開發(fā)常用快捷鍵，能夠列舉4類常用快捷鍵了解項(xiàng)目成員，能夠說出項(xiàng)目成員的組織結(jié)構(gòu)、分工和權(quán)限學(xué)習(xí)目標(biāo)/Target熟悉微信小程序發(fā)布上線的流程，能夠歸納出微信小程序發(fā)布上線的步驟熟悉微信小程序的版本，能夠說明微信小程序的4種版本掌握添加項(xiàng)目成員和體驗(yàn)成員的方法，能夠在微信小程序管理后臺(tái)中添加項(xiàng)目成員和體驗(yàn)成員章節(jié)概述/Summary微信小程序于2017年1月9日正式上線，憑借其開發(fā)成本低、微信用戶數(shù)量龐大等優(yōu)勢(shì)，得到了許多用戶的認(rèn)可，同時(shí)還為許多商家提供了商機(jī)。為了滿足人們的日常需求，微信小程序的開發(fā)技術(shù)也在不斷更新。為了讓讀者對(duì)微信小程序有一個(gè)整體的認(rèn)識(shí)，本章將對(duì)微信小程序的入門知識(shí)進(jìn)行詳細(xì)講解。目錄/Contents010203初始微信小程序微信小程序開發(fā)前準(zhǔn)備微信小程序開發(fā)基礎(chǔ)目錄/Contents040506微信開發(fā)者工具的使用微信小程序的項(xiàng)目成員微信小程序的發(fā)布上線初識(shí)微信小程序1.1了解微信小程序，能夠說出微信小程序的概念1.1.1什么是微信小程序

先定一個(gè)小目標(biāo)！1.1.1什么是微信小程序什么是微信小程序？1.1.1什么是微信小程序與傳統(tǒng)的原生應(yīng)用相比，微信小程序是一種全新的連接用戶與服務(wù)的應(yīng)用，它可以在微信內(nèi)被便捷地獲取和傳播，同時(shí)具有良好的用戶體驗(yàn)。微信小程序是運(yùn)行在微信中的應(yīng)用，是一種不需要下載即可使用的應(yīng)用，用戶通過微信掃一掃或者搜一搜即可打開，且每個(gè)微信小程序的體積非常小。了解微信小程序，能夠說出微信小程序的特點(diǎn)1.1.2微信小程序的特點(diǎn)

先定一個(gè)小目標(biāo)！1.1.2微信小程序的特點(diǎn)01020405用戶在使用微信小程序時(shí)無須安裝，直接使用，不占用存儲(chǔ)空間在使用微信小程序后，可以用完即走，無須卸載某一個(gè)名稱被注冊(cè)后，另一個(gè)微信小程序?qū)⒉荒苁褂孟嗤拿Q用戶可以通過多種途徑打開微信小程序，例如微信搜索、好友分享、小程序識(shí)別碼等微信小程序入口豐富，再加上基于微信生態(tài)，使得微信小程序的傳播能力強(qiáng)無須安裝、觸手可及用完即走、無須卸載名稱唯一入口豐富傳播能力強(qiáng)1.1.2微信小程序的特點(diǎn)微信小程序是繼原生應(yīng)用和HTML5應(yīng)用之后出現(xiàn)的一種新的應(yīng)用形態(tài)，從功能方面來說，與他們是競(jìng)爭(zhēng)對(duì)手。那么微信小程序與原生應(yīng)用、HTML5應(yīng)用有什么區(qū)別呢？1.1.2微信小程序的特點(diǎn)微信小程序與原生應(yīng)用的對(duì)比如下表。對(duì)比項(xiàng)微信小程序原生應(yīng)用下載安裝無須下載和安裝從iOS和Android應(yīng)用商店中下載體積大小體積小體積大跨平臺(tái)可以跨平臺(tái)不可以跨平臺(tái)開發(fā)成本較低較高推廣成本較低較高1.1.2微信小程序的特點(diǎn)微信小程序與HTML5應(yīng)用的對(duì)比如下表。對(duì)比項(xiàng)微信小程序HTML5應(yīng)用運(yùn)行環(huán)境運(yùn)行在微信上運(yùn)行在瀏覽器上用戶體驗(yàn)較流暢實(shí)際上是打開一個(gè)網(wǎng)頁，流暢度略差接口成本可以大量應(yīng)用API可用API較少了解微信小程序，能夠說出微信小程序的發(fā)展前景1.1.3微信小程序的發(fā)展前景

先定一個(gè)小目標(biāo)！1.1.3微信小程序的發(fā)展前景目前，微信小程序已經(jīng)形成了自己的生態(tài)體系，它連接了開發(fā)者、運(yùn)營(yíng)者、投資者等各領(lǐng)域的企業(yè)，并且接入了多個(gè)第三方服務(wù)的平臺(tái)。微信小程序已經(jīng)進(jìn)入到了一個(gè)快速發(fā)展的階段，未來的發(fā)展空間也越來越大。生態(tài)體系在發(fā)展過程中，微信小程序不斷自我完善，為開發(fā)者開放了越來越多的接口，它可以適用于大多數(shù)的用戶和場(chǎng)景，還可以方便開發(fā)者進(jìn)行深度挖掘。同時(shí)，微信為小程序提供了越來越多的開放功能，例如微信掃碼、微信支付、地理定位等，這對(duì)微信小程序的發(fā)展也會(huì)起到推動(dòng)作用。開放能力目前，微信小程序已經(jīng)積累了大量用戶，用戶黏性高，使其他行業(yè)與微信用戶有更好的連接，能夠更好地與微信結(jié)合。用戶黏性微信小程序的發(fā)展前景了解微信小程序，能夠說出微信小程序的宿主環(huán)境1.1.4微信小程序的宿主環(huán)境

先定一個(gè)小目標(biāo)！1.1.4微信小程序的宿主環(huán)境什么是宿主環(huán)境呢？1.1.4微信小程序的宿主環(huán)境宿主環(huán)境（HostEnvironment）是指程序運(yùn)行所依賴的環(huán)境。例如，iOS系統(tǒng)和Android系統(tǒng)提供了兩種不同的宿主環(huán)境，微信、微博等應(yīng)用都需要依賴宿主環(huán)境才能運(yùn)行，如下圖。1.1.4微信小程序的宿主環(huán)境微信小程序可以跨平臺(tái)，這是因?yàn)槲⑿判〕绦虿⒉皇且粋€(gè)直接安裝在Android系統(tǒng)或iOS系統(tǒng)中的應(yīng)用，而是運(yùn)行在微信客戶端上的應(yīng)用。微信客戶端給微信小程序提供的環(huán)境就是微信小程序的宿主環(huán)境。Android系統(tǒng)的應(yīng)用不能在iOS系統(tǒng)中運(yùn)行，iOS系統(tǒng)的應(yīng)用也不能在Android系統(tǒng)中運(yùn)行。因此，脫離了宿主環(huán)境的軟件是沒有任何意義的。1.1.4微信小程序的宿主環(huán)境微信小程序在Android系統(tǒng)和iOS系統(tǒng)中的宿主環(huán)境如下圖。1.1.4微信小程序的宿主環(huán)境組件：用于快速搭建頁面的結(jié)構(gòu)。微信小程序的組件包括視圖容器、基礎(chǔ)內(nèi)容、表單、導(dǎo)航、媒體、地圖、畫布、開放能力等。API：用于讓開發(fā)者方便地調(diào)用微信提供的功能，例如獲取用戶信息、微信登錄、微信支付等。微信小程序的宿主環(huán)境為微信小程序提供了豐富的組件和API（ApplicationProgramInterface，應(yīng)用程序接口），具體解釋如下。微信小程序開發(fā)前準(zhǔn)備1.2掌握微信小程序開發(fā)賬號(hào)的注冊(cè)方法，能夠獨(dú)立完成微信小程序開發(fā)賬號(hào)的注冊(cè)1.2.1注冊(cè)微信小程序開發(fā)賬號(hào)

先定一個(gè)小目標(biāo)！1.2.1注冊(cè)微信小程序開發(fā)賬號(hào)步驟1步驟2步驟3步驟4使用瀏覽器訪問微信公眾平臺(tái)的官方網(wǎng)站1.2.1注冊(cè)微信小程序開發(fā)賬號(hào)單擊步驟1圖片中“立即注冊(cè)”鏈接，即可進(jìn)入開發(fā)賬號(hào)的注冊(cè)頁面，在該頁面中可選擇注冊(cè)的賬號(hào)類型。步驟2步驟1步驟3步驟4選擇注冊(cè)的賬號(hào)類型1.2.1注冊(cè)微信小程序開發(fā)賬號(hào)單擊步驟2圖片中的“小程序”鏈接，跳轉(zhuǎn)到小程序注冊(cè)頁面。步驟3步驟2步驟1步驟4跳轉(zhuǎn)到小程序注冊(cè)頁面1.2.1注冊(cè)微信小程序開發(fā)賬號(hào)步驟4步驟2步驟1步驟3賬號(hào)信息的填寫在步驟3小程序注冊(cè)頁面根據(jù)提示填入自己的郵箱、密碼、確認(rèn)密碼等，完成賬號(hào)信息的填寫。1.2.1注冊(cè)微信小程序開發(fā)賬號(hào)單擊步驟3圖片中的“注冊(cè)”按鈕，進(jìn)入提示郵箱激活頁面。郵箱激活頁面步驟5步驟6步驟7步驟81.2.1注冊(cè)微信小程序開發(fā)賬號(hào)單擊步驟4圖片中的“登錄郵箱”按鈕，查看收到的賬號(hào)激活鏈接。查看激活鏈接步驟6步驟5步驟7步驟81.2.1注冊(cè)微信小程序開發(fā)賬號(hào)單擊步驟6中激活賬號(hào)的鏈接，將跳轉(zhuǎn)到用戶信息登記頁面，根據(jù)頁面提示進(jìn)行用戶信息登記。用戶信息登記步驟7步驟6步驟5步驟81.2.1注冊(cè)微信小程序開發(fā)賬號(hào)填寫完用戶相關(guān)信息后，單擊“繼續(xù)”按鈕，進(jìn)入微信小程序管理后臺(tái)。微信小程序開發(fā)賬號(hào)注冊(cè)完成。注冊(cè)完成步驟8步驟6步驟5步驟7掌握獲取微信小程序AppID的方法，能夠從微信小程序管理后臺(tái)獲取AppID1.2.2獲取微信小程序AppID

先定一個(gè)小目標(biāo)！1.2.2獲取微信小程序AppID在微信小程序中，AppID又稱為小程序ID，是每個(gè)小程序的唯一標(biāo)識(shí)，每個(gè)小程序賬號(hào)只有一個(gè)AppID，因此每個(gè)賬號(hào)只能發(fā)布一個(gè)小程序，如果要發(fā)布多個(gè)小程序，需要注冊(cè)多個(gè)小程序賬號(hào)。1.2.2獲取微信小程序AppID如何獲取微信小程序AppID？1.2.2獲取微信小程序AppID登錄微信小程序管理后臺(tái)在左側(cè)邊欄中選擇“開發(fā)管理”選擇“開發(fā)設(shè)置”查看并復(fù)制APPID掌握微信開發(fā)者工具的安裝方法，能夠獨(dú)立完成微信開發(fā)者工具的安裝1.2.3安裝微信開發(fā)者工具

先定一個(gè)小目標(biāo)！1.2.3安裝微信開發(fā)者工具在微信小程序管理后臺(tái)的左側(cè)邊欄中選擇“開發(fā)工具”，然后選擇“開發(fā)者工具”，即可找到微信開發(fā)者工具的下載頁面。打開微信開發(fā)者工具下載頁面步驟1步驟2步驟3步驟41.2.3安裝微信開發(fā)者工具單擊“下載”按鈕下載，即可跳轉(zhuǎn)到微信開發(fā)者工具的下載鏈接頁面。打開微信開發(fā)者工具的下載鏈接頁面步驟2步驟1步驟3步驟41.2.3安裝微信開發(fā)者工具本書以穩(wěn)定版為例進(jìn)行講解，單擊穩(wěn)定版的"Windows64"鏈接下載該版本的微信開發(fā)者工具安裝包，安裝包名稱為"wechat_devtools_l.06.2206090_win32_x64.exe"。下載微信開發(fā)者工具步驟3步驟2步驟1步驟41.2.3安裝微信開發(fā)者工具雙擊微信開發(fā)者工具的安裝包，進(jìn)入微信開發(fā)者工具的安裝向?qū)?。安裝微信開發(fā)者工具步驟4步驟2步驟1步驟31.2.3安裝微信開發(fā)者工具讀者根據(jù)安裝導(dǎo)向進(jìn)行操作，即可完成微信開發(fā)者工具的安裝。微信開發(fā)者工具安裝步驟4步驟2步驟1步驟3掌握微信小程序項(xiàng)目的創(chuàng)建方法，能夠使用微信開發(fā)者工具創(chuàng)建項(xiàng)目1.2.4創(chuàng)建微信小程序項(xiàng)目

先定一個(gè)小目標(biāo)！1.2.4創(chuàng)建微信小程序項(xiàng)目首次打開微信開發(fā)者工具時(shí)，會(huì)出現(xiàn)一個(gè)登錄界面，如下圖所示。在登錄界面中，可以使用微信掃碼登錄微信開發(fā)者工具，微信開發(fā)者工具將使用這個(gè)微信賬號(hào)的信息進(jìn)行微信小程序的開發(fā)和調(diào)試。步驟1步驟2步驟3登錄微信開發(fā)者工具1.2.4創(chuàng)建微信小程序項(xiàng)目使用微信掃碼登錄成功后會(huì)進(jìn)入微信開發(fā)者工具的項(xiàng)目選擇界面。步驟2步驟1步驟3進(jìn)入微信小程序的啟動(dòng)頁1.2.4創(chuàng)建微信小程序項(xiàng)目單擊步驟2中圖片的“+”可以進(jìn)入微信小程序項(xiàng)目的創(chuàng)建界面，將內(nèi)容填寫完成后，單擊“確定”按鈕創(chuàng)建微信小程序項(xiàng)目。步驟3步驟2步驟1創(chuàng)建微信小程序項(xiàng)目微信開發(fā)者工具安裝1.2.4創(chuàng)建微信小程序項(xiàng)目在微信小程序項(xiàng)目的創(chuàng)建界面中，讀者可以自定義項(xiàng)目名稱和目錄，如填寫項(xiàng)目名稱為“HELLO”，目錄為“D:\miniprogram\hello”。關(guān)于AppID、開發(fā)模式、后端服務(wù)和模板選擇的具體解釋如下。AppID：填寫1.2.2小節(jié)獲取的AppID即可。如果不想使用自己的AppID，也可以使用測(cè)試號(hào)，二者的區(qū)別是，前者能夠使用的功能比后者多，例如代碼的上傳和發(fā)布。1.2.4創(chuàng)建微信小程序項(xiàng)目開發(fā)模式：有“小程序”和“插件”兩種選擇，由于我們要?jiǎng)?chuàng)建一個(gè)微信小程序項(xiàng)目，所以此處應(yīng)選擇“小程序”。后端服務(wù)：有“微信云開發(fā)”和“不使用云服務(wù)”兩種選擇。在“微信云開發(fā)”中，開發(fā)者無須搭建服務(wù)器，即可使用云函數(shù)、云數(shù)據(jù)庫、云存儲(chǔ)以及微信云托管等完整云端能力。模板選擇：微信開發(fā)者工具提供了多種模板用于快速創(chuàng)建微信小程序項(xiàng)目。1.2.4創(chuàng)建微信小程序項(xiàng)目多學(xué)一招：微信開發(fā)者工具的外觀設(shè)置微信開發(fā)者工具允許用戶對(duì)其進(jìn)行外觀設(shè)置，包括主題、調(diào)試器主題和自定義外觀。默認(rèn)的主題為深色，如果想設(shè)置為其他顏色，更換選項(xiàng)即可。1.2.4創(chuàng)建微信小程序項(xiàng)目多學(xué)一招：微信開發(fā)者工具的外觀設(shè)置首先單擊微信小程序項(xiàng)目選擇界面中的“”進(jìn)入設(shè)置頁面，然后在彈出的設(shè)置頁面中單擊“外觀”選項(xiàng)進(jìn)入外觀設(shè)置頁面，最后在主題下的單選框中選擇需要更換的顏色。外觀設(shè)置頁面如下圖。微信小程序開發(fā)基礎(chǔ)1.3熟悉微信小程序的項(xiàng)目結(jié)構(gòu)，能夠解釋每個(gè)文件的作用1.3.1微信小程序的項(xiàng)目結(jié)構(gòu)

先定一個(gè)小目標(biāo)！1.3.1微信小程序的項(xiàng)目結(jié)構(gòu)微信小程序項(xiàng)目創(chuàng)建完成后，微信開發(fā)者工具會(huì)自動(dòng)創(chuàng)建微信小程序的項(xiàng)目結(jié)構(gòu)，如下圖所示。1.3.1微信小程序的項(xiàng)目結(jié)構(gòu)pages：用于存放微信小程序的所有頁面。.eslintrc.js：用于格式化代碼，使代碼風(fēng)格保持一致。app.js：微信小程序的入口文件，用于描述微信小程序的整體邏輯。app.json：微信小程序的全局配置文件，用于設(shè)置頁面路徑、窗口外觀、頁面表現(xiàn)、標(biāo)簽欄等。app.wxss：微信小程序的全局樣式文件，文件可以為空。project.config.json：在微信開發(fā)者工具上做的任何配置都會(huì)寫入這個(gè)文件中，當(dāng)重新安裝工具或者更換計(jì)算機(jī)工作時(shí)，只要栽入同一個(gè)項(xiàng)目的代碼包，微信開發(fā)者工具會(huì)根據(jù)該文件自動(dòng)恢復(fù)成開發(fā)微信小程序時(shí)的個(gè)性化配置。1.3.1微信小程序的項(xiàng)目結(jié)構(gòu)project.private.config.json：用于保存微信開發(fā)者工具的私人配置，配置的優(yōu)先級(jí)高于project.config.json。sitemap.json：用于配置微信小程序及其頁面是否允許被微信索引，如果沒有該文件，則默認(rèn)為所有頁面都允許被索引。微信現(xiàn)已開放微信小程序頁面的搜索，也就是說微信小程序里面的內(nèi)容也能被微信搜索引擎搜索到。當(dāng)開發(fā)者允許微信小程序頁面被微信索引時(shí)，微信會(huì)通過爬蟲的形式，為微信小程序的頁面建立索引。當(dāng)用戶的搜索詞條觸發(fā)該索引時(shí)，微信小程序的鏈接地址將可能展示在搜索結(jié)果中。1.3.1微信小程序的項(xiàng)目結(jié)構(gòu)在微信客戶端中啟動(dòng)微信小程序的步驟。把整個(gè)微信小程序的代碼包下載到本地。解析app.json全局配置文件，通過該文件解析出微信小程序的所有頁面路徑。執(zhí)行app.js入口文件，調(diào)用App()函數(shù)創(chuàng)建微信小程序的實(shí)例。渲染微信小程序的首頁。熟悉微信小程序的頁面組成，能夠解釋W(xué)XML、WXSS、JS和JSON文件的作用1.3.2微信小程序的頁面組成

先定一個(gè)小目標(biāo)！1.3.2微信小程序的頁面組成一個(gè)微信小程序是由一個(gè)或多個(gè)頁面組成的，這些頁面被存放在pages目錄中。下面以pages目錄下的index頁面為例展示其組成部分，index頁面的組成部分如下圖所示。由上圖可知，index頁面由4個(gè)文件組成，分別是index.js、index.json、index.wxml和index.wxss。1.3.2微信小程序的頁面組成微信小程序頁面的index.js、index.json、index.wxml和index.wxss文件分別使用JS、JSON、WXML和WXSS語言編寫，關(guān)于這4種語言的你了解多少呢？1.3.2微信小程序的頁面組成JS：類似網(wǎng)頁制作中的JavaScript語言，用于實(shí)現(xiàn)頁面邏輯和交互，文件擴(kuò)展名為.js。需要注意的是，微信小程序中的JS不含DOM和BOM，但它提供了豐富的API，可以實(shí)現(xiàn)許多特殊的功能，例如微信登錄、音頻播放、文件上傳等。JSON（JavaScriptObjectNotation，JavaScript對(duì)象符號(hào)）：用于利用JSON語法對(duì)頁面進(jìn)行配置，文件擴(kuò)展名為.json。1.3.2微信小程序的頁面組成WXML（WeiXinMarkupLanguage，微信標(biāo)記語言）：類似于網(wǎng)頁制作中的HTML語言，用于構(gòu)建頁面結(jié)構(gòu)，文件擴(kuò)展名為.wxml。WXSS（WeiXinStyleSheets，微信樣式表）：類似于網(wǎng)頁制作中的CSS語言，用于設(shè)置頁面樣式，文件擴(kuò)展名為.wxss。1.3.2微信小程序的頁面組成微信客戶端在加載微信小程序頁面時(shí)的步驟。讀取并解析頁面中JSON文件的配置。加載頁面的WXML文件、WXSS文件和JS文件，實(shí)現(xiàn)頁面渲染。其中，頁面中WXSS文件的樣式會(huì)覆蓋項(xiàng)目根目錄下的app.wxss文件中相同的全局樣式；頁面中JS文件的Page()函數(shù)會(huì)被調(diào)用，用于創(chuàng)建頁面實(shí)例。熟悉微信小程序的通信模型，能夠解釋微信小程序中渲染層、邏輯層及第三方服務(wù)器的通信方式1.3.3微信小程序的通信模型

先定一個(gè)小目標(biāo)！1.3.3微信小程序的通信模型微信小程序?qū)崿F(xiàn)了渲染層、邏輯層和第三方服務(wù)器的通信。WXML和WXSS工作在渲染層，用于實(shí)現(xiàn)頁面的渲染。JS工作在邏輯層，用于實(shí)現(xiàn)頁面的邏輯。1.3.3微信小程序的通信模型微信小程序的通信模型分為兩個(gè)部分。第1部分是渲染層與邏輯層之間的通信，即將邏輯層的數(shù)據(jù)渲染到頁面中。第2部分是邏輯層和第三方服務(wù)器之間的通信，即通過向第三方服務(wù)器發(fā)送請(qǐng)求，得到需要的數(shù)據(jù)。1.3.3微信小程序的通信模型為了幫助讀者更好地理解微信小程序的通信模型，下面通過示意圖進(jìn)行演示。Native表示微信客戶端的底層，渲染層與邏輯層之間的通信和邏輯層與第三方服務(wù)器之間的通信都由微信客戶端的底層進(jìn)行轉(zhuǎn)發(fā)。微信開發(fā)者工具的使用1.4熟悉微信開發(fā)者工具的主界面，能夠說出主界面中常用快捷按鈕的功能1.4.1認(rèn)識(shí)微信開發(fā)者工具

先定一個(gè)小目標(biāo)！1.4.1認(rèn)識(shí)微信開發(fā)者工具微信小程序項(xiàng)目創(chuàng)建成功后，會(huì)進(jìn)入微信開發(fā)者工具的主界面，如下圖所示。1.4.1認(rèn)識(shí)微信開發(fā)者工具微信開發(fā)者工具的主界面主要由以下5部分組成。菜單欄工具欄模擬器編輯器調(diào)試器1.4.1認(rèn)識(shí)微信開發(fā)者工具通過菜單欄可以訪問微信開發(fā)者工具的大部分功能，菜單欄常用的菜單項(xiàng)如下。項(xiàng)目：用于新建項(xiàng)目、導(dǎo)入項(xiàng)目、打開最近項(xiàng)目、查看所有項(xiàng)目或關(guān)閉當(dāng)前項(xiàng)目等。文件：用于新建文件、全部保存或關(guān)閉編輯器等。編輯：用于編輯代碼，查看編輯相關(guān)的操作和快捷鍵，對(duì)代碼進(jìn)行格式化。工具：用于項(xiàng)目的編譯、刷新、清除緩存等。轉(zhuǎn)到：用于切換編輯器、快速定位到行、查看問題等。微信開發(fā)者主界面——菜單欄1.4.1認(rèn)識(shí)微信開發(fā)者工具選擇：用于全選、光標(biāo)的移動(dòng)等。視圖：用于微信開發(fā)者工具可視區(qū)的控制。界面：用于控制主界面中工具欄、模擬器、編輯器、目錄樹和調(diào)試器的顯示與隱藏。設(shè)置：用于通用設(shè)置、外觀設(shè)置、快捷鍵設(shè)置、編輯器設(shè)置、代理設(shè)置、安全設(shè)置、擴(kuò)展設(shè)置和項(xiàng)目設(shè)置。幫助：用于工具的反饋和開發(fā)文檔的查看等。微信開發(fā)者工具：用于賬號(hào)切換、更換開發(fā)模式、檢查更新、調(diào)試、退出等。1.4.1認(rèn)識(shí)微信開發(fā)者工具工具欄提供了一些常用功能的快捷按鈕，具體如下。個(gè)人中心：工具欄最左側(cè)的第1個(gè)按鈕，顯示當(dāng)前登錄用戶的頭像，單擊頭像后會(huì)顯示用戶名。模擬器、編輯器和調(diào)試器：用于控制模擬器、編輯器和調(diào)試器的顯示與隱藏?？梢暬河糜诖a的可視化編輯，開發(fā)者可以通過拖曳等方式對(duì)界面進(jìn)行快速布局與修改。云開發(fā)：開發(fā)者可以使用云開發(fā)來開發(fā)微信小程序、小游戲，無須搭建服務(wù)器，即可使用云端能力。云開發(fā)能力從基礎(chǔ)庫2.2.3開始支持。模式切換下拉菜單：用于在小程序模式和插件模式之間進(jìn)行切換。微信開發(fā)者主界面——工具欄1.4.1認(rèn)識(shí)微信開發(fā)者工具編譯下拉菜單：用于切換編譯模式，默認(rèn)為普通編譯，可以添加其他編譯。編譯：編寫完微信小程序的代碼后，需要經(jīng)過編譯才能運(yùn)行。默認(rèn)情況下，直接按Ctrl+S快捷鍵保存代碼文件，微信開發(fā)者工具就會(huì)自動(dòng)編譯運(yùn)行該代碼。若想手動(dòng)編譯，則單擊“編譯”按鈕即可。預(yù)覽：?jiǎn)螕簟邦A(yù)覽”按鈕會(huì)生成一個(gè)二維碼，使用微信掃描二維碼，即可在微信中預(yù)覽小程序的實(shí)際運(yùn)行效果。真機(jī)調(diào)試：可以實(shí)現(xiàn)直接利用開發(fā)者工具，通過網(wǎng)絡(luò)連接對(duì)手機(jī)上運(yùn)行的微信小程序進(jìn)行調(diào)試，幫助開發(fā)者更好地定位和查找在手機(jī)上出現(xiàn)的問題。1.4.1認(rèn)識(shí)微信開發(fā)者工具清緩存：用于清除模擬器緩存、編譯緩存。上傳：用于將代碼上傳到微信小程序管理后臺(tái)，可以在“開發(fā)管理”中查看上傳的版本，將代碼提交審核。需要注意的是，如果在創(chuàng)建項(xiàng)目時(shí)使用的是測(cè)試號(hào)，則不會(huì)顯示“上傳”按鈕。版本管理：用于通過Git對(duì)小程序進(jìn)行版本管理。詳情：用于查看和修改微信小程序的基本信息、本地設(shè)置和項(xiàng)目配置。消息：用于顯示消息通知。1.4.1認(rèn)識(shí)微信開發(fā)者工具模擬器可以模擬微信小程序在微信客戶端的運(yùn)行效果。微信小程序的代碼通過編譯后可以在模擬器上直接運(yùn)行。開發(fā)者可以選擇不同的設(shè)備，也可以添加自定義設(shè)備來調(diào)試小程序在不同尺寸機(jī)型上的適配問題。微信開發(fā)者主界面——模擬器模擬器提供了多個(gè)快捷功能，能夠幫助開發(fā)者更好地進(jìn)行開發(fā)。1.4.1認(rèn)識(shí)微信開發(fā)者工具每一個(gè)被矩形框住的部分代表一個(gè)快捷功能，下面將對(duì)這些快捷功能分別進(jìn)行講解。1.4.1認(rèn)識(shí)微信開發(fā)者工具序號(hào)①中iPhone6/7/8表示機(jī)型，100%表示顯示比例，16表示字體大小。開發(fā)者可單擊右側(cè)的下拉箭頭，根據(jù)實(shí)際需要選擇合適的機(jī)型、顯示比例和字體大小，具體下圖所示。1.4.1認(rèn)識(shí)微信開發(fā)者工具序號(hào)②用于控制熱重載的開啟和關(guān)閉，當(dāng)開啟熱重載后，修改代碼文件，模擬器可以在不刷新的情況下生效變更。需要注意的是，該功能在2.12.0及以上的基礎(chǔ)庫生效。序號(hào)③用于刷新微信小程序的頁面。序號(hào)④用于終止模擬器，若需要重新啟動(dòng)模擬器可單擊工具欄上的“編譯”按鈕。序號(hào)⑤用于模擬操作，常用于模擬不同的網(wǎng)絡(luò)環(huán)境，從而檢測(cè)微信小程序在不同網(wǎng)絡(luò)環(huán)境中的加載速度，例如Wi-Fi、2G、3G、4G等。序號(hào)⑥用于分離窗口，單擊該項(xiàng)后，模擬器將成為一個(gè)獨(dú)立的窗口。序號(hào)⑦用于顯示當(dāng)前頁面的信息，包括頁面路徑、頁面參數(shù)和場(chǎng)景值。序號(hào)⑧用于將當(dāng)前頁面進(jìn)行真機(jī)預(yù)覽。1.4.1認(rèn)識(shí)微信開發(fā)者工具編輯器分為左右兩欄，左欄為目錄樹，主要用于展示當(dāng)前微信小程序項(xiàng)目的目錄結(jié)構(gòu)；右欄為代碼編輯區(qū)，用于編寫文件中的代碼。在左欄中單擊某個(gè)文件，就可以在右欄中對(duì)該文件進(jìn)行編輯，也可以在左欄中通過雙擊打開多個(gè)文件，這些文件會(huì)在右欄中顯示。微信開發(fā)者主界面——編輯器1.4.1認(rèn)識(shí)微信開發(fā)者工具調(diào)試器類似于Chrome瀏覽器中的開發(fā)者工具。下面對(duì)調(diào)試器中常用面板的功能進(jìn)行簡(jiǎn)要介紹。Wxml：Wxml面板，用于查看和調(diào)試WXML和WXSS。Console：控制臺(tái)面板，用于輸出調(diào)試信息，也可以直接編寫代碼執(zhí)行。Sources：源代碼面板，用于顯示當(dāng)前項(xiàng)目的腳本文件，在該面板中開發(fā)者看到的文件是經(jīng)過處理之后的腳本文件。Network：網(wǎng)絡(luò)面板，用于記錄網(wǎng)絡(luò)請(qǐng)求和響應(yīng)信息，根據(jù)它可以進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。AppData：App數(shù)據(jù)面板，用于查看或編輯當(dāng)前微信小程序運(yùn)行時(shí)的數(shù)據(jù)。Storage：存儲(chǔ)面板，用于查看和管理本地?cái)?shù)據(jù)緩存。Sensor：傳感器面板，用于模擬地理位置、重力感應(yīng)。Security：安全面板，用于調(diào)試頁面的安全和認(rèn)證等信息。Trace:跟蹤面板，用于真機(jī)調(diào)試時(shí)跟蹤調(diào)試信息。微信開發(fā)者主界面——調(diào)試器掌握微信小程序的項(xiàng)目設(shè)置，能夠根據(jù)需要對(duì)微信小程序進(jìn)行設(shè)置1.4.2微信小程序的項(xiàng)目設(shè)置

先定一個(gè)小目標(biāo)！1.4.2微信小程序的項(xiàng)目設(shè)置在微信開發(fā)者工具中，可以對(duì)微信小程序的項(xiàng)目進(jìn)行設(shè)置，主要包含以下4個(gè)方面。基本信息的設(shè)置性能分析本地設(shè)置項(xiàng)目配置1.4.2微信小程序的項(xiàng)目設(shè)置在微信開發(fā)者工具中，選擇菜單欄的“設(shè)置”，然后選擇“項(xiàng)目設(shè)置”，將會(huì)彈出一個(gè)用于項(xiàng)目設(shè)置的選項(xiàng)卡，單擊“基本信息”項(xiàng)，即可對(duì)項(xiàng)目的基本信息進(jìn)行設(shè)置，如下圖。項(xiàng)目設(shè)置——基本信息的設(shè)置1.4.2微信小程序的項(xiàng)目設(shè)置單擊“性能分析”，即可查看項(xiàng)目的線上數(shù)據(jù)和本地情況，供開發(fā)者有針對(duì)性地進(jìn)行優(yōu)化，如下圖。項(xiàng)目設(shè)置——性能分析1.4.2微信小程序的項(xiàng)目設(shè)置單擊“本地設(shè)置”，即可對(duì)項(xiàng)目進(jìn)行本地設(shè)置，如下圖。項(xiàng)目設(shè)置——本地設(shè)置本地設(shè)置中常用設(shè)置的具體含義如下。調(diào)試基礎(chǔ)庫：選擇基礎(chǔ)庫的版本，用于在對(duì)應(yīng)版本的微信客戶端上運(yùn)行。高版本的基礎(chǔ)庫無法兼容低版本的微信客戶端。版本號(hào)后邊的百分比表示該版本的用戶占比。本書中使用的基礎(chǔ)庫的版本為2.25.2。將JS編譯成ES5：選中該項(xiàng)后，JS代碼的語法將轉(zhuǎn)換為ES5。上傳代碼時(shí)樣式自動(dòng)補(bǔ)全：選中該項(xiàng)后，在預(yù)覽、真機(jī)調(diào)試、上傳時(shí)文件中的樣式將自動(dòng)補(bǔ)全，需要注意的是，勾選此項(xiàng)會(huì)增大代碼包的體積。1.4.2微信小程序的項(xiàng)目設(shè)置項(xiàng)目設(shè)置——本地設(shè)置上傳代碼時(shí)自動(dòng)壓縮樣式文件、上傳代碼時(shí)自動(dòng)壓縮腳本文件和上傳代碼時(shí)自動(dòng)壓縮WXML文件：選中對(duì)應(yīng)選項(xiàng)后，在預(yù)覽、真機(jī)調(diào)試、上傳時(shí)文件中的樣式文件、腳本文件、WXML文件將自動(dòng)壓縮。上傳時(shí)進(jìn)行代碼保護(hù)：選中該項(xiàng)后，微信開發(fā)者工具會(huì)嘗試對(duì)項(xiàng)目代碼進(jìn)行保護(hù)。不校驗(yàn)合法域名、web-view（業(yè)務(wù)域名）、TLS版本以及HTTPS證書：正式發(fā)布的微信小程序的網(wǎng)絡(luò)請(qǐng)求需要校驗(yàn)這些信息，在開發(fā)過程中可以選中該項(xiàng)，開發(fā)工具將不校驗(yàn)這些信息，從而有助于開發(fā)者在開發(fā)過程中更方便地完成調(diào)試工作。啟用自定義處理命令：選中該項(xiàng)后，微信開發(fā)者工具在編譯前、預(yù)覽前、上傳前這三個(gè)時(shí)機(jī)調(diào)用開發(fā)者自定義的命令，開發(fā)者可以對(duì)代碼進(jìn)行一些預(yù)處理。1.4.2微信小程序的項(xiàng)目設(shè)置項(xiàng)目設(shè)置——本地設(shè)置1.4.2微信小程序的項(xiàng)目設(shè)置單擊“項(xiàng)目配置”，即可查看項(xiàng)目的域名信息和高級(jí)配置，如右圖。項(xiàng)目設(shè)置——項(xiàng)目配置域名信息：用于顯示項(xiàng)目的安全域名信息。高級(jí)配置：用于顯示代碼包的大小、Tabbar的個(gè)數(shù)等信息。了解微信小程序開發(fā)常用快捷鍵，能夠列舉4類常用快捷鍵1.4.3微信小程序開發(fā)常用快捷鍵

先定一個(gè)小目標(biāo)！1.4.3微信小程序開發(fā)常用快捷鍵為了方便開發(fā)者進(jìn)行微信小程序開發(fā)，微信開發(fā)者工具提供了大量的快捷鍵，常用的快捷鍵可以分為以下4類。項(xiàng)目和文件相關(guān)的快捷鍵編輯相關(guān)的快捷鍵工具相關(guān)的快捷鍵界面相關(guān)的快捷鍵1.4.3微信小程序開發(fā)常用快捷鍵分類快捷鍵描述項(xiàng)目Shift+Ctrl+N新建項(xiàng)目Shift+Ctrl+W關(guān)閉當(dāng)前項(xiàng)目文件Ctrl+N新建文件Ctrl+S保存Ctrl+W關(guān)閉當(dāng)前文件Shift+Ctrl+S全部保存開發(fā)微信小程序時(shí)，經(jīng)常需要對(duì)項(xiàng)目和文件進(jìn)行操作，例如關(guān)閉當(dāng)前項(xiàng)目、保存文件等，微信開發(fā)者工具提供了一些與項(xiàng)目和文件相關(guān)的快捷鍵，具體如下表?？旖萱I——項(xiàng)目和文件相關(guān)的快捷鍵1.4.3微信小程序開發(fā)常用快捷鍵分類快捷鍵描述代碼格式調(diào)整Ctrl+[代碼左縮進(jìn)Ctrl+]代碼右縮進(jìn)Alt+Shift+F格式化代碼Ctrl+Shift+[折疊代碼塊Ctrl+Shift+]展開代碼塊開發(fā)微信小程序時(shí)，經(jīng)常需要進(jìn)行編輯操作，例如代碼格式調(diào)整、光標(biāo)移動(dòng)、搜索、替換等，微信開發(fā)者工具提供了一些與編輯相關(guān)的快捷鍵，具體如下表?？旖萱I——編輯相關(guān)的快捷鍵1.4.3微信小程序開發(fā)常用快捷鍵分類快捷鍵描述代碼移動(dòng)、復(fù)制、粘貼Alt+↑代碼向上移動(dòng)一行Alt+↓代碼向下移動(dòng)一行Alt+Shift+↑復(fù)制并向上粘貼Alt+Shift+↓復(fù)制并向下粘貼Ctrl+C復(fù)制Ctrl+V粘貼注釋Ctrl+/注釋或取消注釋文件跳轉(zhuǎn)Ctrl+P跳轉(zhuǎn)到文件Ctrl+E跳轉(zhuǎn)到最近文件>>接上表1.4.3微信小程序開發(fā)常用快捷鍵分類快捷鍵描述光標(biāo)移動(dòng)Ctrl+End移動(dòng)到文件末尾Ctrl+Home移動(dòng)到文件開頭Shift+End移動(dòng)到行尾Shift+Home移動(dòng)到行首Ctrl+U光標(biāo)回退搜索、替換Ctrl+F在當(dāng)前文件中查找Ctrl+H在當(dāng)前文件中替換Ctrl+Shift+F全局查找Ctrl+Shift+H全局替換>>接上表1.4.3微信小程序開發(fā)常用快捷鍵分類快捷鍵描述編輯器中已打開文件的切換Ctrl+PageUp切換到編輯器中上一個(gè)已打開的文件Ctrl+PageDown切換到編輯器中下一個(gè)已打開的文件>>接上表1.4.3微信小程序開發(fā)常用快捷鍵快捷鍵描述Ctrl+B編譯項(xiàng)目Ctrl+R焦點(diǎn)在編輯器外，編譯項(xiàng)目Ctrl+Shift+P預(yù)覽代碼Ctrl+Shift+U上傳代碼開發(fā)微信小程序時(shí)，經(jīng)常需要使用微信開發(fā)者工具中的編譯項(xiàng)目、預(yù)覽代碼等功能，微信開發(fā)者工具提供了一些與工具相關(guān)的快捷鍵，具體如下表?？旖萱I——工具相關(guān)的快捷鍵1.4.3微信小程序開發(fā)常用快捷鍵開發(fā)微信小程序時(shí)，經(jīng)常需要控制微信開發(fā)者工具的界面，例如顯示或隱藏工具欄、顯示或隱藏調(diào)試器等，微信開發(fā)者工具提供了一些與界面相關(guān)的快捷鍵，具體如下表?？旖萱I——界面相關(guān)的快捷鍵快捷鍵描述Ctrl+Shift+T顯示或隱藏工具欄Ctrl+Shift+D顯示或隱藏模擬器Ctrl+Shift+E顯示或隱藏編輯器Ctrl+Shift+M顯示或隱藏目錄樹Ctrl+Shift+I顯示或隱藏調(diào)試器微信小程序的項(xiàng)目成員1.5了解項(xiàng)目成員，能夠說出項(xiàng)目成員的組織結(jié)構(gòu)1.5.1項(xiàng)目成員的組織結(jié)構(gòu)

先定一個(gè)小目標(biāo)！1.5.1項(xiàng)目成員的組織結(jié)構(gòu)一般情況下，微信小程序中項(xiàng)目成員的組織結(jié)構(gòu)如下圖。項(xiàng)目管理者負(fù)責(zé)統(tǒng)籌整個(gè)項(xiàng)目的進(jìn)展和風(fēng)險(xiǎn)，把控微信小程序?qū)ν獍l(fā)布上線的節(jié)奏。產(chǎn)品組、設(shè)計(jì)組、開發(fā)組和測(cè)試組之間相互配合，協(xié)調(diào)工作，共同完成微信小程序項(xiàng)目。了解項(xiàng)目成員，能夠說出項(xiàng)目成員的分工1.5.2項(xiàng)目成員的分工

先定一個(gè)小目標(biāo)！1.5.2項(xiàng)目成員的分工微信小程序的開發(fā)流程如下圖所示，每個(gè)流程都需要不同的項(xiàng)目成員來負(fù)責(zé)。在開發(fā)流程中，首先由產(chǎn)品組提出需求，然后設(shè)計(jì)組根據(jù)產(chǎn)品需求做出設(shè)計(jì)方案供開發(fā)者使用。接著開發(fā)組依據(jù)設(shè)計(jì)方案進(jìn)行代碼的編寫，代碼編寫完成后，還需要產(chǎn)品組和設(shè)計(jì)組去體驗(yàn)、測(cè)試組進(jìn)行各種測(cè)試。測(cè)試完成后，由項(xiàng)目管理者發(fā)布微信小程序。了解項(xiàng)目成員和體驗(yàn)成員，能夠說出項(xiàng)目成員和體驗(yàn)成員的管理1.5.3項(xiàng)目成員和體驗(yàn)成員的管理

先定一個(gè)小目標(biāo)！1.5.3項(xiàng)目成員和體驗(yàn)成員的管理在企業(yè)中，員工的數(shù)量并不是一成不變的，當(dāng)開發(fā)一個(gè)比較大的微信小程序時(shí)，可能需要多個(gè)成員的參與，這時(shí)就需要對(duì)成員進(jìn)行管理，這樣才能保證微信小程序有序完成。項(xiàng)目成員：表示參與微信小程序開發(fā)、運(yùn)行的成員，可登錄微信小程序管理后臺(tái)，包括運(yùn)營(yíng)者、開發(fā)者及和數(shù)據(jù)分析者。體驗(yàn)成員：表示參與小程序內(nèi)測(cè)體驗(yàn)的成員，可使用體驗(yàn)版小程序，但不屬于項(xiàng)目成員。微信小程序的成員管理包括兩方面，一方面是管理員對(duì)項(xiàng)目成員的管理，另一方面是管理員對(duì)體驗(yàn)成員的管理。關(guān)于項(xiàng)目成員和體驗(yàn)成員的介紹如下。1.5.3項(xiàng)目成員和體驗(yàn)成員的管理微信小程序成員管理的示意圖如下圖。管理員可以添加或刪除項(xiàng)目成員和體驗(yàn)成員，項(xiàng)目成員也可以添加或刪除體驗(yàn)成員。了解項(xiàng)目成員，能夠說出項(xiàng)目成員權(quán)限1.5.4項(xiàng)目成員的權(quán)限

先定一個(gè)小目標(biāo)！1.5.4項(xiàng)目成員的權(quán)限權(quán)限運(yùn)營(yíng)者開發(fā)者數(shù)據(jù)分析者登錄√√√版本發(fā)布√

數(shù)據(jù)分析

√開發(fā)能力

√

修改小程序介紹√

暫停/恢復(fù)服務(wù)√

設(shè)置可被搜索√

在一個(gè)微信小程序中，每個(gè)項(xiàng)目成員的權(quán)限各有不同，只有為每個(gè)項(xiàng)目成員分配了各自的權(quán)限，才能保證項(xiàng)目的正常進(jìn)行。例如開發(fā)者有開發(fā)者權(quán)限、登錄權(quán)限等，下面將介紹不同項(xiàng)目成員擁有的權(quán)限，具體如下表。1.5.4項(xiàng)目成員的權(quán)限權(quán)限運(yùn)營(yíng)者開發(fā)者數(shù)據(jù)分析者解除關(guān)聯(lián)移動(dòng)應(yīng)用√

解除關(guān)聯(lián)公眾號(hào)√

管理體驗(yàn)者√√√體驗(yàn)者權(quán)限√√√微信支付√

小程序插件管理√

游戲運(yùn)營(yíng)管理√

推廣√√√>>接上表1.5.4項(xiàng)目成員的權(quán)限接下來對(duì)項(xiàng)目成員的各種權(quán)限進(jìn)行解釋說明。登錄：可登錄小程序管理后臺(tái)，無須管理員確認(rèn)。版本發(fā)布：小程序版本發(fā)布、回退。數(shù)據(jù)分析：使用小程序統(tǒng)計(jì)模塊查看小程序數(shù)據(jù)。開發(fā)能力：可使用微信開發(fā)者工具和開發(fā)版小程序進(jìn)行開發(fā)；在開發(fā)模塊可使用開發(fā)管理、微信開發(fā)者工具和云開發(fā)等。修改小程序介紹：修改小程序在主頁展示的功能介紹。暫停/恢復(fù)服務(wù)：暫停或恢復(fù)小程序線上服務(wù)。設(shè)置可被搜索：設(shè)置小程序是否可被用戶主動(dòng)搜索。1.5.4項(xiàng)目成員的權(quán)限解除關(guān)聯(lián)移動(dòng)應(yīng)用：可解綁小程序已關(guān)聯(lián)的移動(dòng)應(yīng)用。解除關(guān)聯(lián)公眾號(hào)：可解綁小程序已關(guān)聯(lián)的公眾號(hào)。管理體驗(yàn)者：添加或刪除小程序體驗(yàn)者。體驗(yàn)者權(quán)限：使用體驗(yàn)版小程序。微信支付：使用小程序微信支付（虛擬支付）模塊。小程序插件管理：運(yùn)營(yíng)者可進(jìn)行小程序插件開發(fā)管理、申請(qǐng)管理和設(shè)置。游戲運(yùn)營(yíng)管理：可使用小游戲管理后臺(tái)的素材管理、游戲圈管理等功能。推廣：在推廣模塊使用小程序流量主、廣告主等功能。掌握添加項(xiàng)目成員和體驗(yàn)成員的方法，能夠在微信小程序管理后臺(tái)中添加項(xiàng)目成員和體驗(yàn)成員1.5.5添加項(xiàng)目成員和體驗(yàn)成員

先定一個(gè)小目標(biāo)！1.5.5添加項(xiàng)目成員和體驗(yàn)成員登錄微信小程序管理后臺(tái)，選擇左側(cè)邊欄的“成員管理”，即可進(jìn)入成員管理頁面。步驟1步驟2步驟3進(jìn)入成員管理頁面1.5.5添加項(xiàng)目成員和體驗(yàn)成員成員管理頁面顯示了管理員、項(xiàng)目成員和體驗(yàn)成員3個(gè)模塊，單擊項(xiàng)目成員模塊右側(cè)的““按鈕，然后單擊“添加成員”即可進(jìn)入添加成員頁面。步驟2步驟1步驟3進(jìn)入添加成員頁面1.5.5添加項(xiàng)目成員和體驗(yàn)成員在添加成員頁面中輸入要添加的項(xiàng)目成員的微信號(hào)，并為其設(shè)置權(quán)限，單擊“確認(rèn)添加”按鈕，頁面中將彈出一個(gè)微信二維碼提示框，管理員使用微信進(jìn)行掃碼確認(rèn)身份后即可完成項(xiàng)目成員的添加。添加項(xiàng)目成員后，將跳轉(zhuǎn)到成員管理頁面，項(xiàng)目成員的信息將顯示在項(xiàng)目成員模塊。步驟2步驟1步驟3進(jìn)入添加成員頁面1.5.5添加項(xiàng)目成員和體驗(yàn)成員單擊成員管理頁面中體驗(yàn)成員模塊右側(cè)的“添加”按鈕，頁面中將彈出添加體驗(yàn)成員的提示框。步驟3步驟2步驟1在提示框中輸入要添加的體驗(yàn)成員的微信號(hào)，然后單擊“確定”按鈕，即可完成體驗(yàn)成員的添加。添加完成后，體驗(yàn)成員的信息將顯示在體驗(yàn)成員模塊。進(jìn)入添加體驗(yàn)成員提示框頁面微信小程序的發(fā)布上線1.6熟悉微信小程序的版本，能夠說明微信小程序的4種版本1.6.1微信小程序的版本

先定一個(gè)小目標(biāo)！1.6.1微信小程序的版本微信小程序從開發(fā)到正式上線，中途會(huì)經(jīng)歷不同的版本。一般情況下，微信小程序開發(fā)的流程是：開發(fā)者編寫代碼并自測(cè)，直到微信小程序達(dá)到一個(gè)穩(wěn)定可體驗(yàn)的狀態(tài)；然后開發(fā)者把這個(gè)體驗(yàn)版本交給產(chǎn)品組和設(shè)計(jì)組的相關(guān)人員進(jìn)行體驗(yàn)，并交給測(cè)試組的相關(guān)人員進(jìn)行測(cè)試，修復(fù)程序的Bug；最后發(fā)布微信小程序，供外部用戶正式使用。1.6.1微信小程序的版本版本說明開發(fā)版本使用微信開發(fā)者工具可將代碼上傳到開發(fā)版本中。開發(fā)版本只保留最新版的上傳代碼。單擊“提交審核”按鈕，可將代碼提交審核。開發(fā)版本可刪除，不影響線上版本和審核版本的代碼體驗(yàn)版本可以選擇某個(gè)開發(fā)版本作為體驗(yàn)版本，只能存在一個(gè)體驗(yàn)版本審核版本只能有一份代碼處于審核中。審核通過后可以發(fā)布到線上，也可直接重新提交審核，覆蓋原審核版本線上版本線上所有用戶使用的代碼版本，該版本代碼在新版本代碼發(fā)布后被覆蓋更新根據(jù)上述流程可將微信小程序劃分為不同的版本，具體如下表。熟悉微信小程序發(fā)布上線的流程，能夠歸納出微信小程序發(fā)布上線的步驟1.6.2微信小程序的上線流程

先定一個(gè)小目標(biāo)！1.6.2微信小程序的上線流程一個(gè)微信小程序從開發(fā)完到發(fā)布上線，一般分為以下3個(gè)步驟。上傳代碼提交審核發(fā)布1.6.2微信小程序的上線流程步驟1步驟2步驟3步驟4打開微信小程序，在微信開發(fā)者工具的工具欄中單擊“上傳”按鈕，頁面中彈出提示框，根據(jù)提示填寫相應(yīng)的信息，然后單擊“上傳”按鈕，即可上傳代碼。上傳代碼1.6.2微信小程序的上線流程登錄微信小程序管理后臺(tái)，在左側(cè)邊欄中單擊“版本管理”，即可進(jìn)入版本管理頁面，查看開發(fā)版本，即可查看剛才提交上傳的版本。步驟2步驟1步驟3步驟4查看上傳代碼之后的版本1.6.2微信小程序的上線流程單擊“提交審核”按鈕，根據(jù)頁面提示信息進(jìn)行操作，即可提交已上傳的版本并進(jìn)行審核。提交審核后在審核版本中會(huì)出現(xiàn)正在審核的版本，審核需要一定時(shí)間，PPT中不再演示。步驟3步驟2步驟1步驟4提交審核1.6.2微信小程序的上線流程審核通過后審核版本中將顯示“發(fā)布”按鈕，單擊該按鈕，即可完成微信小程序的發(fā)布。步驟4步驟2步驟1步驟3發(fā)布1.6.2微信小程序的上線流程多學(xué)一招：設(shè)置體驗(yàn)版本在開發(fā)微信小程序時(shí)，開發(fā)者會(huì)隨時(shí)修改小程序代碼從而覆蓋開發(fā)版本，所以處于開發(fā)中的版本是不穩(wěn)定的。為了讓測(cè)試組、產(chǎn)品組和設(shè)計(jì)組有一個(gè)完整穩(wěn)定的版本可以體驗(yàn)測(cè)試，微信小程序管理后臺(tái)允許把其中一個(gè)開發(fā)版本設(shè)置成體驗(yàn)版本。1.6.2微信小程序的上線流程登錄微信小程序管理后臺(tái)，在左側(cè)邊欄中單擊“版本管理”，即可進(jìn)入版本管理頁面。單擊“開發(fā)版本”模塊的中的“”按鈕，會(huì)出現(xiàn)“選為體驗(yàn)版本”和“刪除”兩個(gè)選項(xiàng)，單擊“選為體驗(yàn)版本”，將開發(fā)版本設(shè)置為體驗(yàn)版本，體驗(yàn)版本生效頁面如下圖所示。步驟1步驟2設(shè)置體驗(yàn)版本1.6.2微信小程序的上線流程步驟1操作完成后，這時(shí)可以看到開發(fā)版本中已標(biāo)注出體驗(yàn)版本，如下圖所示。步驟2步驟1進(jìn)入版本管理頁面本章小結(jié)本章主要講解了初識(shí)微信小程序、微信小程序開發(fā)前準(zhǔn)備、微信小程序開發(fā)基礎(chǔ)、微信開發(fā)者工具的使用、微信小程序的項(xiàng)目成員，以及微信小程序的發(fā)布上線。通過本章的學(xué)習(xí)，讀者應(yīng)對(duì)微信小程序有一個(gè)整體的認(rèn)識(shí)，能夠使用微信開發(fā)者工具創(chuàng)建一個(gè)簡(jiǎn)單的微信小程序項(xiàng)目。本章小結(jié)第2章微信小程序頁面制作《微信小程序開發(fā)實(shí)戰(zhàn)（第2版）》學(xué)習(xí)目標(biāo)/Target

了解WXML的概念，能夠說出WXML的特點(diǎn)、WXML與HTML的區(qū)別

了解WXSS的概念，能夠說出WXSS的特點(diǎn)、WXSS與CSS的區(qū)別

了解組件的概念，能夠說出組件的特點(diǎn)及常用的組件掌握頁面路徑的配置方法，能夠運(yùn)用該方法進(jìn)行頁面管理學(xué)習(xí)目標(biāo)/Target掌握view組件的使用方法，能夠靈活運(yùn)用view組件實(shí)現(xiàn)頁面的布局效果掌握image組件的使用方法，能夠靈活運(yùn)用image組件完成圖片插入操作

掌握rpx單位的使用方法，能夠靈活運(yùn)用rpx單位解決屏幕適配的問題掌握頁面樣式的導(dǎo)入方法，能夠靈活運(yùn)用該方法導(dǎo)入公共樣式學(xué)習(xí)目標(biāo)/Target掌握導(dǎo)航欄的配置方法，能夠完成導(dǎo)航欄標(biāo)題顏色、背景顏色等頁面效果的設(shè)置掌握swiper和swiper-item組件的使用方法，能夠靈活運(yùn)用swiper和swiper-item組件完成輪播圖的制作掌握text組件的使用方法，能夠靈活運(yùn)用text組件定義行內(nèi)文本掌握Flex布局的使用方法，能夠使用Flex布局的相關(guān)屬性完成頁面布局學(xué)習(xí)目標(biāo)/Target掌握標(biāo)簽欄的配置方法，能夠完成頁面標(biāo)簽欄的配置掌握vw、vh單位的使用方法，能夠靈活運(yùn)用vw、vh單位設(shè)置寬度和高度

掌握video組件的使用方法，能夠靈活運(yùn)用video組件實(shí)現(xiàn)頁面中視頻的處理掌握表單組件的使用方法，能夠靈活運(yùn)用表單組件完成表單頁面的制作章節(jié)概述/Summary若想開發(fā)一個(gè)微信小程序，首先應(yīng)學(xué)習(xí)如何進(jìn)行頁面制作，也就是學(xué)習(xí)如何搭建微信小程序的頁面結(jié)構(gòu)并實(shí)現(xiàn)美觀的頁面樣式效果。為了使初學(xué)者快速掌握微信小程序的頁面制作，本章將從微信小程序常用組件、頁面樣式等方面進(jìn)行詳細(xì)講解。目錄/Contents010203【案例2-1】個(gè)人信息【案例2-2】本地生活【案例2-3】婚禮邀請(qǐng)函【案例2-1】個(gè)人信息01案例分析“個(gè)人信息”微信小程序的整體頁面可以分為上下兩個(gè)部分。其中，上半部分為頭像區(qū)域，用于顯示頭像；下半部分為詳細(xì)信息區(qū)域，用于顯示小麗的姓名、年齡、性別、特長(zhǎng)和愛好。

先定一個(gè)小目標(biāo)！了解WXML的概念，能夠說出WXML的特點(diǎn)、WXML與HTML的區(qū)別

知識(shí)儲(chǔ)備1.WXML簡(jiǎn)介知識(shí)儲(chǔ)備什么是WXML？1.WXML簡(jiǎn)介知識(shí)儲(chǔ)備在制作微信小程序頁面時(shí)，頁面的結(jié)構(gòu)可以用WXML來實(shí)現(xiàn)。WXML是微信團(tuán)隊(duì)為微信小程序開發(fā)而設(shè)計(jì)的一套語言，可以結(jié)合微信小程序中的各種組件構(gòu)建頁面結(jié)構(gòu)。1.WXML簡(jiǎn)介知識(shí)儲(chǔ)備HTML和WXML使用的標(biāo)簽不同。例如，HTML經(jīng)常使用<div>標(biāo)簽搭建頁面結(jié)構(gòu)，而WXML則使用<view>標(biāo)簽搭建頁面結(jié)構(gòu)；HTML經(jīng)常使用<span>標(biāo)簽定義行內(nèi)文本

，而WXML則使用<text>標(biāo)簽定義行內(nèi)文本

。WXML提供了和Vue.js中模板語法類似的模板語法，例如數(shù)據(jù)綁定、列表渲染、條件渲染等，而HTML中沒有。WXML與HTML的區(qū)別1.WXML簡(jiǎn)介知識(shí)儲(chǔ)備HTML頁面可以在瀏覽器中預(yù)覽，而WXML頁面僅能在微信客戶端和微信開發(fā)者工具中預(yù)覽。WXML中的單標(biāo)簽必須在結(jié)尾“>”前面加上“/”，否則微信開發(fā)者工具會(huì)報(bào)語法錯(cuò)誤，而HTML中允許省略單標(biāo)簽“>”前面的“/”。WXML中所使用的標(biāo)簽是微信小程序定義的標(biāo)簽，應(yīng)避免使用HTML標(biāo)簽，這樣才能保證頁面被正確轉(zhuǎn)譯。

WXML與HTML的區(qū)別1.WXML簡(jiǎn)介

先定一個(gè)小目標(biāo)！了解WXSS的概念，能夠說出WXSS的特點(diǎn)、WXSS與CSS的區(qū)別知識(shí)儲(chǔ)備2.WXSS簡(jiǎn)介知識(shí)儲(chǔ)備什么是WXSS？2.WXSS簡(jiǎn)介知識(shí)儲(chǔ)備在網(wǎng)頁制作中，使用HTML搭建頁面結(jié)構(gòu)以后，還需要使用CSS美化樣式。同樣，在微信小程序的頁面制作中，使用WXML搭建頁面結(jié)構(gòu)以后，也需要設(shè)置樣式來美化頁面。微信小程序提供了一套類似CSS的語言WXSS，通過WXSS可以美化頁面樣式。2.WXSS簡(jiǎn)介知識(shí)儲(chǔ)備不同的手機(jī)屏幕分辨率不同，如果用CSS中的px單位，會(huì)遇到屏幕適配的問題，需要手動(dòng)進(jìn)行像素單位換算。而微信小程序提供了一個(gè)新的單位rpx，使用rpx單位可以很輕松地適配各種手機(jī)屏幕。在微信小程序中，項(xiàng)目根目錄中的app.wxss文件作為全局樣式，會(huì)作用于當(dāng)前微信小程序的所有頁面，而局部頁面的WXSS樣式僅對(duì)當(dāng)前頁面生效，CSS則沒有這樣的功能。WXSS與CSS的區(qū)別2.WXSS簡(jiǎn)介知識(shí)儲(chǔ)備在WXSS中設(shè)置背景圖片的時(shí)候，可以使用網(wǎng)絡(luò)圖片或者以Base64格式編碼的圖片，不能使用本地圖片，例如，“background-image:url('/images/1.png');”是無效的，而CSS可以使用本地圖片來設(shè)置背景圖片。WXSS與CSS的區(qū)別2.WXSS簡(jiǎn)介

先定一個(gè)小目標(biāo)！了解組件的概念，能夠說出組件的特點(diǎn)及常用的組件知識(shí)儲(chǔ)備3.常用組件知識(shí)儲(chǔ)備什么是組件？3.常用組件知識(shí)儲(chǔ)備微信小程序頁面和普通網(wǎng)頁都是通過標(biāo)簽來定義頁面結(jié)構(gòu)的，但是在微信小程序開發(fā)中，更習(xí)慣將這些標(biāo)簽稱為組件，這些組件自帶微信風(fēng)格的UI樣式和特定功能效果。微信小程序提供了豐富的組件，通過組合這些組件可以進(jìn)行高效開發(fā)。3.常用組件知識(shí)儲(chǔ)備組件功能組件功能view視圖容器video視頻text文本checkbox復(fù)選框button按鈕radio單選按鈕image圖片input輸入框form表單audio音頻常用組件如下表。

3.常用組件

先定一個(gè)小目標(biāo)！掌握頁面路徑的配置方法，能夠運(yùn)用該方法進(jìn)行頁面管理知識(shí)儲(chǔ)備4.頁面路徑配置知識(shí)儲(chǔ)備為什么要進(jìn)行頁面路徑配置呢？4.頁面路徑配置知識(shí)儲(chǔ)備開發(fā)一個(gè)功能完整的微信小程序時(shí)，一般需要制作多個(gè)頁面。在微信小程序中可以通過app.json全局配置文件中的pages配置項(xiàng)來配置微信小程序的頁面路徑。pages配置項(xiàng)是一個(gè)數(shù)組，該數(shù)組用于指定微信小程序由哪些頁面組成，數(shù)組中的每一個(gè)元素都對(duì)應(yīng)一個(gè)頁面的路徑信息。4.頁面路徑配置知識(shí)儲(chǔ)備演示如何配置頁面路徑上述代碼中共配置了兩個(gè)頁面，分別是pages/index/index頁面和pages/logs/logs頁面。默認(rèn)情況下，pages數(shù)組中的第一項(xiàng)為微信小程序的初始頁面，即pages/index/index頁面。如果想將其他頁面設(shè)置為初始頁面，讀者可以手動(dòng)調(diào)整數(shù)組中元素的順序，將需要設(shè)為初始頁面的頁面路徑設(shè)為第一項(xiàng)即可。"pages":["pages/index/index","pages/logs/logs"],4.頁面路徑配置知識(shí)儲(chǔ)備pages/index/index中的pages表示存放頁面的目錄，index/index中第一個(gè)index表示index目錄，第二個(gè)index表示文件名。同理，pages/logs/logs中的pages表示存放頁面的目錄，logs/logs中第一logs表示logs目錄，第二個(gè)logs表示文件名。文件名不需要寫后綴名，以pages/index/index頁面為例，配置成功后，微信開發(fā)者工具會(huì)自動(dòng)生成index.wxml文件、index.wxss文件、index.js文件和index.json文件。注意4.頁面路徑配置知識(shí)儲(chǔ)備如果需要在微信小程序中創(chuàng)建一個(gè)新的頁面，可以在app.json文件的pages數(shù)組中增加一項(xiàng)新頁面的信息，微信開發(fā)者工具會(huì)創(chuàng)建對(duì)應(yīng)的頁面。通過pages數(shù)組中新增一項(xiàng)來新增頁面通過在微信開發(fā)者工具的項(xiàng)目資源管理器的pages目錄下右鍵單擊鼠標(biāo)，選擇“新建Page”來創(chuàng)建頁面，微信開發(fā)者工具會(huì)自動(dòng)在app.json文件中添加對(duì)應(yīng)的路徑。通過項(xiàng)目資源管理器新增頁面創(chuàng)建新頁面的方法如果對(duì)頁面文件直接進(jìn)行刪除操作，則不會(huì)觸發(fā)代碼的自動(dòng)更新效果，需要手動(dòng)修改app.json文件中的pages數(shù)組。注意4.頁面路徑配置

先定一個(gè)小目標(biāo)！掌握view組件的使用方法，能夠靈活運(yùn)用view組件實(shí)現(xiàn)頁面的布局效果知識(shí)儲(chǔ)備5.view組件知識(shí)儲(chǔ)備什么是view組件？view組件的作用是什么？5.view組件知識(shí)儲(chǔ)備在HTML中，<div>標(biāo)簽可以定義文檔中的分區(qū)或節(jié)，把文檔分割為獨(dú)立的、不同的部分，在WXML中，view組件起著類似的作用。view組件表示視圖容器，常用于實(shí)現(xiàn)頁面的布局效果。5.view組件知識(shí)儲(chǔ)備view組件提供了一些屬性，用于實(shí)現(xiàn)特殊的效果。<view>view組件</view>view組件通過<view>標(biāo)簽定義，示例代碼如下。5.view組件知識(shí)儲(chǔ)備屬性類型說明hover-classstring指定手指按下去的樣式。當(dāng)該屬性值為none時(shí)，沒有點(diǎn)擊態(tài)hover-stop-propagationboolean指定是否阻止本節(jié)點(diǎn)的祖先節(jié)點(diǎn)出現(xiàn)點(diǎn)擊態(tài)hover-start-timenumber手指按住后多久出現(xiàn)點(diǎn)擊態(tài)，單位為毫秒hover-stay-timenumber手指松開后點(diǎn)擊態(tài)保留時(shí)間，單位為毫秒view組件的常用屬性如下表。

點(diǎn)擊態(tài)是指手指在屏幕上按下時(shí)的狀態(tài)。5.view組件知識(shí)儲(chǔ)備hover-class屬性使用hover-class屬性實(shí)現(xiàn)手指按下后更改文字為加粗效果<viewhover-class="bold">手指按下后我會(huì)發(fā)生變化哦~</view>首先在頁面的WXML文件中定義頁面結(jié)構(gòu)，示例代碼如下。.bold{font-weight:bold;}然后在頁面的WXSS文件中定義樣式類，示例代碼如下。5.view組件知識(shí)儲(chǔ)備手指按下前，view組件中的文字未加粗；手指按下后，view組件中的文字加粗了，說明view組件的hover-class屬性生效了。使用hover-class屬性實(shí)現(xiàn)手指按下后更改文字為加粗效果5.view組件hover-class屬性知識(shí)儲(chǔ)備hover-start-time屬性使用hover-start-time屬性實(shí)現(xiàn)手指按住1秒后更改文字為加粗效果<viewhover-start-time="1000"hover-class=“bold">1秒后出狀態(tài)</view>設(shè)置hover-start-time屬性實(shí)現(xiàn)手指按住1000毫秒后出現(xiàn)點(diǎn)擊態(tài)設(shè)置hover-class屬性實(shí)現(xiàn)手指按下去的樣式類為bold5.view組件知識(shí)儲(chǔ)備hover-stay-time屬性使用hover-stay-time屬性實(shí)現(xiàn)手指松開之后3秒內(nèi)更改文字為加粗效果<viewhover-stay-time="3000"

hover-class="bold">我能點(diǎn)亮3秒鐘</view>設(shè)置hover-stay-time屬性實(shí)現(xiàn)手指松開后點(diǎn)擊態(tài)保留時(shí)間5.view組件

先定一個(gè)小目標(biāo)！掌握image組件的使用方法，能夠靈活運(yùn)用image組件完成圖片插入操作知識(shí)儲(chǔ)備6.image組件知識(shí)儲(chǔ)備什么是image組件呢？6.image組件知識(shí)儲(chǔ)備微信小程序提供了用于顯示圖片的image組件，并且image組件的功能比HTML中的<img>標(biāo)簽更強(qiáng)大，支持對(duì)圖片進(jìn)行剪裁和縮放。image組件的默認(rèn)寬度為300px，默認(rèn)高度為240px。6.image組件知識(shí)儲(chǔ)備雙標(biāo)簽寫法的示例代碼如下。<imagesrc="圖片資源地址"/>image組件通過<image>標(biāo)簽定義，支持單標(biāo)簽和雙標(biāo)簽兩種寫法，單標(biāo)簽寫法的示例代碼如下。<imagesrc="圖片資源地址"></image>6.image組件知識(shí)儲(chǔ)備屬性類型說明srcstring圖片資源地址modestring圖片剪裁、縮放的模式webpboolean默認(rèn)不解析WebP格式，只支持網(wǎng)絡(luò)資源lazy-loadboolean圖片延遲加載image組件的常用屬性如下表。

6.image組件知識(shí)儲(chǔ)備屬性類型說明show-menu-by-longpressboolean長(zhǎng)按圖片顯示的菜單，菜單提供發(fā)送給朋友、收藏、保存圖片、搜一搜等功能binderroreventhandle當(dāng)錯(cuò)誤發(fā)生時(shí)觸發(fā)bindloadeventhandle當(dāng)圖片載入完畢時(shí)觸發(fā)>>接上表圖片資源地址src可以是本地路徑或URL地址。如果使用本地路徑，可以在項(xiàng)目中創(chuàng)建一個(gè)目錄，例如images目錄，并在該目錄中放入圖片，例如test.jpg，然后通過本地路徑/images/test.jpg即可引用圖片。注意6.image組件知識(shí)儲(chǔ)備模式合法值說明縮放scaleToFill不保持寬高比縮放圖片，使圖片的寬高完全拉伸至填滿image元素。此合法值為mode屬性的默認(rèn)值aspectFit保持寬高比縮放圖片，使圖片的長(zhǎng)邊能完全顯示出來，即可以完整地將圖片顯示出來aspectFill保持寬高比縮放圖片，只保證圖片的短邊能完全顯示出來，即圖片通常只在水平或垂直方向是完整的，另一個(gè)方向?qū)?huì)發(fā)生截取widthFix寬度不變，高度自動(dòng)變化，保持原圖寬高比不變heightFix高度不變，寬度自動(dòng)變化，保持原圖寬高比不變image組件的mode屬性用于指定圖片的裁剪模式或縮放模式，常用的mode合法值如下表。

6.image組件知識(shí)儲(chǔ)備模式合法值說明裁剪top不縮放圖片，只顯示圖片的頂部區(qū)域bottom不縮放圖片，只顯示圖片的底部區(qū)域center不縮放圖片，只顯示圖片的中間區(qū)域left不縮放圖片，只顯示圖片的左邊區(qū)域right不縮放圖片，只顯示圖片的右邊區(qū)域>>接上表

6.image組件知識(shí)儲(chǔ)備模式合法值說明裁剪topleft不縮放圖片，只顯示圖片的左上邊區(qū)域topright不縮放圖片，只顯示圖片的右上邊區(qū)域bottomleft不縮放圖片，只顯示圖片的左下邊區(qū)域bottomright不縮放圖片，只顯示圖片的右下邊區(qū)域>>接上表

6.image組件知識(shí)儲(chǔ)備aspectFit縮放模式使用aspectFit屬性實(shí)現(xiàn)image組件在維持圖片寬高比不變的情況下使圖片完整顯示出來<imagesrc="/images/demo01.jpg"mode="aspectFit"style="width:200px;height:195px;border:1pxsolidblack;"/>將image組件的mode屬性值設(shè)為aspectFit，可以使圖片的長(zhǎng)邊能夠完全顯示出來，即將圖片顯示完整。6.image組件知識(shí)儲(chǔ)備aspectFit縮放模式使用aspectFit屬性實(shí)現(xiàn)image組件在維持圖片寬高比不變的情況下使圖片完整顯示出來6.image組件知識(shí)儲(chǔ)備top裁剪模式使用top屬性實(shí)現(xiàn)image組件只顯示圖片的頂部區(qū)域<imagesrc="/images/demo02.jpg"mode="top"style="width:300px;height:240px;"/>將image組件的mode屬性值設(shè)為top，可以使圖片只顯示頂部區(qū)域6.image組件知識(shí)儲(chǔ)備top裁剪模式使用top屬性實(shí)現(xiàn)image組件只顯示圖片的頂部區(qū)域6.image組件

先定一個(gè)小目標(biāo)！掌握rpx單位的使用方法，能夠靈活運(yùn)用rpx單位解決屏幕適配的問題知識(shí)儲(chǔ)備7.rpx單位知識(shí)儲(chǔ)備什么是rpx單位呢？7.rpx單位知識(shí)儲(chǔ)備rpx（ResponsivePixel，自適應(yīng)像素）。rpx單位是微信小程序獨(dú)有的、用來解決屏幕適配問題的尺寸單位。7.rpx單位知識(shí)儲(chǔ)備屏幕寬度rpx換算px(屏幕寬度÷750)px換算rpx(750÷屏幕寬度)320px1rpx≈0.427px1px≈2.34rpx375px1rpx=0.5px1px=2rpx414px1rpx=0.552px1px≈1.81rpxrpx單位的設(shè)計(jì)思想是把所有設(shè)備的屏幕在寬度上等分為750份，即屏幕的總寬度為750rpx。微信小程序在不同設(shè)備上運(yùn)行的時(shí)候，會(huì)自動(dòng)把rpx單位換算成對(duì)應(yīng)的像素單位來渲染，從而實(shí)現(xiàn)屏幕適配。不同屏幕寬度的rpx和px的換算如下表。7.rpx單位

先定一個(gè)小目標(biāo)！掌握頁面樣式的導(dǎo)入方法，能夠靈活運(yùn)用該方法導(dǎo)入公共樣式知識(shí)儲(chǔ)備8.樣式導(dǎo)入知識(shí)儲(chǔ)備在微信小程序中，多個(gè)不同的頁面可能需要編寫相同的樣式代碼，這樣會(huì)造成代碼冗余。為了避免代碼冗余，可以將相同的樣式代碼抽為公共樣式，放到一個(gè)單獨(dú)的文件中，通過只修改公共樣式實(shí)現(xiàn)對(duì)所有相關(guān)頁面樣式的修改，從而節(jié)約時(shí)間、方便管理。8.樣式導(dǎo)入步驟1演示如何創(chuàng)建公共樣式文件并進(jìn)行公共樣式文件導(dǎo)入在微信小程序的目錄下創(chuàng)建一個(gè)公共樣式文件page.wxss，在該文件中編寫公共樣式代碼。知識(shí)儲(chǔ)備/**page.wxss**/.name{padding:5px;}步驟28.樣式導(dǎo)入在pages/index/index.wxss文件中導(dǎo)入page.wxss文件。知識(shí)儲(chǔ)備/**index.wxss**/@import“/page.wxss";步驟1步驟2添加上述代碼后，即可導(dǎo)入page.wxss文件中定義的樣式。演示如何創(chuàng)建公共樣式文件并進(jìn)行公共樣式文件導(dǎo)入8.樣式導(dǎo)入

先定一個(gè)小目標(biāo)！掌握“個(gè)人信息”微信小程序