微信小程序開(kāi)發(fā)小總結(jié)

niuxiaowei111 發(fā)布于2019-08-23 10:28 / 1363人閱讀

摘要：框架這部分是小程序開(kāi)發(fā)的核心，小程序采用視圖和邏輯層代碼相分離的結(jié)構(gòu)，如果你用過(guò)這部分也不難理解，但是也有一些區(qū)別。工具這部分沒(méi)有什么好說(shuō)的，微信開(kāi)發(fā)開(kāi)始還是用微信自己的開(kāi)發(fā)工具比較方便。

小程序開(kāi)發(fā)文檔使用說(shuō)明

小程序的文檔分為簡(jiǎn)易教程、框架、組件、API?、工具
https://developers.weixin.qq....

簡(jiǎn)易教程---介紹小程序開(kāi)發(fā)的一些基本情況開(kāi)發(fā)方式，項(xiàng)目目錄等等，看完這些，基本能了解怎么跑起來(lái)項(xiàng)目，在哪塊寫(xiě)代碼，各個(gè)文件的作用。

框架--- 這部分是小程序開(kāi)發(fā)的核心，小程序采用視圖和邏輯層代碼相分離的結(jié)構(gòu)，如果你用過(guò)vue angular react 這部分也不難理解，但是也有一些區(qū)別。

組件---小程序的每個(gè)標(biāo)簽相當(dāng)于一個(gè)組件，官方已經(jīng)預(yù)定義了一些常用的標(biāo)簽組件，能夠滿足日常基本功能的使用，這部分分時(shí)小程序開(kāi)發(fā)高效的一個(gè)原因，基礎(chǔ)的組件都定義好，需要用就行。這部分的文檔，只要過(guò)一下，大概有那些組件，用的時(shí)候再仔細(xì)閱讀文檔。
開(kāi)發(fā)中常常使用的組件:

視圖容器 ? ?view ? ? ? scroll-view ?swiper

基礎(chǔ)內(nèi)容 ?text

媒體 ? ?image ?videoaudio

表單 ? button input checkbox ?label picker?

畫(huà)布 ?canvas?

地圖 ?map

API---主要，可以的調(diào)起微信提供的能力，如果你在前端開(kāi)發(fā)中沒(méi)有遇到過(guò)的功能，都能在這里查到，比如小程序的頭部，頁(yè)面的刷新，本地存儲(chǔ)，獲取用戶信息，支付功能等。

工具--- 這部分沒(méi)有什么好說(shuō)的，微信開(kāi)發(fā)開(kāi)始還是用微信自己的開(kāi)發(fā)工具比較方便。

開(kāi)發(fā)中常見(jiàn)問(wèn)題 1.整個(gè)小程序的配置

小程序的全局配置在 app.json 中，小程序每添加一個(gè)頁(yè)面，都要在全局中注冊(cè)，文檔：
https://developers.weixin.qq....

2 列表渲染

? ? 小程序的列表渲染和其他的前端模板語(yǔ)言相似，但可以用wx:for-item="itemname" 來(lái)指定每次循環(huán)對(duì)象的名字，可以用wx:for-index="indexname" 來(lái)指定循環(huán)序列的鍵值，這個(gè)功能就是指定循環(huán)數(shù)組時(shí)的鍵和值的別名。
? ? 列表中的wx:key 是一個(gè)比較令人迷惑的地方，不寫(xiě)會(huì)報(bào)錯(cuò)，但是隨便給一個(gè)字符也不合理，最好是循環(huán)中的一個(gè)標(biāo)記唯一性的鍵值，比如id

3 事件綁定

? 小程序的事件綁定，寫(xiě)法上有些區(qū)別，主要2種 bind:youevent="eventhandle" ?catch:youevent="eventhandle" catch 能阻止事件冒泡

4.模塊開(kāi)發(fā)

小程序可以使用common.js 的模塊開(kāi)發(fā)方式。moudle.exports /exports 導(dǎo)出模塊， require (‘file.js’) 的方式引入模塊

5.頁(yè)面的生命周期

onLoad 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載（可以在這里異步的請(qǐng)求數(shù)據(jù)，初始化頁(yè)面）
onReady 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成（在這里，可以獲取頁(yè)面視圖的布局?jǐn)?shù)據(jù)）
onShow 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
onHide 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
onUnload 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載

6.頁(yè)面視圖中元素的位置和大小

? ?在小程序開(kāi)發(fā)過(guò)程中肯定會(huì)遇到要獲取頁(yè)面中元素的位置和元素的寬高。這部分在文檔=》api=》界面
wxml節(jié)點(diǎn)信息中找相應(yīng)的api

getRect: function(){
 ?  wx.createSelectorQuery().select("#the-id").boundingClientRect(function(rect){
 ? ?  rect.id // 節(jié)點(diǎn)的ID
 ? ?  rect.dataset // 節(jié)點(diǎn)的dataset
 ? ?  rect.left // 節(jié)點(diǎn)的左邊界坐標(biāo)
 ? ?  rect.right // 節(jié)點(diǎn)的右邊界坐標(biāo)
 ? ?  rect.top // 節(jié)點(diǎn)的上邊界坐標(biāo)
 ? ?  rect.bottom // 節(jié)點(diǎn)的下邊界坐標(biāo)
 ? ?  rect.width // 節(jié)點(diǎn)的寬度
 ? ?  rect.height // 節(jié)點(diǎn)的高度
 ?  }).exec()
  },

7.交互反饋

交互反饋詳情在?文檔=》api=》界面=》交互反饋
一個(gè)成功的反饋

wx.showToast({
  title: "成功",
  icon: "success",
  duration: 2000
})

8.跨頁(yè)面更新數(shù)據(jù)

小程序整個(gè)應(yīng)用是用App（）構(gòu)造方法組成，頁(yè)面是用Page() 構(gòu)造方法注冊(cè)。小程序只有組件才有自定義事件，在Page() 無(wú)法使用自定義事件通過(guò)觸發(fā)事件在頁(yè)面間傳遞數(shù)據(jù)不可行，微信提供獲取整個(gè)應(yīng)用實(shí)例的getApp() 方法，這樣可以獲取app 的實(shí)例，通過(guò) pages = getCurrentPages(); 獲取打開(kāi)頁(yè)面的列表，通過(guò) pages來(lái)調(diào)用各頁(yè)面的方法和更新數(shù)據(jù)

var pages = getCurrentPages();//獲取頁(yè)面棧
var currPage = pages[pages.length - 1]; //當(dāng)前頁(yè)面
var prevPage = pages[pages.length - 2]; //上一個(gè)頁(yè)面
//直接調(diào)用上一個(gè)頁(yè)面的setData()方法，把數(shù)據(jù)存到上一個(gè)頁(yè)面中去
prevPage.setData({
  mdata:1 
})；
//調(diào)用上一個(gè)頁(yè)面的方法來(lái)更新數(shù)據(jù)
prePage.updatefunc(altdata)