1.為什么要學(xué)小程序開(kāi)發(fā)？

對(duì)于前端開(kāi)發(fā)而言，微信小程序因?yàn)槠浜?jiǎn)單快速、開(kāi)發(fā)成本低、用戶(hù)流量巨大等特點(diǎn)，也就成了前端開(kāi)發(fā)工程師必會(huì)的一個(gè)技能。

2.開(kāi)發(fā)準(zhǔn)備：

（1）有人開(kāi)玩笑說(shuō)，會(huì)vue小程序根本都不用學(xué)：

微信小程序雖然是騰訊自己搞的，但是核心的思想跟vue等框架是一樣一樣的哦~

（2）善于搜集精美的小組件： “我們不生產(chǎn)代碼，我們只是代碼的搬運(yùn)工”，善于找到想要的組件并把他們巧妙優(yōu)雅的組裝成一個(gè)大項(xiàng)目，也算是程序員一項(xiàng)基本技能了。

具體怎么找到想要的小程序demo，篇末會(huì)給大家推薦小程序的資源，有很多大神的項(xiàng)目哦

擼起袖子開(kāi)干了

一.注冊(cè)小程序賬號(hào)，下載IDE

1.官網(wǎng)注冊(cè)https://mp.weixin.qq.com/，并下載IDE。

2.官方文檔一向都是最好的學(xué)習(xí)資料。

注意：

（1）注冊(cè)賬號(hào)之后會(huì)有一個(gè)appid，新建項(xiàng)目的時(shí)候需要填上，不然很多功能是用不了的，比如不能預(yù)覽，不能上傳代碼等等。

（2）如果你注冊(cè)過(guò)微信公眾號(hào)的話，一定要注意，微信公眾號(hào)和小程序是兩個(gè)賬號(hào)，二者的appid也是不同，小程序開(kāi)發(fā)必須使用小程序的appid哦。

二.小程序框架介紹和運(yùn)行機(jī)制

1.我們建立了“普通快速啟動(dòng)模板”，然后整個(gè)項(xiàng)目目錄如下：

2.app.js

整個(gè)項(xiàng)目的啟動(dòng)文件，如注釋寫(xiě)的onlaunch方法有三大功能，瀏覽器緩存進(jìn)行存和取數(shù)據(jù)；用登陸成功的回調(diào)；獲取用戶(hù)信息。

globalData是定義整個(gè)項(xiàng)目的全局變量或者常量哦。

3.app.json

整個(gè)項(xiàng)目的配置文件，比如注冊(cè)頁(yè)面，配置tab頁(yè)，設(shè)置整個(gè)項(xiàng)目的樣式，頁(yè)面標(biāo)題等等；

！注意：小程序啟動(dòng)默認(rèn)的第一個(gè)頁(yè)面，就是app.json的pages中的第一個(gè)頁(yè)面哦。

4.pages

小程序的頁(yè)面組件，有幾個(gè)頁(yè)面就會(huì)有幾個(gè)子文件夾。比如快速啟動(dòng)模板，就有兩個(gè)頁(yè)面，index和logs

5.打開(kāi)index目錄

可以看到有三個(gè)文件，其實(shí)和我們web開(kāi)發(fā)的文件是一一對(duì)應(yīng)的。

index.wxml對(duì)應(yīng)index.html；

index.wxss對(duì)應(yīng)index.css；

index.js就是js文件哦。

一般我們還會(huì)給每個(gè)頁(yè)面組件添加一個(gè).json文件，作為該頁(yè)面組件的配置文件，設(shè)置頁(yè)面標(biāo)題等功能

6.雙擊index.js文件

（1）var app = getApp();

引入整個(gè)項(xiàng)目的app.js文件，用來(lái)取期中的公共變量等信息。

如果要使用util.js工具庫(kù)中的某個(gè)方法，在util.js中module.exports導(dǎo)出，然后在需要的頁(yè)面中require即可得到哦。

