微信小程序開發小總結

時間 2019-11-08 標籤微信程序開發總結

小程序開發文檔使用說明

小程序的文檔分爲簡易教程、框架、組件、API 、工具
https://developers.weixin.qq....javascript

簡易教程---介紹小程序開發的一些基本狀況開發方式，項目目錄等等，看完這些，基本能瞭解怎麼跑起來項目，在哪塊寫代碼，各個文件的做用。
框架--- 這部分是小程序開發的核心，小程序採用視圖和邏輯層代碼相分離的結構，若是你用過vue angular react 這部分也不難理解，可是也有一些區別。
組件---小程序的每一個標籤至關於一個組件，官方已經預約義了一些經常使用的標籤組件，可以知足平常基本功能的使用，這部分分時小程序開發高效的一個緣由，基礎的組件都定義好，須要用就行。這部分的文檔，只要過一下，大概有那些組件，用的時候再仔細閱讀文檔。
開發中經常使用的組件:html
- 視圖容器 view scroll-view swiper
- 基礎內容 text
- 媒體 image videoaudio
- 表單 button input checkbox label picker
- 畫布 canvas
- 地圖 map
API---主要，能夠的調起微信提供的能力，若是你在前端開發中沒有遇到過的功能，都能在這裏查到，好比小程序的頭部，頁面的刷新，本地存儲，獲取用戶信息，支付功能等。
工具--- 這部分沒有什麼好說的，微信開發開始仍是用微信本身的開發工具比較方便。

開發中常見問題

1.整個小程序的配置

小程序的全局配置在 app.json 中，小程序每添加一個頁面，都要在全局中註冊，文檔：
https://developers.weixin.qq....前端

2 列表渲染

小程序的列表渲染和其餘的前端模板語言類似，但能夠用wx:for-item="itemname" 來指定每次循環對象的名字，能夠用wx:for-index="indexname" 來指定循環序列的鍵值，這個功能就是指定循環數組時的鍵和值的別名。
列表中的wx:key 是一個比較使人迷惑的地方，不寫會報錯，可是隨便給一個字符也不合理，最好是循環中的一個標記惟一性的鍵值，好比idvue

3 事件綁定

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

4.模塊開發

小程序可使用common.js 的模塊開發方式。moudle.exports /exports 導出模塊， require (‘file.js’) 的方式引入模塊react

5.頁面的生命週期

onLoad 生命週期函數--監聽頁面加載（能夠在這裏異步的請求數據，初始化頁面）
onReady 生命週期函數--監聽頁面初次渲染完成（在這裏，能夠獲取頁面視圖的佈局數據）
onShow 生命週期函數--監聽頁面顯示
onHide 生命週期函數--監聽頁面隱藏
onUnload 生命週期函數--監聽頁面卸載json

6.頁面視圖中元素的位置和大小

在小程序開發過程當中確定會遇到要獲取頁面中元素的位置和元素的寬高。這部分在文檔=》api=》界面
wxml節點信息中找相應的apicanvas

getRect: function(){
    wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
      rect.id // 節點的ID
      rect.dataset // 節點的dataset
      rect.left // 節點的左邊界座標
      rect.right // 節點的右邊界座標
      rect.top // 節點的上邊界座標
      rect.bottom // 節點的下邊界座標
      rect.width // 節點的寬度
      rect.height // 節點的高度
    }).exec()
  },

7.交互反饋

交互反饋詳情在文檔=》api=》界面=》交互反饋
一個成功的反饋小程序

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

8.跨頁面更新數據

小程序整個應用是用App（）構造方法組成，頁面是用Page() 構造方法註冊。小程序只有組件纔有自定義事件，在Page() 沒法使用自定義事件經過觸發事件在頁面間傳遞數據不可行，微信提供獲取整個應用實例的getApp() 方法，這樣能夠獲取app 的實例，經過 pages = getCurrentPages(); 獲取打開頁面的列表，經過 pages來調用各頁面的方法和更新數據api

var pages = getCurrentPages();//獲取頁面棧
var currPage = pages[pages.length - 1]; //當前頁面
var prevPage = pages[pages.length - 2]; //上一個頁面
//直接調用上一個頁面的setData()方法，把數據存到上一個頁面中去
prevPage.setData({
  mdata:1 
})；
//調用上一個頁面的方法來更新數據
prePage.updatefunc(altdata)