第一天-啟動(dòng)第一個(gè)小程序

一、前言

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

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

首先我們需要打開(kāi)微信公眾號(hào)，然后注冊(cè)一個(gè)訂閱號(hào)即可，注冊(cè)完畢后登錄并進(jìn)入公眾號(hào)后臺(tái)，如圖：

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

此時(shí)，打開(kāi)新頁(yè)面后選擇小程序，如圖：

然后我們選擇工具選項(xiàng)，如圖：

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

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

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

選擇安裝位置，如圖：

點(diǎn)擊安裝，此時(shí)靜靜等待安裝即可，安裝好后，直接點(diǎn)擊運(yùn)行，第一次運(yùn)行會(huì)彈出一個(gè)二維碼框，如圖：

然后我們用綁定這個(gè)公眾號(hào)的微信號(hào)來(lái)掃碼，如圖：

然后我們點(diǎn)擊加號(hào)，此時(shí)就可以創(chuàng)建小程序，如圖：

這里有一個(gè)appid，我們可以通過(guò)小程序來(lái)獲取，首先我們退出公眾號(hào)的登錄，然后點(diǎn)擊小程序，如圖：

然后點(diǎn)擊前往注冊(cè)，如圖：

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

此時(shí)就可以把這個(gè)AppID填寫(xiě)進(jìn)去了，點(diǎn)擊確定就可以打開(kāi)開(kāi)發(fā)者工具了，如圖：

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

我們來(lái)看下項(xiàng)目中的文件所代表的意思，如下：

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

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

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

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

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

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

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

此時(shí)就有了上傳按鈕，我們點(diǎn)擊它，就可以進(jìn)行上傳了，如圖：

此時(shí)我們?cè)偃バ〕绦虻暮笈_(tái)，可以發(fā)現(xiàn)版本管理中就多了個(gè)我們剛剛上傳的開(kāi)發(fā)版本的提交記錄，如圖：

此時(shí)我們點(diǎn)擊提交審核后，會(huì)出現(xiàn)無(wú)法提交，這是因?yàn)樾〕绦蛐畔](méi)有填寫(xiě)完整，所以我們需要填寫(xiě)，如圖：

填寫(xiě)完畢后，然后再次上傳我們的項(xiàng)目，這個(gè)時(shí)候就可以提交審核了，如圖：

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

五、總結(jié)

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

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

一、前言

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

二、項(xiàng)目配置文件

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

三、全局配置文件

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

該文件一般來(lái)說(shuō)可以配置頁(yè)面上的很多選項(xiàng)，并且是通過(guò)設(shè)置常用的屬性來(lái)進(jìn)行功能的實(shí)現(xiàn)的。常用屬性如下：

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

這些屬性同時(shí)又對(duì)應(yīng)有很多選項(xiàng)，如下：

entryPagePath

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

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

pages

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

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

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

如開(kāi)發(fā)目錄為：

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

則需要在 aon 中寫(xiě)

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

window

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

屬性	類(lèi)型	默認(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)航欄，只保留右上角膠囊按鈕。參見(jiàn)注 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	是否開(kāi)啟全局的下拉刷新。詳見(jiàn) Page.onPullDownRefresh
onReachBottomDistance	number	50	頁(yè)面上拉觸底事件觸發(fā)時(shí)距頁(yè)面底部距離，單位為 px。詳見(jiàn) Page.onReachBottom
pageOrientation	string	portrait	屏幕旋轉(zhuǎn)設(shè)置，支持 auto / portrait / landscape 詳見(jiàn) 響應(yīng)顯示區(qū)域變化	2.4.0 (auto) / 2.5.0 (landscape)
restartStrategy	string	homePage	重新啟動(dòng)策略配置	2.8.0
initialRenderingCache	string		頁(yè)面初始渲染緩存配置，支持 static / dynamic	2.11.1
visualEffectInBackground	string	none	切入系統(tǒng)后臺(tái)時(shí)，隱藏頁(yè)面內(nèi)容，保護(hù)用戶隱私。支持 hidden / none	2.15.0

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

restartStrategy

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

重新啟動(dòng)策略配置

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

如：

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

tabBar

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

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

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

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

networkTimeout

各類(lèi)網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間，單位均為毫秒。

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

