第一天-啟動第一個小程序

一、前言

從今天開始，我將從小編開始帶大家學(xué)習(xí)開發(fā)微信小程序。作為基于微信的產(chǎn)品，微信小程序的熱度真的不容忽視。而且推廣的話有很多優(yōu)點。畢竟，沒有必要像app一樣設(shè)置得那么麻煩。只要打開微信就可以使用。那我們來看看微信小程序的風(fēng)采吧。(大衛(wèi)亞設(shè))。

二、開通微信公眾號并下載微信開發(fā)者工具

首先我們需要打開微信公眾號，然后注冊一個訂閱號即可，注冊完畢后登錄并進入公眾號后臺，如圖：

然后選擇開發(fā)者工具，并選擇開發(fā)者文檔，如圖：

此時，打開新頁面后選擇小程序，如圖：

然后我們選擇工具選項，如圖：

然后選擇微信開發(fā)者工具，如圖：

點擊它，然后就來到了微信開發(fā)者工具的版本下載位置，如圖：

我們選擇穩(wěn)定版，下載好后安裝它，如圖：

選擇安裝位置，如圖：

點擊安裝，此時靜靜等待安裝即可，安裝好后，直接點擊運行，第一次運行會彈出一個二維碼框，如圖：

然后我們用綁定這個公眾號的微信號來掃碼，如圖：

然后我們點擊加號，此時就可以創(chuàng)建小程序，如圖：

這里有一個appid，我們可以通過小程序來獲取，首先我們退出公眾號的登錄，然后點擊小程序，如圖：

然后點擊前往注冊，如圖：

這里我們可以選擇申請測試號，然后掃個碼即可，不過由于這里小編已經(jīng)有了測試號，因此直接掃碼登錄即可，如圖：

此時就可以把這個AppID填寫進去了，點擊確定就可以打開開發(fā)者工具了，如圖：

三、項目文件結(jié)構(gòu)

我們來看下項目中的文件所代表的意思，如下：

pages index index.js頁面js index.json頁面配置 index.wxml頁面結(jié)構(gòu) index.wxss頁面樣式 logs log.js日志js log.json日志配置 log.wxml日志結(jié)構(gòu) log.wxss日志樣式 util u 公用js .e eslint配置，檢查es6中的語法錯誤 a全局js aon靜態(tài)全局配置 a全局樣式文件 開發(fā)者工具的配置 是否被微信索引

小程序主要是從a文件中獲取用戶數(shù)據(jù)，從a中設(shè)置界面樣式，從aon中配置跳轉(zhuǎn)的第一個頁面，默認(rèn)跳轉(zhuǎn)page標(biāo)簽里的index.wxml頁面。當(dāng)然你可以自行配置。

四、小程序測試上線發(fā)布

當(dāng)一切都準(zhǔn)備完畢后，如果我們想要在手機上測試自己的小程序的時候，只需要點擊預(yù)覽即可，如圖：

然后就可以在手機上看到效果了；我們從我們創(chuàng)建的小程序可以看到，此時的小程序是無法上傳的，那么這是為什么了？其實這就是測試號的問題，所以我們需要自行注冊一個小程序，當(dāng)然，這就需要我們自備一個郵箱了，如圖：

填寫完畢后再去我們填入的郵箱處打開騰訊發(fā)給我們的郵件，里面有一個激活鏈接，此時點擊就可以使用了，如圖：

此時我們使用該AppID來創(chuàng)建一個小程序，當(dāng)然，由于我使用了另一個微信號來注冊這個小程序，因此還需重新掃碼這個AppID才有用，意思就是用哪個微信號綁定的小程序AppID就用哪個號掃碼了創(chuàng)建微信小程序，如圖：

此時就有了上傳按鈕，我們點擊它，就可以進行上傳了，如圖：

此時我們再去小程序的后臺，可以發(fā)現(xiàn)版本管理中就多了個我們剛剛上傳的開發(fā)版本的提交記錄，如圖：

此時我們點擊提交審核后，會出現(xiàn)無法提交，這是因為小程序信息沒有填寫完整，所以我們需要填寫，如圖：

填寫完畢后，然后再次上傳我們的項目，這個時候就可以提交審核了，如圖：

然后按照提示一步步操作就可以進行提交審核了，接下來就是慢慢等待審核工作是否完成了，這里我填寫的小程序信息是"簡易編程網(wǎng)",感興趣的小伙伴們可以試試，是否能搜索到該小程序。不過這里有一點需要注意的是，不能提交一個demo形式的項目，必須要是正式的。后續(xù)小編將會告訴大家如何才能通過審核。

五、總結(jié)

本文和大家一起講述了小程序的創(chuàng)建和小程序所對應(yīng)的文件的作用，由于咱們后期的作品還有很多都涉及到線上使用，所以這里咱們以后都會選擇使用正式注冊的小程序，而非測試號；下篇文章小編將帶大家一起來講講關(guān)于小程序項目的各項配置。

