微信小程序怎么開(kāi)發(fā)？快速開(kāi)發(fā)一個(gè)小程序教程

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

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

　　官方文檔一向都是最好的學(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)文件，如注釋寫的onlaunch方法有三大功能，瀏覽器緩存進(jìn)行存和取數(shù)據(jù);用登陸成功的回調(diào);獲取用戶信息。

　　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í)候，再用寫死的值，但是為了整個(gè)項(xiàng)目的維護(hù)，還是建議把這種公用參數(shù)統(tǒng)一寫在配置文件中。

　　(3)接下來(lái)在整個(gè)page({})中，第一個(gè)data，就是本頁(yè)面組件的內(nèi)部數(shù)據(jù)，會(huì)渲染到該頁(yè)面的wxml文件中，類似于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è)面寫好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中不能寫注釋，不然會(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ù)寫在跳轉(zhuǎn)的url之中，然后另一個(gè)頁(yè)面在onload方法中的傳參option接收到。如下傳遞和獲取id

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

　　比如wxml中我們?cè)趺磳?/p>

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

　　注意： 大寫會(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)接口是有訪問(wèn)限制的，所以如果用別人的組件用了這種接口的話，最好還是自己注冊(cè)一個(gè)新的key替換上

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

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