debug

可以在開(kāi)發(fā)者工具中開(kāi)啟 debug 模式，在開(kāi)發(fā)者工具的控制臺(tái)面板，調(diào)試信息以 info 的形式給出，其信息有 Page 的注冊(cè)，頁(yè)面路由，數(shù)據(jù)更新，事件觸發(fā)等?？梢詭椭_(kāi)發(fā)者快速定位一些常見(jiàn)的問(wèn)題。

functionalPages

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

插件所有者小程序需要設(shè)置這一項(xiàng)來(lái)啟用插件功能頁(yè)。

subpackages

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

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

寫(xiě)成 subPackages 也支持。

workers

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

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

requiredBackgroundModes

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

申明需要后臺(tái)運(yùn)行的能力，類(lèi)型為數(shù)組。目前支持以下項(xiàng)目：

• audio: 后臺(tái)音樂(lè)播放
• location: 后臺(tái)定位

如：

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

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

plugins

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

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

preloadRule

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

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

resizable

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

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

在 PC 上運(yùn)行的小程序，用戶可以按照任意比例拖動(dòng)窗口大小，也可以在小程序菜單中最大化窗口

usingComponents

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

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

permission

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

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

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

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

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

如：

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

sitemapLocation

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

style

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

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

本次改動(dòng)涉及的組件有 button icon radio checkbox switch slider?？汕巴〕绦蚴纠M(jìn)行體驗(yàn)。

useExtendedLib

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

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

指定需要引用的擴(kuò)展庫(kù)。目前支持以下項(xiàng)目：

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

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

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

entranceDeclare

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

聊天位置消息用打車(chē)類(lèi)小程序打開(kāi)，詳情參考。

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

darkmode

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

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

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

{ "darkmode": true }

themeLocation

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

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

lazyCodeLoading

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

{ "lazyCodeLoading": "requiredComponents" }

singlePage

基礎(chǔ)庫(kù) 2.11.3 及以上版本支持，目前分享到朋友圈 (Beta) 后打開(kāi)會(huì)進(jìn)入單頁(yè)模式

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

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

配置示例

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

embeddedAppIdList

指定小程序可通過(guò)
wx.openEmbeddedMiniProgram打開(kāi)的小程序名單。

{ "embeddedAppIdList": ["wxe5f52902cf4de896"] }

四、頁(yè)面配置文件

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

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

屬性	類(lèi)型	默認(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)航欄，只保留右上角膠囊按鈕。參見(jiàn)注 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	是否開(kāi)啟當(dāng)前頁(yè)面下拉刷新。詳見(jiàn) Page.onPullDownRefresh
onReachBottomDistance	number	50	頁(yè)面上拉觸底事件觸發(fā)時(shí)距頁(yè)面底部距離，單位為px。詳見(jiàn) Page.onReachBottom
pageOrientation	string	portrait	屏幕旋轉(zhuǎn)設(shè)置，支持 auto / portrait / landscape 詳見(jiàn) 響應(yīng)顯示區(qū)域變化	2.4.0 (auto) / 2.5.0 (landscape)
disableScroll	boolean	false	設(shè)置為 true 則頁(yè)面整體不能上下滾動(dòng)。只在頁(yè)面配置中有效，無(wú)法在 aon 中設(shè)置
usingComponents	Object	否	頁(yè)面自定義組件配置	1.6.3
initialRenderingCache	string		頁(yè)面初始渲染緩存配置，支持 static / dynamic	2.11.1
style	string	default	啟用新版的組件樣式	2.10.2
singlePage	Object	否	單頁(yè)模式相關(guān)配置	2.12.0
restartStrategy	string	homePage	重新啟動(dòng)策略配置	2.8.0

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

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

singlePage

基礎(chǔ)庫(kù) 2.11.3 及以上版本支持，目前分享到朋友圈 (Beta) 后打開(kāi)會(huì)進(jìn)入單頁(yè)模式

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

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

restartStrategy

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

重新啟動(dòng)策略配置，與 aon 中一致。

配置示例

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

那么當(dāng)我們要?jiǎng)?chuàng)建其它頁(yè)面的時(shí)候該怎么辦了，很簡(jiǎn)單，如圖：

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