第二天-------小程序的配置

一、前言

上篇文章我們談到了關(guān)于小程序的項目文件結(jié)構(gòu)，了解到小程序的運行流程，其中小程序的項目各種配置是很重要的，他直接決定了項目的布局和功能，下面我們一起來看下小程序中的一些配置文件的使用方法吧。

二、項目配置文件

文件名為，這個文件被用來記錄所有在開發(fā)者工具上所做的配置，這個文件中的配置一般不需要我們來手動修改，因此可以跳過。

三、全局配置文件

可以將這些配置參數(shù)應(yīng)用到所有的文件當(dāng)中去，文件名為aon，如圖：

該文件一般來說可以配置頁面上的很多選項，并且是通過設(shè)置常用的屬性來進行功能的實現(xiàn)的。常用屬性如下：

屬性	類型	必填	描述	最低版本
entryPagePath	string	否	小程序默認(rèn)啟動首頁
pages	string[]	是	頁面路徑列表
window	Object	否	全局的默認(rèn)窗口表現(xiàn)
tabBar	Object	否	底部 tab 欄的表現(xiàn)
networkTimeout	Object	否	網(wǎng)絡(luò)超時時間
debug	boolean	否	是否開啟 debug 模式，默認(rèn)關(guān)閉
functionalPages	boolean	否	是否啟用插件功能頁，默認(rèn)關(guān)閉	2.1.0
subpackages	Object[]	否	分包結(jié)構(gòu)配置	1.7.3
workers	string	否	Worker 代碼放置的目錄	1.9.90
requiredBackgroundModes	string[]	否	需要在后臺使用的能力，如「音樂播放」
plugins	Object	否	使用到的插件	1.9.6
preloadRule	Object	否	分包預(yù)下載規(guī)則	2.3.0
resizable	boolean	否	PC 小程序是否支持用戶任意改變窗口大小（包括最大化窗口）；iPad 小程序是否支持屏幕旋轉(zhuǎn)。默認(rèn)關(guān)閉	2.3.0
usingComponents	Object	否	全局自定義組件配置	開發(fā)者工具 1.02.1810190
permission	Object	否	小程序接口權(quán)限相關(guān)設(shè)置	微信客戶端 7.0.0
sitemapLocation	string	是	指明 的位置
style	string	否	指定使用升級后的weui樣式	2.8.0
useExtendedLib	Object	否	指定需要引用的擴展庫	2.2.1
entranceDeclare	Object	否	微信消息用小程序打開	微信客戶端7.0.9
darkmode	boolean	否	小程序支持 DarkMode	2.11.0
themeLocation	string	否	指明 的位置，darkmode為true為必填	開發(fā)者工具 1.03.2004271
lazyCodeLoading	string	否	配置自定義組件代碼按需注入	2.11.1
singlePage	Object	否	單頁模式相關(guān)配置	2.12.0
supportedMaterials	Object	否	聊天素材小程序打開相關(guān)配置	2.14.3
serviceProviderTicket	string	否	定制化型服務(wù)商票據(jù)
embeddedAppIdList	string[]	否	內(nèi)嵌小程序 appId

這些屬性同時又對應(yīng)有很多選項，如下：

entryPagePath

指定小程序的默認(rèn)啟動路徑（首頁），常見情景是從微信聊天列表頁下拉啟動、小程序列表啟動等。如果不填，將默認(rèn)為 pages 列表的第一項。不支持帶頁面路徑參數(shù)。

{ "entryPagePath": "pages/index/index" }

pages

用于指定小程序由哪些頁面組成，每一項都對應(yīng)一個頁面的 路徑（含文件名） 信息。文件名不需要寫文件后綴，框架會自動去尋找對應(yīng)位置的 .json, .js, .wxml, .wxss 四個文件進行處理。

未指定 entryPagePath 時，數(shù)組的第一項代表小程序的初始頁面（首頁）。

小程序中新增/減少頁面，都需要對 pages 數(shù)組進行修改。

如開發(fā)目錄為：

├── a ├── aon ├── a ├── pages │ │── index │ │ ├── index.wxml │ │ ├── index.js │ │ ├── index.json │ │ └── index.wxss │ └── logs │ ├── logs.wxml │ └── logs.js └── utils

則需要在 aon 中寫

{ "pages": ["pages/index/index", "pages/logs/logs"] }

window

用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。

