[if !supportLists]二叠蝇、[endif]課堂內(nèi)容

[if !supportLists]1.?[endif]微信小程序入門

要想了解微信小程序====>逃不過一個平臺：微信公眾平臺

微信公眾平臺分類：

服務(wù)號：

服務(wù)號：為企業(yè)和組織提供更強(qiáng)大的業(yè)務(wù)服務(wù)與用戶管理能力?

中國移動+中國工商銀行+114

適用人群：媒體、企業(yè)声旺、政府或其他組織。

群發(fā)次數(shù)：服務(wù)號1個月（按自然月）內(nèi)可發(fā)送4條群發(fā)消息棚亩。

訂閱號

訂閱號：為媒體和個人提供一種新的信息傳播方式咸产，主要功能是在微信側(cè)給用戶傳達(dá)資訊；

適用人群：個人邦马、媒體、企業(yè)宴卖、政府或其他組織滋将。

群發(fā)次數(shù)：訂閱號（認(rèn)證用戶、非認(rèn)證用戶）1天內(nèi)可群發(fā)1條消息嘱腥。

小程序：微信小程序+微信小游戲

小程序是一種新的開放能力耕渴，開發(fā)者可以快速地開發(fā)一個小程序。小程序可以在微信內(nèi)被便捷地獲取和傳播齿兔，同時具有出色的使用體驗橱脸。

達(dá)到了一種隨用隨走的境界，微信之父---張小龍

張小龍是靠foxmail發(fā)家分苇，foxmail====>qq郵箱結(jié)合起來

小程序是啥時候公開上線的呢添诉？

2017年1月9日，張小龍在2017微信公開課Pro上發(fā)布的小程序正式上線医寿。

小程序應(yīng)該怎么去學(xué)習(xí)栏赴？

開發(fā)文檔=====》查看API 學(xué)習(xí)組件的基本思路

開發(fā)者工具===》 結(jié)合了Chrome +Vs code 優(yōu)勢，單單使用這個工具就可以完成小程序的搭建靖秩。

設(shè)計指南====》只要是為企業(yè)和個人提供一個行業(yè)規(guī)范

小程序體驗demo

企業(yè)微信

[if !supportLists]2.?[endif]上手微信小程序

[if !supportLists]2.1?[endif]注冊賬號

注冊分三步：

因為一個郵箱只能注冊一個小程序须眷，所以大家在郵箱的時候慎重一下竖瘾。

完成注冊之后就可以登錄了，僅需要通過微信掃碼來驗證身份：

當(dāng)進(jìn)入小程序后臺之后花颗，會讓您填寫小程序基本信息

注意：服務(wù)類目千萬不要選擇游戲類

[if !supportLists]2.2?[endif]下載開發(fā)者工具

下載成功后捕传，一路next ,傻瓜式安裝即可。

第一次打開開發(fā)者工具

創(chuàng)建項目

需要AppID扩劝，在小程序后臺中去查找：

填寫完ID之后庸论，進(jìn)行對應(yīng)設(shè)置：

創(chuàng)建好的小程序，如圖所示：

[if !supportLists]3.?[endif]小程序后臺介紹

[if !supportLists]l?[endif]成員管理

管理員+開發(fā)人員+體驗人員

管理為1開發(fā)和體驗最多 15個

[if !supportLists]l?[endif]版本管理

測試版本+開發(fā)版本+審核版本+線上版本

測試版本：正在開發(fā)的項目

開發(fā)版本：準(zhǔn)備上線的項目

審核版本：交由微信團(tuán)隊審核的開發(fā)版本

線上版本：審核通過的會到線上版本棒呛，供用戶使用

[if !supportLists]l?[endif]用戶反饋

測試人員和客戶給我們開發(fā)提的建議和有效反饋

[if !supportLists]l?[endif]開發(fā)+設(shè)置 作為熟悉 掌握一下

[if !supportLists]4.?[endif]小程序開發(fā)者工具

菜單欄：

[if !supportLists]l?[endif]選擇項目===》打開最近項目

[if !supportLists]l?[endif]格式化代碼：shift+alt+F

[if !supportLists]l?[endif]搜索：ctrl +F

[if !supportLists]l?[endif]快捷鍵：

[if !supportLists]l?[endif]文件保存

其他相關(guān)的功能如：更新開發(fā)者工具+開發(fā)者社區(qū) 了解一下

工具欄：

至少應(yīng)該有一個存在

開發(fā)常用功能

當(dāng)我們點擊上傳之后聂示，會自動上傳到小程序后臺

開發(fā)版本x.y.z

X大版本的更新迭代

Y某一模塊的更新迭代

Z某些bug的修復(fù)+某些已知內(nèi)容的更改

版本管理====》主要用于對代碼的上傳下載，類似于github功能簇秒。

詳情中選擇用戶占比最多的鱼喉，一般來講沒有錯。

提前先了解一下合法域名：

默認(rèn)所有域名都需要提前配置才能使用趋观，

勾選后便可以暫時模擬數(shù)據(jù)

模擬器：相當(dāng)于谷歌瀏覽器的手機(jī)頁面顯示功能

項目樹：vscode的項目結(jié)構(gòu)文檔

編輯區(qū)：vscode的代碼編輯區(qū)域

調(diào)試區(qū)：相當(dāng)于谷歌瀏覽器的調(diào)試功能

[if !supportLists]5.?[endif]小程序初始化代碼結(jié)構(gòu)

總分結(jié)構(gòu)

總：

App.js主邏輯文件====》App({})

App.json全局配置文件====》頁面+窗口 +網(wǎng)絡(luò)請求時間+debug