（2）比如，我們要獲取豆瓣電影的時(shí)候，我們需要調(diào)用豆瓣的api；我們先在app.js中的gloabData中定義doubanBase

然后在index.js中使用app.globaData.doubanBase即可取到這個(gè)值。

當(dāng)然這些常量你也可以在頁(yè)面需要的時(shí)候，再用寫(xiě)死的值，但是為了整個(gè)項(xiàng)目的維護(hù)，還是建議把這種公用參數(shù)統(tǒng)一寫(xiě)在配置文件中哦。

（3）接下來(lái)在整個(gè)page({})中，第一個(gè)data，就是本頁(yè)面組件的內(nèi)部數(shù)據(jù)，會(huì)渲染到該頁(yè)面的wxml文件中，類(lèi)似于vue、react哦~

通過(guò)setData修改data數(shù)據(jù)，驅(qū)動(dòng)頁(yè)面渲染

（4）一些生命周期函數(shù)

比如onload()， onready(), onshow(), onhide()等等，監(jiān)聽(tīng)頁(yè)面加載、頁(yè)面初次渲染、頁(yè)面顯示、頁(yè)面隱藏等等

更多的可以查官網(wǎng)API哦。其中用的最多的就是onload()方法，和onShareAppMessage()方法（設(shè)置頁(yè)面分享的信息）

7 .wxml模板的使用。

比如本項(xiàng)目電影頁(yè)面，就是以最小的星級(jí)評(píng)價(jià)組件wxml當(dāng)做模板，star到movie到movie-list，一級(jí)一級(jí)的嵌套使用。

star-template.wxml頁(yè)面寫(xiě)好name屬性；然后import引入的時(shí)候通過(guò)name獲得即可

8.常用的wxml標(biāo)簽

view，text，icon，swiper，block，scroll-view等等，這些標(biāo)簽直接查官網(wǎng)文檔即可

三.小程序框架、各個(gè)頁(yè)面以及發(fā)布上線的注意點(diǎn)

1.整個(gè)框架中的一些注意點(diǎn)

（1）整個(gè)wxml頁(yè)面，最底層的標(biāo)簽是哦。

（2） 每個(gè)頁(yè)面頂部導(dǎo)航欄的顏色，title在本頁(yè)面的json中配置，如果沒(méi)有配置的話，取app.json中的總配置哦。

（3）json中不能寫(xiě)注釋哦，不然會(huì)報(bào)錯(cuò)的。

（4）路由相關(guān)

1）使用wx.SwitchTab跳轉(zhuǎn)tab頁(yè)的話，在app.json中除了注冊(cè)pages頁(yè)面，還需要在tabBar中注冊(cè)tab頁(yè)，才能生效哦。

注意：tab最多5個(gè)，也就是我們說(shuō)的頭部或者底部最多5個(gè)菜單。其他的頁(yè)面只能通過(guò)其他路由方法打開(kāi)哦。

2）navigateTo是跳到某個(gè)非tab頁(yè)，比如歡迎頁(yè)，電影詳情頁(yè)，城市選擇頁(yè)；在app.json中注冊(cè)后，不能在tabBar里注冊(cè)哦，不然同樣也是不能跳轉(zhuǎn)的哦。

3）reLaunch跳轉(zhuǎn)，新開(kāi)的頁(yè)面左上角是沒(méi)有退回按鈕的，本項(xiàng)目只用了一次，切換城市的時(shí)候哦。

（5）頁(yè)面之間傳遞參數(shù)

參數(shù)寫(xiě)在跳轉(zhuǎn)的url之中，然后另一個(gè)頁(yè)面在onload方法中的傳參option接收到。如下傳遞和獲取id

（6）data-開(kāi)頭的自定義屬性的使用

比如wxml中我們?cè)趺磳?xiě)

點(diǎn)擊的事件對(duì)象可以這么取，var postId = event.currentTarget.dataset.postid;

注意： 大寫(xiě)會(huì)轉(zhuǎn)換成小寫(xiě)，帶_符號(hào)會(huì)轉(zhuǎn)成駝峰形式