屬性	類型	默認(rèn)值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	導(dǎo)航欄背景顏色，如 #000000
navigationBarTextStyle	string	white	導(dǎo)航欄標(biāo)題顏色，僅支持 black / white
navigationBarTitleText	string		導(dǎo)航欄標(biāo)題文字內(nèi)容
navigationStyle	string	default	導(dǎo)航欄樣式，僅支持以下值：default 默認(rèn)樣式 custom 自定義導(dǎo)航欄，只保留右上角膠囊按鈕。參見注 2。	iOS/Android 微信客戶端 6.6.0，Windows 微信客戶端不支持
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的樣式，僅支持 dark / light
backgroundColorTop	string	#ffffff	頂部窗口的背景色，僅 iOS 支持	微信客戶端 6.5.16
backgroundColorBottom	string	#ffffff	底部窗口的背景色，僅 iOS 支持	微信客戶端 6.5.16
enablePullDownRefresh	boolean	false	是否開啟全局的下拉刷新。詳見 Page.onPullDownRefresh
onReachBottomDistance	number	50	頁面上拉觸底事件觸發(fā)時距頁面底部距離，單位為 px。詳見 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋轉(zhuǎn)設(shè)置，支持 auto / portrait / landscape 詳見 響應(yīng)顯示區(qū)域變化	2.4.0 (auto) / 2.5.0 (landscape)
restartStrategy	string	homePage	重新啟動策略配置	2.8.0
initialRenderingCache	string		頁面初始渲染緩存配置，支持 static / dynamic	2.11.1
visualEffectInBackground	string	none	切入系統(tǒng)后臺時，隱藏頁面內(nèi)容，保護用戶隱私。支持 hidden / none	2.15.0

• 注 1：HexColor（十六進制顏色值），如"#ff00ff"
• 注 2：關(guān)于navigationStyle
• iOS/Android 客戶端 7.0.0 以下版本，navigationStyle 只在 aon 中生效。
• iOS/Android 客戶端 6.7.2 版本開始，navigationStyle: custom 對 web-view 組件無效
• 開啟 custom 后，低版本客戶端需要做好兼容。開發(fā)者工具基礎(chǔ)庫版本切到 1.7.0（不代表最低版本，只供調(diào)試用）可方便切到舊視覺
• Windows 客戶端 3.0 及以上版本，為了給用戶提供更符合桌面軟件的使用體驗，統(tǒng)一了小程序窗口的導(dǎo)航欄，navigationStyle: custom 不再生效

restartStrategy

基礎(chǔ)庫 2.8.0 開始支持，低版本需做兼容處理。

重新啟動策略配置

可選值	含義
homePage	（默認(rèn)值）如果從這個頁面退出小程序，下次將從首頁冷啟動
homePageAndLatestPage	如果從這個頁面退出小程序，下次冷啟動后立刻加載這個頁面，頁面的參數(shù)保持不變（不可用于 tab 頁）

如：

{ "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" } }

tabBar

如果小程序是一個多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現(xiàn)，以及 tab 切換時顯示的對應(yīng)頁面。

屬性	類型	必填	默認(rèn)值	描述	最低版本
color	HexColor	是		tab 上的文字默認(rèn)顏色，僅支持十六進制顏色
selectedColor	HexColor	是		tab 上的文字選中時的顏色，僅支持十六進制顏色
backgroundColor	HexColor	是		tab 的背景色，僅支持十六進制顏色
borderStyle	string	否	black	tabbar 上邊框的顏色， 僅支持 black / white
list	Array	是		tab 的列表，詳見 list 屬性說明，最少 2 個、最多 5 個 tab
position	string	否	bottom	tabBar 的位置，僅支持 bottom / top
custom	boolean	否	false	自定義 tabBar，見詳情	2.5.0

其中 list 接受一個數(shù)組，只能配置最少 2 個、最多 5 個 tab。tab 按數(shù)組的順序排序，每個項都是一個對象，其屬性值如下：

屬性	類型	必填	說明
pagePath	string	是	頁面路徑，必須在 pages 中先定義
text	string	是	tab 上按鈕文字
iconPath	string	否	圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片。當(dāng) position 為 top 時，不顯示 icon。
selectedIconPath	string	否	選中時的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片。當(dāng) position 為 top 時，不顯示 icon。

networkTimeout

各類網(wǎng)絡(luò)請求的超時時間，單位均為毫秒。

屬性	類型	必填	默認(rèn)值	說明
request	number	否	60000	wx.request 的超時時間，單位：毫秒。
connectSocket	number	否	60000	wx.connectSocket 的超時時間，單位：毫秒。
uploadFile	number	否	60000	wx.uploadFile 的超時時間，單位：毫秒。
downloadFile	number	否	60000	wx.downloadFile 的超時時間，單位：毫秒。

debug

可以在開發(fā)者工具中開啟 debug 模式，在開發(fā)者工具的控制臺面板，調(diào)試信息以 info 的形式給出，其信息有 Page 的注冊，頁面路由，數(shù)據(jù)更新，事件觸發(fā)等。可以幫助開發(fā)者快速定位一些常見的問題。

functionalPages

基礎(chǔ)庫 2.1.0 開始支持，低版本需做兼容處理。

插件所有者小程序需要設(shè)置這一項來啟用插件功能頁。

subpackages

