最近領(lǐng)導(dǎo)交給一個任務(wù)，單獨開發(fā)一個小程序項目，還要出一篇小程序課題文檔。這也是我第一次接觸小程序，遂把領(lǐng)導(dǎo)對課題的要求以及自己開發(fā)過程中遇到的問題做如下總結(jié)：

1. 如何創(chuàng)建小程序項目

這一步在官方文檔中的描述已經(jīng)很清楚了，主要分為幾步：

申請賬號，擁有小程序賬號。

在小程序管理平臺，可以看到小程序的 AppID與AppSecret。

綁定在一個微信開放平臺賬戶下的訂閱號、服務(wù)號、小程序、APP、PC網(wǎng)站都叫做”應(yīng)用“，每個應(yīng)用都有自己的AppID和AppSecret，AppID叫做應(yīng)用唯一標(biāo)識，AppSecret叫做應(yīng)用密鑰。

AppID與AppSecret 的作用及使用方式：

在開發(fā)過程中如果要使用微信相關(guān)功能，必須有官方認(rèn)證的賬號密碼

小程序項目中app.js的data需要添加appid和secret屬性，二者配合使用，可調(diào)用公眾號的接口能力

管理員需要將開發(fā)人員的微信號設(shè)置為開發(fā)者賬號才可以進(jìn)行小程序的開發(fā)

安裝開發(fā)工具

簡要介紹開發(fā)工具

微信小程序和公眾號開發(fā)有自己的微信開發(fā)工具，集成了公眾號網(wǎng)頁調(diào)試和小程序調(diào)試兩種開發(fā)模式。

使用公眾號網(wǎng)頁調(diào)試，開發(fā)者可以調(diào)試微信網(wǎng)頁授權(quán)和微信JS-SDK 詳情

使用小程序調(diào)試，開發(fā)者可以完成小程序的 API 和頁面的開發(fā)調(diào)試、代碼查看和編輯、小程序預(yù)覽和發(fā)布等功能。

增加了支持甘特圖的mermaid語法1 功能；

2. 如何獲取微信賬號信息及與第三方賬號做綁定（小程序啟動的過程都經(jīng)歷了哪些東西）

功能性的小程序一般都需要獲取用戶的微信賬號信息。最初小程序可以在首次進(jìn)入時調(diào)用wx.getUserInfo(Object object) 彈窗微信授權(quán)，

后來接口getUserInfo做了調(diào)整，在用戶未授權(quán)過的情況下調(diào)用此接口，將不再出現(xiàn)授權(quán)彈窗，會直接進(jìn)入 fail 回調(diào)。在用戶已授權(quán)的情況下調(diào)用此接口，可成功獲取用戶信息。

現(xiàn)在小程序獲取授權(quán)需要通過button組件的bindgetuserinfo屬性，配合open-type屬性，實現(xiàn)點擊按鈕返回獲取到的用戶信息：

小程序的啟動：

. 微信客戶端在打開小程序之前，會把整個小程序的代碼包下載到本地。

. 緊接著通過 app.json 的 pages 字段就可以知道當(dāng)前小程序的所有頁面路徑，寫在 pages 字段的第一個頁面就是這個小程序的首頁（打開小程序看到的第一個頁面）。

. 于是微信客戶端就把首頁的代碼裝載進(jìn)來，通過小程序底層的一些機(jī)制，就可以渲染出這個首頁。

. 小程序啟動之后，在 app.js 定義的 App 實例的 onLaunch（小程序啟動時觸發(fā)） 回調(diào)會被執(zhí)行

我的小程序在app.js的onLaunch 方法中都執(zhí)行了哪些操作：

1.項目啟動時執(zhí)行 wx.getSetting() 獲取用戶的當(dāng)前設(shè)置，判斷用戶是否已授權(quán)

2. 如果用戶已授權(quán)，調(diào)用wx.getUserInfo()獲取用戶信息，頭像昵稱等，然后進(jìn)行自己小程序的內(nèi)部操作

3. 如果用戶未授權(quán)，則跳轉(zhuǎn)至登錄頁，用戶通過點擊按鈕彈窗授權(quán)，獲取用戶信息

如果需要將微信賬號信息與自己的項目賬號做綁定，那么可以將獲取到的微信賬號信息作為參數(shù)傳送給后臺，后臺生成一個相對應(yīng)的項目賬號。

3. 小程序配置 : 全局&頁面

全局配置