不過(guò)此時(shí)我們可以看到，我們是沒(méi)有能訪問(wèn)該頁(yè)面的條件的，現(xiàn)在我們給他修改一下，如圖：

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

五、sitemap配置

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

配置項(xiàng)

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

rules

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

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

matching 取值說(shuō)明

值	說(shuō)明
exact	當(dāng)小程序頁(yè)面的參數(shù)列表等于 params 時(shí)，規(guī)則命中
inclusive	當(dāng)小程序頁(yè)面的參數(shù)列表包含 params 時(shí)，規(guī)則命中
exclusive	當(dāng)小程序頁(yè)面的參數(shù)列表與 params 交集為空時(shí)，規(guī)則命中
partial	當(dāng)小程序頁(yè)面的參數(shù)列表與 params 交集不為空時(shí)，規(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 => 不被索引
• 其他頁(yè)面都會(huì)被索引

{ "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 => 不被索引
• 其他頁(yè)面都會(huì)被索引

{ "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 => 不被索引
• 其他頁(yè)面都會(huì)被索引

{ "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 => 不被索引
• 其他頁(yè)面都會(huì)被索引

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

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

六、總結(jié)

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

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

一、前言

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

二、容器組件

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

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

這里小編來(lái)和大家說(shuō)說(shuō)常用的一些容器組件。

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

這里給我們提供了常見(jiàn)的幾種圖標(biāo)還有進(jìn)度條，如果你想用HTML中的標(biāo)簽請(qǐng)?jiān)诟晃谋窘M件中使用，另外，小程序中的文本組件是text，如下：

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

四、表單組件

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

五、導(dǎo)航組件

本項(xiàng)目?jī)?nèi)的頁(yè)面跳轉(zhuǎn)，不過(guò)不支持外部鏈接的跳轉(zhuǎn)。

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

六、媒體組件

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

七、地圖

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

八、畫(huà)布

canvas 畫(huà)布

九、開(kāi)放組件

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

專(zhuān)門(mén)用來(lái)做廣告或者獲取小程序的用戶的數(shù)據(jù)。

十、原生組件

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

小程序的原生組件為：

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

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

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

十一、無(wú)障礙訪問(wèn)

aria-component滿足視障人士對(duì)于小程序的訪問(wèn)需求

十二、導(dǎo)航欄

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

十三、頁(yè)面屬性配置節(jié)點(diǎn)

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

十四、可視化

如果你覺(jué)得一個(gè)個(gè)寫(xiě)組件很麻煩，那么你可以使用可視化的方式來(lái)使用組件，如圖：

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

十五、ui組件

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

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

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

然后使用自定義的組件名來(lái)使用這個(gè)組件，如下：

注：這里我們需要?jiǎng)h除example和build，否則會(huì)報(bào)錯(cuò)。

十六、自定義組件

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

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

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

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

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

十八、條件渲染

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

十九、列表渲染

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

二十、模板

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

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

二十一、引入模板

雖然我們可以自己制作模板，但是很多時(shí)候?yàn)榱舜a的簡(jiǎn)潔性，我們需要進(jìn)行拆分代碼，這個(gè)時(shí)候就可以使用引入的概念，在此之前，我們需要寫(xiě)一個(gè)模板文件，如圖：

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

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

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

二十二、總結(jié)

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

注：文中組件的來(lái)歷及解釋部分參考微信開(kāi)放文檔

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

一、前言

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

二、全局樣式

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

然后再在模板文件中引入該類(lèi)名，如圖：

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

三、頁(yè)面樣式

也就是我們經(jīng)常提到的局部樣式，它只作用于該文件夾中的模板文件，也就是該文件夾中的一個(gè)個(gè)組件中，如果用在其它地方的話，那是沒(méi)有效果的。首先我們?cè)谠撃０逦募袑?xiě)入樣式，如圖：

然后我們?cè)僭谌謽邮轿募袑?xiě)一個(gè)一模一樣的類(lèi)名，如圖：

此時(shí)我們?cè)賮?lái)將該樣式應(yīng)用到文本組件中，如圖：

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

四、導(dǎo)入樣式

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

接下來(lái)就可以使用了，如圖：

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

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

這里其實(shí)用到的就是我們之前在組件那篇文章中提到的數(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é)

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