微信客戶端 6.6.0 ，基礎(chǔ)庫 1.7.3 及以上版本支持

啟用分包加載時，聲明項目分包結(jié)構(gòu)。

寫成 subPackages 也支持。

workers

基礎(chǔ)庫 1.9.90 開始支持，低版本需做兼容處理。

使用 Worker 處理多線程任務(wù)時，設(shè)置 Worker 代碼放置的目錄

requiredBackgroundModes

微信客戶端 6.7.2 及以上版本支持

申明需要后臺運行的能力，類型為數(shù)組。目前支持以下項目：

• audio: 后臺音樂播放
• location: 后臺定位

如：

{ "pages": ["pages/index/index"], "requiredBackgroundModes": ["audio", "location"] }

注：在此處申明了后臺運行的接口，開發(fā)版和體驗版上可以直接生效，正式版還需通過審核。

plugins

基礎(chǔ)庫 1.9.6 開始支持，低版本需做兼容處理。

聲明小程序需要使用的插件。

preloadRule

基礎(chǔ)庫 2.3.0 開始支持，低版本需做兼容處理。

聲明分包預(yù)下載的規(guī)則。

resizable

基礎(chǔ)庫 2.3.0 開始支持，低版本需做兼容處理。

在 iPad 上運行的小程序可以設(shè)置支持屏幕旋轉(zhuǎn)。

在 PC 上運行的小程序，用戶可以按照任意比例拖動窗口大小，也可以在小程序菜單中最大化窗口

usingComponents

開發(fā)者工具 1.02.1810190 及以上版本支持

在此處聲明的自定義組件視為全局自定義組件，在小程序內(nèi)的頁面或自定義組件中可以直接使用而無需再聲明。

permission

微信客戶端 7.0.0 及以上版本支持

小程序接口權(quán)限相關(guān)設(shè)置。字段類型為 Object，結(jié)構(gòu)為：

屬性	類型	必填	默認(rèn)值	描述
	PermissionObject	否		位置相關(guān)權(quán)限聲明

PermissionObject 結(jié)構(gòu)

屬性	類型	必填	默認(rèn)值	說明
desc	string	是		小程序獲取權(quán)限時展示的接口用途說明。最長 30 個字符

如：