（7）事件對(duì)象event，event.target和event.currentTarget的區(qū)別：

target指的是當(dāng)前點(diǎn)擊的組件 和currentTarget 指的是事件捕獲的組件。

比如，輪播圖組件，點(diǎn)擊事件應(yīng)該要綁定到swiper上，這樣才能監(jiān)控任意一張圖片是否被點(diǎn)擊，

這時(shí)target這里指的是image（因?yàn)辄c(diǎn)擊的是圖片），而currentTarget指的是swiper（因?yàn)榻壎c(diǎn)擊事件在swiper上）

（8）使用免費(fèi)的網(wǎng)絡(luò)接口：

本項(xiàng)目中用到了 和風(fēng)天氣api，騰訊地圖api，百度地圖api，豆瓣電影api，聚合頭條新聞api等，具體用法可以看各自官網(wǎng)的接口文檔哦，很詳細(xì)的

注意：免費(fèi)接口是有訪問(wèn)限制的，所以如果用別人的組件用了這種接口的話，最好還是自己注冊(cè)一個(gè)新的key替換上哦

附上一個(gè)免費(fèi)接口大全：

https://github.com/jokermonn/-Api

?。×硗膺€要注意，要把這些接口的域名配置到小程序的合法域名中，不然也是訪問(wèn)不了的

（8）wxss有一個(gè)坑：無(wú)法讀取本地資源，比如背景圖片用本地就會(huì)報(bào)錯(cuò)哦。

把本地圖片弄成網(wǎng)絡(luò)圖片的幾種方式： 上傳到個(gè)人網(wǎng)站；QQ空間相冊(cè)等等也是可以的哦

2.切換城市頁(yè)面：

（1）首頁(yè)使用navigateTo跳轉(zhuǎn)到切換城市頁(yè)，由于首頁(yè)并沒(méi)有關(guān)閉，導(dǎo)致切換了城市返回來(lái)，天氣信息還是舊的。

正確的處理邏輯如下：

1）使用reLaunch跳轉(zhuǎn)到切換城市頁(yè)面，實(shí)質(zhì)是關(guān)閉所有頁(yè)面打開(kāi)新的頁(yè)面哦。

2）切換城市頁(yè)面，更新公共變量中城市信息為手動(dòng)切換的城區(qū)，再switchTab回到首頁(yè)，觸發(fā)首頁(yè)重新加載。

3）首頁(yè)獲取城市信息的時(shí)候加一個(gè)判斷，全局沒(méi)有才取定位的，全局有（比如剛才設(shè)置了）就用全局的哦。

（2）城市列表的滾動(dòng)和回到頂部

基于scroll-view組件的scroll-top屬性，初始就是0，滾動(dòng)就會(huì)增加的；點(diǎn)擊回到頂部給它置為0即可回到頂部

3.天氣頁(yè)

（1）初始化頁(yè)面，天氣顯示的邏輯

首先調(diào)用小程序的wx.getLocation方法獲得當(dāng)前的經(jīng)緯度，然后調(diào)用騰訊地圖獲得當(dāng)前的城市名稱(chēng)和區(qū)縣名稱(chēng)，并存到公共變量中，

再調(diào)用查詢(xún)天氣和空氣質(zhì)量的方法哦。

（2）容錯(cuò)處理

城市的名稱(chēng)長(zhǎng)短不一，有點(diǎn)名字特別長(zhǎng)，比如巴彥淖爾市這種，需要?jiǎng)討B(tài)的獲取完整的城市名稱(chēng)；

有些偏僻的城市暫時(shí)沒(méi)有天氣信息，我們需要對(duì)返回的結(jié)果進(jìn)行判斷，沒(méi)有信息的需要給用戶(hù)一個(gè)良好的提示信息。

4.周邊-地圖服務(wù)頁(yè)面

（1）調(diào)用百度地圖的各種服務(wù)，查詢(xún)酒店，美食，生活服務(wù)三種信息，更多信息可以看百度地圖的文檔