app.json是小程序的全局配置，包括小程序的所有頁面路徑、界面表現(xiàn)、底部 tab 等，一般包含幾個字段：pages、window、tabBar

pages字段 —— 用于描述當(dāng)前小程序所有頁面路徑，這是為了讓微信客戶端知道當(dāng)前你的小程序頁面定義在哪個目錄。
window字段 —— 定義小程序所有頁面的頂部背景顏色，文字顏色定義等。
tabBar字段 —— 定義小程序底部tab欄的表現(xiàn)，以及 tab 切換時顯示的對應(yīng)頁面。

注： tab欄的圖標(biāo)icon 大小限制為40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片，同時tab列表配置最少2個，最多5個。

頁面配置

一個小程序頁面由四個文件組成：

.json 后綴的 JSON 配置文件

.wxml 后綴的 WXML 模板文件

.wxss 后綴的 WXSS 樣式文件

.js 后綴的 JS 腳本邏輯文件

每個小程序頁面可以使用自己的.json文件來對本頁面的窗口表現(xiàn)進(jìn)行配置。

頁面配置一般包括導(dǎo)航欄標(biāo)題文字內(nèi)容（navigationBarTitleText），是否開啟下拉刷新（enablePullDownRefresh）等等。

————————————————

頁面的配置只能設(shè)置 app.json 中部分 window 配置項的內(nèi)容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

4. 小程序組件及頁面介紹

小程序為開發(fā)者提供了一系列基礎(chǔ)組件，開發(fā)者可以通過組合這些基礎(chǔ)組件進(jìn)行快速開發(fā)。
組件是視圖層的基本組成單元，一個組件通常包括 開始標(biāo)簽 和 結(jié)束標(biāo)簽，屬性 用來修飾這個組件，內(nèi)容 在兩個標(biāo)簽之內(nèi)，例如：

小程序組件參考。

頁面的生命周期：

1. 小程序注冊完成后，加載頁面，觸發(fā)onLoad方法。

2. 頁面載入后觸發(fā)onShow方法，顯示頁面。

3. 首次顯示頁面，會觸發(fā)onReady方法，渲染頁面元素和樣式，一個頁面只會調(diào)用一次。

4. 當(dāng)小程序后臺運行或跳轉(zhuǎn)到其他頁面時，觸發(fā)onHide方法。

5. 當(dāng)小程序有后臺進(jìn)入到前臺運行或重新進(jìn)入頁面時，觸發(fā)onShow方法。

6. 當(dāng)使用重定向方法wx.redirectTo(OBJECT)或關(guān)閉當(dāng)前頁返回上一頁wx.navigateBack()，觸發(fā)onUnload

頁面之間的通訊

小程序頁面之間有時需要進(jìn)行數(shù)據(jù)的傳遞，個人使用的頁面間數(shù)據(jù)通訊有兩種方式：

1. 頁面A跳轉(zhuǎn)到頁面B時，在頁面路由后攜帶參數(shù)，頁面B在onLoad時獲取options中的參數(shù)。
   頁面A：

1. 如果頁面之間需要傳遞的參數(shù)為對象或者數(shù)組，那么通過路由拼接參數(shù)的形式就不可取了，此時可以通過app.js中的globalData全局變量進(jìn)行賦值。
   頁面A：

5. 如何開發(fā)公共代碼

開發(fā)公共組件，個人使用的是component構(gòu)造器定義公共組件。

Component構(gòu)造器可用于定義組件，調(diào)用Component構(gòu)造器時可以指定組件的屬性、數(shù)據(jù)、方法等。

具體開發(fā)方式是：

項目外層目錄中創(chuàng)建components文件夾，創(chuàng)建組件文件夾然后新建Component，在這里寫好公共組件的頁面結(jié)構(gòu)，樣式，事件等。

組件的js文件中包含組件屬性，組件數(shù)據(jù)，組件方法等，與vue組件有相似之處。
properties是組件的對外屬性，比如引用組件的頁面?zhèn)鬟f給公共組件的值就通過properties來接收

在需要使用公共組件的頁面JSON文件中，添加usingComponents配置，使用公共組件，key值是組件要在頁面中使用時的標(biāo)簽名，val是公共組件的路徑。

在頁面的wxml文件中，使用json定義的公共組件標(biāo)簽，引用公共組件，并傳遞數(shù)據(jù)：

1. 公共組件中通過properties接收引用頁面?zhèn)鬟f的值，然后使用{{}}在組件頁面進(jìn)行數(shù)據(jù)綁定即可。
   

6. 如何使用微信提供的API