兩天快速開發(fā)一個(gè)自己的微信小程序-,懸筆e絕微信小程序開發(fā)

一．寫在前面為什么要學(xué)小程序開發(fā)？對(duì)于前端開發(fā)而言，微信小程序因?yàn)槠浜?jiǎn)單快速、開發(fā)成本低、用戶流量巨大等特點(diǎn)，也就成了前端開發(fā)工程師必會(huì)的一個(gè)技能。先放上我做的小程序（1）歡迎頁這個(gè) logo是當(dāng)年念大學(xué)給社團(tuán)做的

logo

，苦學(xué)了整整一周的

PS?。?）首頁輪播頭圖，天氣，豆瓣電影正在熱映（3）全國(guó)城市切換頁（4）天氣詳情頁（5）地圖周邊服務(wù)（6）豆瓣電影（7）熱點(diǎn)新聞（8）更多頁面開發(fā)準(zhǔn)備（1）有人開玩笑說，會(huì) vue小程序根本都不用學(xué)微信小程序雖然是騰訊自己搞的，但是核心的思想跟

vue

等框架是一樣一樣的哦

~（2）善于搜集精美的小組件“我們不生產(chǎn)代碼，我們只是代碼的搬運(yùn)工”，善于找到想要的組件并把他們巧妙優(yōu)雅的組裝成一個(gè)大項(xiàng)目，也算是程序員一項(xiàng)基本技能了。擼起袖子開干了一.注冊(cè)小程序賬號(hào)，下載 IDE官網(wǎng)注冊(cè)并下載 IDE。官方文檔一向都是最好的學(xué)習(xí)資料。注意1）注冊(cè)賬號(hào)之后會(huì)有一個(gè)appid，新建項(xiàng)目的時(shí)候需要填上，不然很多功能是用不了的，比如不能預(yù)覽，不能上傳代碼等等。2）如果你注冊(cè)過微信公眾號(hào)的話，一定要注意，微信公眾號(hào)和小程序是兩個(gè)賬號(hào)，二者的appid也是不同，小程序開發(fā)必須使用小程序的 appid哦。.小程序框架介紹和運(yùn)行機(jī)制我們建立了“普通快速啟動(dòng)模板”，然后整個(gè)項(xiàng)目目錄如下app.js整個(gè)項(xiàng)目的啟動(dòng)文件， 如注釋寫的 onlaunch方法有三大功能，瀏覽器緩存進(jìn)行存和取數(shù)據(jù)；用登陸成功的回調(diào)；獲取用戶信息。globalData 是定義整個(gè)項(xiàng)目的全局變量或者常量哦。app.json整個(gè)項(xiàng)目的配置文件，比如注冊(cè)頁面，配置 tab頁，設(shè)置整個(gè)項(xiàng)目的樣式，頁面標(biāo)題等等；！注意小程序啟動(dòng)默認(rèn)的第一個(gè)頁面，就是 app.json 的pages中的第一個(gè)頁面哦。pages小程序的頁面組件，有幾個(gè)頁面就會(huì)有幾個(gè)子文件夾。比如快速啟動(dòng)模板，就有兩個(gè)頁面，index和logs打開index目錄可以看到有三個(gè)文件，其實(shí)和我們 web開發(fā)的文件是一一對(duì)應(yīng)的。index.wxml 對(duì)應(yīng)index.html ；index.wxss 對(duì)應(yīng)index.css ；index.js 就是js文件哦。一般我們還會(huì)給每個(gè)頁面組件添加一個(gè).json文件，作為該頁面組件的配置文件，設(shè)置頁面標(biāo)題等功能雙擊index.js 文件1）varapp=getApp();引入整個(gè)項(xiàng)目的 app.js 文件，用來取期中的公共變量等信息。如果要使用util.js工具庫中的某個(gè)方法，在util.js中module.exports導(dǎo)出，然后在需要的頁面中require即可得到哦。（2）比如，我們要獲取豆瓣電影的時(shí)候，我們需要調(diào)用豆瓣的 api；我們先在 app.js 中的gloabData 中定義doubanBase然后在index.js 中使用 即可取到這個(gè)值。當(dāng)然這些常量你也可以在頁面需要的時(shí)候，再用寫死的值，但是為了整個(gè)項(xiàng)目的維護(hù)，還是建議把這種公用參數(shù)統(tǒng)一寫在配置文件中哦。3）接下來在整個(gè)page({})中，第一個(gè)data，就是本頁面組件的內(nèi)部數(shù)據(jù)，會(huì)渲染到該頁面的wxml文件中，類似于vue、react哦~通過setData修改data數(shù)據(jù)，驅(qū)動(dòng)頁面渲染（4）一些生命周期函數(shù)比如onload()，onready(),onshow(),onhide()等等，監(jiān)聽頁面加載、頁面初次渲染、頁面顯示、頁面隱藏等等更多的可以查官網(wǎng)API哦。其中用的最多的就是onload()方法，和onShareAppMessage()方法（設(shè)置頁面分享的信息）7.wxml 模板的使用。比如本項(xiàng)目電影頁面，就是以最小的星級(jí)評(píng)價(jià)組件 wxml當(dāng)做模板，star 到movie 到movie-list ，一級(jí)一級(jí)的嵌套使用。star-template.wxml 頁面寫好 name屬性；然后import 引入的時(shí)候通過 name獲得即可常用的wxml標(biāo)簽view，text，icon，swiper，block，scroll-view 等等，這些標(biāo)簽直接查官網(wǎng)文檔即可.小程序框架、各個(gè)頁面以及發(fā)布上線的注意點(diǎn)整個(gè)框架中的一些注意點(diǎn)（1）整個(gè)wxml頁面，最底層的標(biāo)簽是哦。（2）每個(gè)頁面頂部導(dǎo)航欄的顏色，title在本頁面的json中配置，如果沒有配置的話，取app.json中的總配置哦。（3）json中不能寫注釋哦，不然會(huì)報(bào)錯(cuò)的。（4）路由相關(guān)1）使用wx.SwitchTab跳轉(zhuǎn)tab頁的話，在app.json中除了注冊(cè)pages頁面，還需要在tabBar中注冊(cè)tab頁，才能生效哦。注意tab最多5個(gè)，也就是我們說的頭部或者底部最多 5個(gè)菜單。其他的頁面只能通過其他路由方法打開哦。2）navigateTo 是跳到某個(gè)非 tab頁，比如歡迎頁，電影詳情頁，城市選擇頁；在app.json 中注冊(cè)后，不能在 tabBar里注冊(cè)哦，不然同樣也是不能跳轉(zhuǎn)的哦。3）reLaunch跳轉(zhuǎn)，新開的頁面左上角是沒有退回按鈕的，本項(xiàng)目只用了一次，切換城市的時(shí)候哦。（5）頁面之間傳遞參數(shù)參數(shù)寫在跳轉(zhuǎn)的url之中，然后另一個(gè)頁面在onload方法中的傳參option接收到。如下傳遞和獲取id6）data-開頭的自定義屬性的使用比如wxml中我們?cè)趺磳扅c(diǎn)擊的事件對(duì)象可以這么取，注意大寫會(huì)轉(zhuǎn)換成小寫，帶 _符號(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)接口是有訪問限制的，所以如果用別人的組件用了這種接口的話，最好還是自己注冊(cè)一個(gè)新的key替換上哦附上一個(gè)免費(fèi)接口大全另外還要注意，要把這些接口的域名配置到小程序的合法域名中，不然也是訪問不了的8）wxss有一個(gè)坑無法讀取本地資源，比如背景圖片用本地就會(huì)報(bào)錯(cuò)哦。把本地圖