小程序總結

時間 2019-11-07

標籤程序總結简体版

原文原文鏈接

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

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

微信開發者工具不足，主要在幾方面：

編寫不便，沒有智能輸入
模擬器與真機表現不一致。主要是微信版本兼容性，例如低版本微信video層級處於置頂位置；

前期工做準備：

一、申請開發者帳號，完善信息，開發者資質認證
二、配置接口服務器域名及業務域名

三、不是使用本地接口時代理配置需使用系統代理，以防真機出現接口訪問不到

四、記得勾選不校驗合法域名，接口訪問問題

五、上傳時，項目的基本信息APPID須要是管理者APPID，代碼才能夠上傳，上傳成功便可在微信公衆平臺-管理-版本管理-開發版本看到提交信息，可在成員管理添加體驗者；
canvas

項目結構

經常使用組件

*   視圖容器    view  scroll-view  swiper
*   基礎內容  text
*   媒體    image  video audio
*   表單   button input checkbox  label picker 
*   畫布  canvas 
*   地圖  map

經常使用語法

數據綁定小程序

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染
segmentfault

<view class="unit" wx:for="{{courseList}}" wx:key="{{item.id}}" id="{{item.id}}">
   <image class="thumb-img" mode="aspectFill" lazy-load="true" src="{{item.titleImg}}" />
   <text class="title">{{item.title}}</text>
</view>

列表中的wx:key 是一個比較使人迷惑的地方，不寫會報錯，可是隨便給一個字符也不合理，最好是循環中的一個標記惟一性的鍵值，好比id緩存

條件渲染服務器

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

事件綁定微信

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
Page({
    tapName: function(event) {
        console.log(event)
    }
})

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

模塊開發app

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

頁面的生命週期

App({
  onLaunch: function(options) {},//當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
  onLoad: function(options) {},//監聽頁面加載（能夠在這裏異步的請求數據，初始化頁面）
  onShow: function(options) {},//監聽頁面顯示
  onHide: function() {},//監聽頁面隱藏
  onReady: function(options) {},//監聽頁面初次渲染完成
  onUnload: function() {},//監聽頁面卸載
  onError: function(msg) {},//監聽頁面報錯
  globalData: 'I am global data'
})

request異步，app.js的onLaunch和page的onLoad？
onLaunch和onLoad是異步的，各執行各的，裏面的代碼，誰先誰後，徹底不可知。onLaunch是隻有冷啓動時候纔會被再執行的其它時候是不會被執行的；
業務場景：
在onLaunch通常用來獲取用戶信息的而在page.js的onLoad也要拿着這個信息去後臺獲取數據，這個時候就獲取不到了~
onLaunch 調用 wx.redirectTo 沒有效果是由於這個時候頁面還沒註冊（頁面跳轉儘可能不放在onLaunch）
解決方案：
一、添加啓動頁
二、在頁面onLoad裏判斷app.js裏拿到openid了嗎，沒拿到的話，傳個回調方法給app.js，讓他拿到以後執行這個回調方法
三、onLaunch用來獲取用戶信息，相關數據獲取放到頁面上

request異步，onload 和onshow？
業務場景：
每一個頁面都有獲取用戶的登陸信息而調用接口進行操做，獲取用戶登陸信息這步可能涉及到調用接口，寫在onload上，可能會致使onshow調用接口的方法還沒來得及獲取到用戶信息就執行了，若是我把邏輯都寫在onload上，後退到頁面還要有部分數據要刷新狀態。
方案：一、寫在onShow中，登錄後緩存登錄狀態，下次執行onShow時，判斷一下登錄狀態（在緩存裏面增長一個狀態判斷，若是以前執行過就再也不重複執行，沒執行再進行執行）
二、首次加載的寫onLoad，須要即時刷新的在onShow裏面加this.onLoad()

小程序如何獲取用戶openid和unionId

注：沒有在微信開放平臺作開發者資質認證的就不要浪費時間了，沒認證沒法獲取unionId，認證費用300元/年，emmmm....

流程
第一步：wx.login獲取用戶臨時登陸憑證code
第三步：把步驟一code、appid傳到開發者本身服務端
第三步：服務端結合code、appid、secret進行解密獲取openid、unionId

wx.login({
      success: res => {
        if (res.code) {
          // 發送 res.code 到後臺換取 openId, unionId
          WXAPI.jsCodeLogin({
            'appId': 'wxf346fd2ae233a0fc',（開發者APPID）
            'code': res.code
          }).then(function(res) {
          //res.data.openId,
          //res.data.unionId,
          })  
        }
    }    
})

詳細：http://www.javashuo.com/article/p-mvavulpr-gh.html

登陸受權

新的受權需用button組件調用getUserInfo，因此在這以前沒法調用wx.login，可是若是先調用獲取用戶信息再調用wx.login的話，解密過程會出錯。

解決辦法：
在頁面的onLoad生命週期裏調用wx.login，獲取的code存入data以備須要的時候使用，可是code失效時間爲5分鐘，若是用戶停留頁面時間過長後點擊受權登陸，此時的code已通過期了，因此，獲取code的函數應該每4分鐘左右調用一次

wxml按鈕受權：

<button open-type='getUserInfo' bindgetuserinfo="getUserInfo">受權登陸</button>

onLoad: function (options) {
    this.getCodeTimer()
},
getCodeTimer () {
    wx.login({
      success: res => {
    WXAPI.jsCodeLogin({
            'appId': 'wxf346fd2ae233a0fc',（開發者APPID）
            'code': res.code
          }).then(function(res) {
          //res.data.openId,
          //res.data.unionId,
          }) 
        setTimeout(() => {
          this.getCodeTimer()
        }, 4 * 60 * 1000)
      }
})
// 受權登陸
getUserInfo: function(e) {
    if (e.detail.errMsg === 'getUserInfo:fail auth deny') { //拒絕
    console.log('用戶拒絕受權')
    } else if (e.detail.errMsg === 'getUserInfo:ok') { //容許
    //e.detail.userInfo
    //處理相關受權成功數據處理
    }
}