（2）點(diǎn)擊時(shí)給被點(diǎn)中的圖標(biāo)加個(gè)邊框，數(shù)據(jù)驅(qū)動(dòng)視圖，所以使用一個(gè)長(zhǎng)度為3的數(shù)組保存三個(gè)圖標(biāo)當(dāng)前是否被點(diǎn)中的狀態(tài)

然后wxml再根據(jù)數(shù)據(jù)來(lái)動(dòng)態(tài)添加class，增加邊框樣式

5.豆瓣電影頁(yè)

（1）電影詳情頁(yè)的預(yù)覽圖片，用小程序本身的previewImage實(shí)現(xiàn)。

（2）詳情頁(yè)使用onReachBottom()方法，監(jiān)控用戶(hù)上拉觸底事件，然后發(fā)送請(qǐng)求繼續(xù)獲得數(shù)據(jù)，實(shí)現(xiàn)懶加載的效果

（3）用戶(hù)體驗(yàn)方面的優(yōu)化，js中將整數(shù)評(píng)分比如7分統(tǒng)一改為7.0分，然后wxml模板再判斷分?jǐn)?shù)是否為0顯示“暫無(wú)評(píng)分”

（4）搜索之后清空搜索框

因?yàn)樾〕绦蛑胁荒苁褂胓etelementbyId這種方式獲得元素，只能用數(shù)據(jù)來(lái)控制了

在data中加一個(gè)屬性searchText來(lái)保存搜索框的內(nèi)容并和 input的value屬性綁定，搜索完成或者點(diǎn)擊X時(shí)，searchText變量清空即可實(shí)現(xiàn)清空輸入框的效果哦。

6.新聞頁(yè)面

（1）聚合頭條新聞的免費(fèi)接口，只返回了新聞的基本信息，新聞的主體內(nèi)容是沒(méi)有的哦。

我找了好多新聞?lì)惖慕涌冢孟穸际菦](méi)有新聞主體內(nèi)容的。如果誰(shuí)知道更好的接口歡迎留言告訴我哈~

（2）當(dāng)然，也可以自己去爬新聞網(wǎng)站的數(shù)據(jù)哦

7.更多頁(yè)面

（1）小程序目前開(kāi)放外鏈的功能只是給公司組織的小程序開(kāi)放了，個(gè)人開(kāi)發(fā)還是不能使用外鏈的哦。

（2）彩蛋頁(yè)面，獲得用戶(hù)信息

通過(guò) wx.setStorageSync('userInfos', userInfos); 可以獲得登陸小程序的用戶(hù)的個(gè)人信息，可以發(fā)送給后臺(tái)存到數(shù)據(jù)庫(kù)中，方便對(duì)用戶(hù)進(jìn)行分析

我這里只是存儲(chǔ)到瀏覽器緩存中哦，最大應(yīng)該是10M緩存；如果用戶(hù)把這個(gè)小程序從小程序列表中刪除掉，就會(huì)清空這個(gè)緩存。

8.發(fā)布注意

（1） 新版本小程序發(fā)布的限制為2M，一般都是圖片最占空間，所以盡量使用網(wǎng)絡(luò)圖片

具體怎么把本地圖片變成網(wǎng)絡(luò)圖片，上面有講哦。

（2）在開(kāi)發(fā)者工具上預(yù)覽測(cè)試沒(méi)問(wèn)題，點(diǎn)擊上傳；網(wǎng)頁(yè)版小程序個(gè)的人中心的左側(cè)“開(kāi)發(fā)管理”菜單，第三塊--開(kāi)發(fā)版本就有了內(nèi)容。

（3）點(diǎn)擊提交，填寫(xiě)小程序相關(guān)信息，就可以提交審核了哦。

注意：分類(lèi)最好填寫(xiě)準(zhǔn)確，這樣才能更快的通過(guò)審核哦。我這個(gè)小程序一天半時(shí)間過(guò)審上線的