{ "pages": ["pages/index/index"], "permission": { "": { "desc": "你的位置信息將用于小程序位置接口的效果展示" // 高速公路行駛持續(xù)后臺定位 } } }

sitemapLocation

指明 的位置；默認(rèn)為 '' 即在 aon 同級目錄下名字的 文件

style

基礎(chǔ)庫 2.8.0 開始支持，低版本需做兼容處理。

微信客戶端 7.0 開始，UI 界面進行了大改版。小程序也進行了基礎(chǔ)組件的樣式升級。aon 中配置 "style": "v2"可表明啟用新版的組件樣式。

本次改動涉及的組件有 button icon radio checkbox switch slider?？汕巴〕绦蚴纠M行體驗。

useExtendedLib

基礎(chǔ)庫 2.2.1 開始支持，低版本需做兼容處理。

最新的 nightly 版開發(fā)者工具開始支持，同時基礎(chǔ)庫從支持 npm 的版本（2.2.1）起支持

指定需要引用的擴展庫。目前支持以下項目：

• kbone: 多端開發(fā)框架
• weui: WeUI 組件庫

指定后，相當(dāng)于引入了對應(yīng)擴展庫相關(guān)的最新版本的 npm 包，同時也不占用小程序的包體積。rc工具版本支持分包引用。用法如下：

{ "useExtendedLib": { "kbone": true, "weui": true } }

entranceDeclare

微信客戶端 7.0.9 及以上版本支持，iOS 暫不支持

聊天位置消息用打車類小程序打開，詳情參考。

"entranceDeclare": { "locationMessage": { "path": "pages/index/index", "query": "foo=bar" } }

darkmode

開發(fā)者工具 1.03.2004271 及以上版本支持，基礎(chǔ)庫 2.11.0 及以上版本支持

微信iOS客戶端 7.0.12 版本、Android客戶端 7.0.13 版本正式支持 DarkMode，可通過配置"darkmode": true表示當(dāng)前小程序可適配 DarkMode，所有基礎(chǔ)組件均會根據(jù)系統(tǒng)主題展示不同的默認(rèn)樣式，navigation bar 和 tab bar 也會根據(jù)開發(fā)者的配置自動切換。

配置后，請根據(jù)DarkMode 適配指南自行完成基礎(chǔ)樣式以外的適配工作。

{ "darkmode": true }

themeLocation

自定義 的路徑，當(dāng)配置"darkmode":true時，當(dāng)前配置文件為必填項。

{ "themeLocation": "/path/to/" }

lazyCodeLoading

目前僅支持值 requiredComponents，代表開啟小程序「按需注入」特性。

{ "lazyCodeLoading": "requiredComponents" }

singlePage

基礎(chǔ)庫 2.11.3 及以上版本支持，目前分享到朋友圈 (Beta) 后打開會進入單頁模式

單頁模式相關(guān)配置

屬性	類型	必填	默認(rèn)值	描述
navigationBarFit	String	否	默認(rèn)自動調(diào)整，若原頁面是自定義導(dǎo)航欄，則為 float，否則為 squeezed	導(dǎo)航欄與頁面的相交狀態(tài)，值為 float 時表示導(dǎo)航欄浮在頁面上，與頁面相交；值為 squeezed 時表示頁面被導(dǎo)航欄擠壓，與頁面不相交

配置示例

{ "pages": ["pages/index/index", "pages/logs/index"], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首頁" }, { "pagePath": "pages/logs/logs", "text": "日志" } ] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true, }

embeddedAppIdList

指定小程序可通過
wx.openEmbeddedMiniProgram打開的小程序名單。

{ "embeddedAppIdList": ["wxe5f52902cf4de896"] }

四、頁面配置文件

每個我們所創(chuàng)建的頁面文件都會有這么一個文件，它的文件名是"文件夾名.json"，如圖：

這就是單頁面的配置文件，我們都知道一個項目是由一個個頁面組合而成的，所以每個頁面不能用同一個配置，因此我們可以給每個頁面不同的配置，相當(dāng)于是局部配置，所以只能作用于當(dāng)前頁面，常用的屬性如下：

屬性	類型	默認(rèn)值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	導(dǎo)航欄背景顏色，如 #000000
navigationBarTextStyle	string	white	導(dǎo)航欄標(biāo)題顏色，僅支持 black / white
navigationBarTitleText	string		導(dǎo)航欄標(biāo)題文字內(nèi)容
navigationStyle	string	default	導(dǎo)航欄樣式，僅支持以下值：default 默認(rèn)樣式 custom 自定義導(dǎo)航欄，只保留右上角膠囊按鈕。參見注 1。	iOS/Android 微信客戶端 7.0.0，Windows 微信客戶端不支持
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的樣式，僅支持 dark / light
backgroundColorTop	string	#ffffff	頂部窗口的背景色，僅 iOS 支持	微信客戶端 6.5.16
backgroundColorBottom	string	#ffffff	底部窗口的背景色，僅 iOS 支持	微信客戶端 6.5.16
enablePullDownRefresh	boolean	false	是否開啟當(dāng)前頁面下拉刷新。詳見 Page.onPullDownRefresh
onReachBottomDistance	number	50	頁面上拉觸底事件觸發(fā)時距頁面底部距離，單位為px。詳見 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋轉(zhuǎn)設(shè)置，支持 auto / portrait / landscape 詳見 響應(yīng)顯示區(qū)域變化	2.4.0 (auto) / 2.5.0 (landscape)
disableScroll	boolean	false	設(shè)置為 true 則頁面整體不能上下滾動。只在頁面配置中有效，無法在 aon 中設(shè)置
usingComponents	Object	否	頁面自定義組件配置	1.6.3
initialRenderingCache	string		頁面初始渲染緩存配置，支持 static / dynamic	2.11.1
style	string	default	啟用新版的組件樣式	2.10.2
singlePage	Object	否	單頁模式相關(guān)配置	2.12.0
restartStrategy	string	homePage	重新啟動策略配置	2.8.0

頁面配置中只能設(shè)置 aon 中 window 對應(yīng)的配置項，以決定本頁面的窗口表現(xiàn)，所以無需寫 window 這個屬性。

• 注 1：關(guān)于navigationStyle
• iOS/Android 客戶端 7.0.0 以下版本，navigationStyle 只在 aon 中生效。
• iOS/Android 客戶端 6.7.2 版本開始，navigationStyle: custom 對 web-view 組件無效
• 開啟 custom 后，低版本客戶端需要做好兼容。開發(fā)者工具基礎(chǔ)庫版本切到 1.7.0（不代表最低版本，只供調(diào)試用）可方便切到舊視覺
• Windows 客戶端 3.0 及以上版本，為了給用戶提供更符合桌面軟件的使用體驗，統(tǒng)一了小程序窗口的導(dǎo)航欄，navigationStyle: custom 不再生效

singlePage

基礎(chǔ)庫 2.11.3 及以上版本支持，目前分享到朋友圈 (Beta) 后打開會進入單頁模式

單頁模式相關(guān)配置

屬性	類型	必填	默認(rèn)值	描述
navigationBarFit	String	否	默認(rèn)自動調(diào)整，若原頁面是自定義導(dǎo)航欄，則為 float，否則為 squeezed	導(dǎo)航欄與頁面的相交狀態(tài)，值為 float 時表示導(dǎo)航欄浮在頁面上，與頁面相交；值為 squeezed 時表示頁面被導(dǎo)航欄擠壓，與頁面不相交

restartStrategy

基礎(chǔ)庫 2.8.0 開始支持，低版本需做兼容處理。

重新啟動策略配置，與 aon 中一致。

配置示例

{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }

那么當(dāng)我們要創(chuàng)建其它頁面的時候該怎么辦了，很簡單，如圖：

首先新建一個文件夾，比如register，然后新建page，還是register，這樣就可以創(chuàng)建一個單頁面所要用到的所有文件了，如圖：

不過此時我們可以看到，我們是沒有能訪問該頁面的條件的，現(xiàn)在我們給他修改一下，如圖：

可以看到，此時顯示的就是register頁面的默認(rèn)內(nèi)容了，實現(xiàn)的方法就是把該頁面的地址放在第一位，這樣默認(rèn)啟動頁面就是register頁面了。

五、sitemap配置

小程序根目錄下的 文件用于配置小程序及其頁面是否允許被微信索引，文件內(nèi)容為一個 JSON 對象，如果沒有 ，則默認(rèn)為所有頁面都允許被索引； 有以下屬性：

配置項

屬性	類型	必填	描述
rules	Object[]	是	索引規(guī)則列表

rules

rules 配置項指定了索引規(guī)則，每項規(guī)則為一個JSON對象，屬性如下所示：

屬性	類型	必填	默認(rèn)值	取值	取值說明
action	string	否	"allow"	"allow"、"disallow"	命中該規(guī)則的頁面是否能被索引
page	string	是		"*"、頁面的路徑	* 表示所有頁面，不能作為通配符使用
params	string[]	否	[]		當(dāng) page 字段指定的頁面在被本規(guī)則匹配時可能使用的頁面參數(shù)名稱的列表（不含參數(shù)值）
matching	string	否	"inclusive"	參考 matching 取值說明	當(dāng) page 字段指定的頁面在被本規(guī)則匹配時，此參數(shù)說明 params 匹配方式
priority	Number	否			優(yōu)先級，值越大則規(guī)則越早被匹配，否則默認(rèn)從上到下匹配

matching 取值說明

值	說明
exact	當(dāng)小程序頁面的參數(shù)列表等于 params 時，規(guī)則命中
inclusive	當(dāng)小程序頁面的參數(shù)列表包含 params 時，規(guī)則命中
exclusive	當(dāng)小程序頁面的參數(shù)列表與 params 交集為空時，規(guī)則命中
partial	當(dāng)小程序頁面的參數(shù)列表與 params 交集不為空時，規(guī)則命中

配置示例

{ "rules":[{ "action": "allow", "page": "path/to/page", "params": ["a", "b"], "matching": "exact" }, { "action": "disallow", "page": "path/to/page" }] }

• path/to/page?a=1&b=2 => 優(yōu)先索引
• path/to/page => 不被索引
• path/to/page?a=1 => 不被索引
• path/to/page?a=1&b=2&c=3 => 不被索引
• 其他頁面都會被索引

{ "rules":[{ "action": "allow", "page": "path/to/page", "params": ["a", "b"], "matching": "inclusive" }, { "action": "disallow", "page": "path/to/page" }] }

• path/to/page?a=1&b=2 => 優(yōu)先索引
• path/to/page?a=1&b=2&c=3 => 優(yōu)先索引
• path/to/page => 不被索引
• path/to/page?a=1 => 不被索引
• 其他頁面都會被索引

{ "rules":[{ "action": "allow", "page": "path/to/page", "params": ["a", "b"], "matching": "exclusive" }, { "action": "disallow", "page": "path/to/page" }] }

• path/to/page => 優(yōu)先索引
• path/to/page?c=3 => 優(yōu)先索引
• path/to/page?a=1 => 不被索引
• path/to/page?a=1&b=2 => 不被索引
• 其他頁面都會被索引

{ "rules":[{ "action": "allow", "page": "path/to/page", "params": ["a", "b"], "matching": "partial" }, { "action": "disallow", "page": "path/to/page" }] }

• path/to/page?a=1 => 優(yōu)先索引
• path/to/page?a=1&b=2 => 優(yōu)先索引
• path/to/page => 不被索引
• path/to/page?c=3 => 不被索引
• 其他頁面都會被索引

注：沒有 則默認(rèn)所有頁面都能被索引

注：{"action": "allow", "page": "\*"} 是優(yōu)先級最低的默認(rèn)規(guī)則，未顯式指明 "disallow" 的都默認(rèn)被索引

六、總結(jié)

以上的內(nèi)容大部分均來自于騰訊官方文檔，感興趣可以去看看，這里小編只是加了一些個人的拙見，不夠上述內(nèi)容我們肯定是需要了解并且應(yīng)用到的。

第三天-------小程序的組件

一、前言

小程序中的組件其實相當(dāng)于網(wǎng)頁中的HTML標(biāo)簽，只不過標(biāo)簽名字不一樣，接下來我們一起來看下微信小程序都給我們提供了哪些組件吧。

二、容器組件

可以存放其它組件的容器組件，目前主要有如下幾種：

cover-image覆蓋在原生組件之上的圖片視圖 cover-view覆蓋在原生組件之上的文本視圖 match-media 匹配檢測節(jié)點 movable-area的可移動區(qū)域 movable-view可移動的視圖容器，在頁面中可以拖拽滑動 page-container頁面容器 scroll-view可滾動視圖區(qū)域 share-element共享元素 swiper滑塊視圖容器 swiper-item僅可放置在swiper組件中，寬高自動設(shè)置為100% view視圖容器

這里小編來和大家說說常用的一些容器組件。

三、基礎(chǔ)內(nèi)容組件

這里給我們提供了常見的幾種圖標(biāo)還有進度條，如果你想用HTML中的標(biāo)簽請在富文本組件中使用，另外，小程序中的文本組件是text，如下：

icon圖標(biāo) progress進度條 rich-text富文本 text文本

四、表單組件

button按鈕 checkbox多選項目 checkbox-group多項選擇器，內(nèi)部由多個checkbox組成 editor富文本編輯器，可以對圖片、文字進行編輯 form表單 input輸入框 keyboard-accessory設(shè)置 input / textarea 聚焦時鍵盤上方 cover-view / cover-image 工具欄視圖 label用來改進表單組件的可用性 picker從底部彈起的滾動選擇器 picker-view嵌入頁面的滾動選擇器 picker-view-column滾動選擇器子項 radio單選項目 radio-group單項選擇器，內(nèi)部由多個 radio 組成 slider滑動選擇器 switch開關(guān)選擇器 textarea多行輸入框

五、導(dǎo)航組件

本項目內(nèi)的頁面跳轉(zhuǎn)，不過不支持外部鏈接的跳轉(zhuǎn)。

functional-page-navigator僅在插件中有效，用于跳轉(zhuǎn)到插件功能頁 navigator頁面鏈接

六、媒體組件

audio音頻 camera系統(tǒng)相機 image圖片 live-player實時音視頻播放（v2.9.1 起支持同層渲染） live-pusher實時音視頻錄制（v2.9.1 起支持同層渲染） video視頻（v2.4.0 起支持同層渲染） voip-room多人音視頻對話

七、地圖

map地圖（v2.7.0 起支持同層渲染，相關(guān)api wx.createMapContext

八、畫布

canvas 畫布

九、開放組件

web-view承載網(wǎng)頁的容器 adBanner 廣告 ad-custom原生模板 廣告 official-account公眾號關(guān)注組件 open-data用于展示微信開放的數(shù)據(jù)

專門用來做廣告或者獲取小程序的用戶的數(shù)據(jù)。

十、原生組件

native-component小程序中的部分組件是由客戶端創(chuàng)建的原生組件

小程序的原生組件為：

• camera
• canvas
• input（僅在focus時表現(xiàn)為原生組件）
• live-player
• live-pusher
• map
• textarea
• video

原生組件的層級是最高的，所以頁面中的其他組件無論設(shè)置 z-index 為多少，都無法蓋在原生組件上。原生組件還無法在 picker-view中使用。

原生組件的事件監(jiān)聽不能使用 bind:eventname 的寫法，只支持 bindeventname。原生組件也不支持 catch 和 capture 的事件綁定方式。原生組件會遮擋 vConsole 彈出的調(diào)試面板。為了解決原生組件層級最高的限制。小程序?qū)ｉT提供了 cover-view和 cover-image組件，可以覆蓋在部分原生組件上面。這兩個組件也是原生組件，但是使用限制與其他原生組件有所不同。

十一、無障礙訪問

aria-component滿足視障人士對于小程序的訪問需求

十二、導(dǎo)航欄

navigation-bar 頁面導(dǎo)航條配置節(jié)點，用于指定導(dǎo)航欄的一些屬性

十三、頁面屬性配置節(jié)點

page-meta頁面屬性配置節(jié)點，用于指定頁面的一些屬性、監(jiān)聽頁面事件

十四、可視化

如果你覺得一個個寫組件很麻煩，那么你可以使用可視化的方式來使用組件，如圖：

這樣可以幫助我們快速構(gòu)建頁面。

十五、ui組件

雖然微信給我們提供了一些組件，但是這些組件并不是特別美觀，于是乎，小編決定使用一些已經(jīng)寫好了三方的組件，這里推薦騰訊團隊做的一個ui組件庫-----WeUI。這里小編已經(jīng)下載好了，給大家一個地址：
（訪問密碼：6511），下載好了之后，我們將其放入到項目中去，然后添加到項目的全局樣式文件，如圖：

然后就可以使用了，如圖：

雖然說weui的組件做的還不錯，基本上不用我們自己寫樣式，但是文檔寫的不適合小白學(xué)習(xí)，所以這里小編給大家推薦一款新的小程序組件庫，他就是iview weapp，下載地址：
（訪問密碼：6511），由于iview weapp和weui的樣式文件不一樣，因此我們只有一個個導(dǎo)入，需要什么導(dǎo)入什么，首先打開頁面配置文件，如下：

然后使用自定義的組件名來使用這個組件，如下：

注：這里我們需要刪除example和build，否則會報錯。

十六、自定義組件

在實際開發(fā)中，并不是所有的組件都能滿足我們的需求，我們總有需要自己寫組件的時候，微信小程序可以讓我們輕松實現(xiàn)自定義組件，首先我們創(chuàng)建一個自定義的組件文件夾，然后分別寫入頁面，樣式和腳本，如圖：

然后我們將該組件導(dǎo)入到我們要應(yīng)用到該組件的頁面配置文件中去，如圖：

然后引入該組件bb，如圖：

十七、數(shù)據(jù)傳遞

很多時候，咱們組件中的數(shù)據(jù)并不全是靜態(tài)的，有的時候也要做成動態(tài)的響應(yīng)式的組件，這個時候需要我們進行數(shù)據(jù)傳遞，首先我們需要在頁面文件夾的js文件中去添加需要傳遞的數(shù)據(jù)的鍵值對，如圖：

十八、條件渲染

還是使用上面的d1數(shù)據(jù)，條件渲染是將我們所設(shè)置的條件進行對比，哪個組件的條件符合就顯示哪個組件，如圖：

十九、列表渲染

主要是通過遍歷的方式來輸出一些數(shù)組字典對象，如下：

二十、模板

使用模板增加了代碼的復(fù)用性，想用哪個就用哪個，如圖：

這里的模板中的data屬性我們也可以直接在里面給他賦值，如圖：

二十一、引入模板

雖然我們可以自己制作模板，但是很多時候為了代碼的簡潔性，我們需要進行拆分代碼，這個時候就可以使用引入的概念，在此之前，我們需要寫一個模板文件，如圖：

然后導(dǎo)入它，如圖：

當(dāng)然，除此之外還有一個更簡單的導(dǎo)入方法，如圖：

可以看到，template中的內(nèi)容他是不會包含進去的，也就是說他只會引入除模板以外的組件和內(nèi)容。

二十二、總結(jié)

本文主要講到了關(guān)于微信小程序中的組件的應(yīng)用，其實也就是我們熟知的頁面標(biāo)簽，通過他們我們可以在頁面中嵌入一些元素，由于現(xiàn)在很多三方組件的崛起，建議大家盡量用三方框架去做。

注：文中組件的來歷及解釋部分參考微信開放文檔

第四天-------小程序的樣式

一、前言

前面我們講到了小程序的組件，簡直是花樣多多，不過光有組件可不行，我們還得讓組件更加的有魅力并且還能讓組件處于不同的位置什么時候出現(xiàn)，這些都是需要我們通過樣式來實現(xiàn)的。

二、全局樣式

顧名思義，可以在全局中使用，要想聲明在全局都可以使用的樣式，那就要求我們必須在a中聲明一些樣式，如圖：

然后再在模板文件中引入該類名，如圖：

可以看到，此時就已經(jīng)將全局樣式應(yīng)用到該文本組件中了。

三、頁面樣式

也就是我們經(jīng)常提到的局部樣式，它只作用于該文件夾中的模板文件，也就是該文件夾中的一個個組件中，如果用在其它地方的話，那是沒有效果的。首先我們在該模板文件中寫入樣式，如圖：

然后我們再在全局樣式文件中寫一個一模一樣的類名，如圖：

此時我們再來將該樣式應(yīng)用到文本組件中，如圖：

可以看到，此時的全局樣式就失效了，當(dāng)有局部樣式的時候一切以局部樣式為主。

四、導(dǎo)入樣式

我們可以將樣式寫入一個文件，然后導(dǎo)入到局部樣式文件中，如圖：

接下來就可以使用了，如圖：

五、內(nèi)聯(lián)樣式

還可以直接在組件中寫樣式，如下：

這里其實用到的就是我們之前在組件那篇文章中提到的數(shù)據(jù)綁定。

六、選擇器

既然有樣式肯定要有選擇器，選擇器能夠幫助我們精準(zhǔn)定位一些組件并給他們賦予更多精美的樣式，如下：

選擇器	樣例	樣例描述
.class	.aa	選擇所有擁有 class="aa"的組件
#id	#aa	選擇擁有 id="aa" 的組件
element	view	選擇所有 view 組件
element, element	view, text	選擇所有文檔的 view 組件和所有的text 組件
::after	view::after	在 view 組件后邊插入內(nèi)容
::before	view::before	在 view 組件前邊插入內(nèi)容

七、總結(jié)

微信小程序中的樣式使用方法也比較多，多寫寫就沒什么問題，下篇文章我們將繼續(xù)講解關(guān)于微信小程序中的各種事件。