App.wxss全局樣式 wx:weixin ,ss:css 微信小程序的樣式

Project.config.json項目配置文件 只是在新建項目時有效

分：

Pages文件夾

Index子文件夾

Index.js頁面邏輯文件 Page({}) //獲取應(yīng)用實例const?app = getApp()

Index.json頁面配置文件usingComponents使用自定義組件

權(quán)重：頁面配置>全局配置

Index.wxml頁面標(biāo)簽內(nèi)容 wx:weixin ml:html

主推view+text?====>div+span

之前的html中存在div+h1+p等等都將會被認(rèn)為普通文本標(biāo)簽蒲凶，并取消樣式的渲染

Index.wxss頁面樣式 ?權(quán)重： 局部樣式>全局樣式

Logs子文件夾 ====>同index文件夾保持一致

Log.js調(diào)用util的方法來實現(xiàn)獲取當(dāng)前啟動時的時間

Utils文件夾

Util.js ====>獲取時間年月日時分秒，定義好方法供其他頁面使用

[if !supportLists]6.?[endif]創(chuàng)建空目錄

補(bǔ)充：測試號功能

[if !supportLists]1.?[endif]比AppID少了云開發(fā)的功能

[if !supportLists]2.?[endif]測試號無法上傳

第一步：導(dǎo)入空目錄拆内，顯示缺少project.config.json

解決：創(chuàng)建project.config.json

第二步：缺少app.json入口文件

解決：創(chuàng)建app.json

第三步：app.json不能自動生成

解決：手動創(chuàng)建json對象的格式{}

第四步：pages必須為array

解決：創(chuàng)建pages的方法 “pages”:[“pages/index/index”]

第五步：在對應(yīng)的json格式中，不能有后綴多余的逗號

解決：刪除逗號即可

第六步：讀取不到index.wxml的文件

解決：如下圖所示創(chuàng)建index.wxml

第七步：找不到index.js

解決：創(chuàng)建index.js在index.wxml的同目錄下

第八步：page的方法沒有被注冊

解決：創(chuàng)建Page({})方法來注冊頁面

第九步：創(chuàng)建app.js +app.wxss

第十步：設(shè)置全局窗口的樣式

Navigation導(dǎo)航

Bar欄

BackgroundColor背景顏色

TextStyle文本樣式

TitleText標(biāo)題文本

Enable ??????????PullDown ?Refresh ?

被允許的宠默，可以的下拉刷新

補(bǔ)充：pages:[...,.... ]

Pages[0]會被當(dāng)成首頁展示出來

調(diào)整上下頁面位置可以使用alt+↑ || ↓

[if !supportLists]7.?[endif]全局配置

小程序根目錄下的?app.json?文件用來對微信小程序進(jìn)行全局配置麸恍，決定頁面文件的路徑、窗口表現(xiàn)搀矫、設(shè)置網(wǎng)絡(luò)超時時間抹沪、設(shè)置多 tab 等。

[if !supportLists]l?[endif]Pages

Pages[0]會被當(dāng)成首頁展示出來

調(diào)整上下頁面位置可以使用alt+↑ || ↓

[if !supportLists]l?[endif]Window

1.HexColor====>16進(jìn)制的顏色 “red”× ?“#fff”√ “#fffffff”√

2.navigationBarTextStyle僅支持black / white

3.custom?自定義導(dǎo)航欄瓤球，只保留右上角膠囊按鈕

可以在這里搜索QQ音樂小程序融欧，對比導(dǎo)航欄效果。

4.window示意圖

5.下拉刷新+上拉加載

6.屏幕旋轉(zhuǎn)

[if !supportLists]l?[endif]tabBar

創(chuàng)建成功后卦羡，首先會報一個錯誤噪馏，里面必要有l(wèi)ist，且必須為array類型

今天上午绿饵，在講詳情設(shè)置中欠肾，說到了tabBar相關(guān)限制

從下圖可以看出，list中有一個對象拟赊，這個對象下四個值：

pagePath頁面路徑

Text ?tabBar的文本信息

iconPath圖標(biāo)路徑

selectedIconPath被選擇的圖標(biāo)路徑

如果沒有iconPath刺桃，selectedIconPath，就長下面這個樣子：

此時可以借助iconFont矢量圖標(biāo)庫來豐富我們的tabBar

[if !supportLists]l?[endif]Debug

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

當(dāng)debug設(shè)置為true，可以查看全局+頁面的顯示內(nèi)容

[if !supportLists]l?[endif]App：

??onLaunch

onShow

[if !supportLists]l?[endif]Register:注冊相關(guān)頁面信息

??Index,logs,home,home1,home2

[if !supportLists]l?[endif]Route路由切換

?Pages/home/home pages[0]會被首先展示出來

[if !supportLists]l?[endif]Update view with init data初始化數(shù)據(jù)并更新頁面

[if !supportLists]l?[endif]頁面執(zhí)行生命周期鉤子

Eg:pages/home/home

onLoad監(jiān)聽頁面加載

onShow監(jiān)聽頁面顯示

onReady監(jiān)聽頁面初始渲染成功

執(zhí)行相關(guān)操作：

1.切后臺/前臺 App onHide || onShow ?page : onShow

2.更新tabBar執(zhí)行情況：

從on approute下執(zhí)行的五步缘琅，可以看出tabBar切換時需要執(zhí)行的步驟粘都。

作業(yè)：

創(chuàng)建4個tabBar 頁面內(nèi)容，并且學(xué)著去布局排版刷袍，將swiper組件的內(nèi)容展示在首頁翩隧。