小程序開發流程

本文轉載自查看原文 2021-10-15 17:21 1098 微信開發（公眾號和小程序）

小程序的運行環境差異

小程序開發過程中需要面對的是兩大操作系統 iOS 和 Android 的微信客戶端

小程序開發流程

注冊小程序：申請帳號

注冊小程序鏈接：https://mp.weixin.qq.com/wxopen/waregister?action=step1

登錄小程序后台

登錄鏈接：https://mp.weixin.qq.com/

在菜單 “開發”-“開發設置” 看到小程序的 AppID

開發工具下載

微信開發者工具下載鏈接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

新建小程序：如下圖步驟

注：沒有APPID會限制功能體驗具體參照微信開發者文檔！

小程序文件的相關作用

.json 后綴的 JSON 配置文件
.wxml 后綴的 WXML 模板文件
.wxss 后綴的 WXSS 樣式文件
.js 后綴的 JS 腳本邏輯文件
app.json 是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等

小程序全局配置文檔（app.json文件）：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

小程序頁面配置文檔（每個頁面的json文件）https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

頁面中配置項在當前頁面會覆蓋 app.json 的 window 中相同的配置項

sitemap 配置文檔：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html

開發者可以通過 sitemap.json 配置，或者管理后台頁面收錄開關來配置其小程序頁面是否允許微信索引。當開發者允許微信索引時，微信會通過爬蟲的形式，為小程序的頁面內容建立索引。當用戶的搜索詞條觸發該索引時，小程序的頁面將可能展示在搜索結果中

項目配置文件（project.config.json）文檔：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html

配合weui使用

組件庫文檔：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/

在全局配置app.json文件下增加如下配置即可正常使用內部組件

 "useExtendedLib": {
    "weui": true
  },

"usingComponents": {
    "mp-icon": "weui-miniprogram/icon/icon"
  }

另外一種npm方式具體參考文檔：https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

小程序版本

小程序測試號申請

微信掃描二維碼，即可獲得為自己分配好的小程序和小游戲測試賬號

鏈接：https://mp.weixin.qq.com/wxamp/sandbox?doc=1

發布上線

一個小程序從開發完到上線一般要經過預覽-> 上傳代碼 -> 提交審核 -> 發布等步驟

代碼管理（也可上傳自己的git）

鏈接：https://git.weixin.qq.com/

運營數據查看

有兩種方式可以方便的看到小程序的運營數據

方法一：登錄小程序管理后台 - 數據分析，點擊相應的 tab 可以看到相關的數據。

方法二：使用小程序數據助手，在微信中方便的查看運營數據

小程序開發注意事項

允許上傳的文件

只有后綴名在白名單內的文件可以被上傳，不在白名單列表內文件在開發工具能被訪問到，但無法被上傳

wxs
png
jpg
jpeg
gif
svg
json
cer
mp3
aac
m4a
mp4
wav
ogg
silk
wasm
br

小程序生命周期

App() 必須在 app.js 中調用，必須調用且只能調用一次。不然會出現無法預期的后果

頁面路由

navigateTo, redirectTo 只能打開非 tabBar 頁面。
switchTab 只能打開 tabBar 頁面。
reLaunch 可以打開任意頁面。
頁面底部的 tabBar 由頁面決定，即只要是定義為 tabBar 的頁面，底部都有 tabBar。
調用頁面路由帶的參數可以在目標頁面的onLoad中獲取

關於異步 API 返回 Promise

基礎庫 2.10.2 版本起，異步 API 支持 callback & promise 兩種調用方式。當接口參數 Object 對象中不包含 success/fail/complete 時將默認返回 promise，否則仍按回調方式執行，無返回值

ES6 轉 ES5

在 0.10.101000 以及之后版本的開發工具中，會默認使用 babel 將開發者 ES6 語法代碼轉換為三端都能很好支持的 ES5 的代碼，幫助開發者解決環境不同所帶來的開發問題

小程序檢測版本更新（啟動時更新和未啟動時更新）

未啟動時更新

開發者在管理后台發布新版本的小程序之后，如果某個用戶本地有小程序的歷史版本，此時打開的可能還是舊版本。微信客戶端會有若干個時機去檢查本地緩存的小程序有沒有更新版本，如果有則會靜默更新到新版本。總的來說，開發者在后台發布新版本之后，無法立刻影響到所有現網用戶，但最差情況下，也在發布之后 24 小時之內下發新版本信息到用戶。用戶下次打開時會先更新最新版本再打開

啟動時更新

在app.js中載入

 onShow() {
    //使用更新對象之前判斷是否可用
    if (wx.canIUse('getUpdateManager')) {
      const updateManager = wx.getUpdateManager()
      updateManager.onCheckForUpdate(function (res) {
        // 請求完新版本信息的回調
        console.log(res.hasUpdate) // res.hasUpdate返回boolean類型
        if (res.hasUpdate) {
          updateManager.onUpdateReady(function () {
            wx.showModal({
              title: '更新提示',
              content: '新版本已經准備好，是否重啟當前應用？',
              success(res) {
                if (res.confirm) {
                  // 新的版本已經下載好，調用applyUpdate應用新版本並重啟
                  updateManager.applyUpdate()
                }
              }
            })
          })
          // 新版本下載失敗時執行
          updateManager.onUpdateFailed(function () {
            wx.showModal({
              title: '發現新版本',
              content: '請刪除當前小程序，重新搜索打開...',
            })
          })
        }
      })
    } else {
      //如果小程序需要在最新的微信版本體驗，如下提示
      wx.showModal({
        title: '更新提示',
        content: '當前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。'
      })
    }
  },

封裝一個方法也行onLaunch()鈎子中調用

  checkUpdateVersion() {
    //判斷微信版本是否 兼容小程序更新機制API的使用
    if (wx.canIUse('getUpdateManager')) {
      //創建 UpdateManager 實例
      const updateManager = wx.getUpdateManager();
      console.log('是否進入模擬更新');
      //檢測版本更新
      updateManager.onCheckForUpdate(function (res) {
        console.log('是否獲取版本',res);
        // 請求完新版本信息的回調
        if (res.hasUpdate) {
          //監聽小程序有版本更新事件
          updateManager.onUpdateReady(function () {
            //TODO 新的版本已經下載好，調用 applyUpdate 應用新版本並重啟 （ 此處進行了自動更新操作）
            updateManager.applyUpdate();
          })
          updateManager.onUpdateFailed(function () {
            // 新版本下載失敗
            wx.showModal({
              title: '已經有新版本嘍~',
              content: '當前微信版本過低，無法使用該功能，請升級到最新微信版本后重試！',
            })
          })
        }
      })
    } else {
      //TODO 此時微信版本太低（一般而言版本都是支持的）
      wx.showModal({
        title: '更新提示',
        content: '當前微信版本過低，無法使用該功能，請升級到最新微信版本后重試！'
      })
    }
  },

低版本兼容處理

對於新增的 API，可以通過判斷該API是否存在來判斷是否支持用戶使用的基礎庫版本

if (wx.openBluetoothAdapter) {
  wx.openBluetoothAdapter()
} else {
  // 如果希望用戶在最新版本的客戶端上體驗您的小程序，可以這樣子提示
  wx.showModal({
    title: '提示',
    content: '當前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。'
  })
}

對於 API 的參數或者返回值有新增的參數，可以判斷用以下代碼判斷

wx.showModal({
  success: function(res) {
    if (wx.canIUse('showModal.success.cancel')) {
      console.log(res.cancel)
    }
  }
})

組件兼容處理使用組件的地方判斷是否可支持使用

data: {
    canIUse: wx.canIUse('cover-view')
}

設置最低基礎庫版本：登錄小程序管理后台，進入「設置 - 基本設置 - 基礎庫最低版本設置」進行配置

小程序授權登錄

調用 wx.login() 獲取 臨時登錄憑證code ，並回傳到開發者服務器。
調用 auth.code2Session 接口，換取 用戶唯一標識 OpenID 、用戶在微信開放平台帳號下的唯一標識UnionID（若當前小程序已綁定到微信開放平台帳號）和 會話密鑰 session_key
臨時登錄憑證 code 只能使用一次

配置流程

服務器域名請在「小程序后台-開發-開發設置-服務器域名」中進行配置，配置時需要注意：

域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 協議；
域名不能使用 IP 地址（小程序的局域網 IP 除外）或 localhost；
可以配置端口，如 https://myserver.com:8080，但是配置后只能向 https://myserver.com:8080 發起請求。如果向 https://myserver.com、https://myserver.com:9091 等 URL 請求則會失敗。
如果不配置端口。如 https://myserver.com，那么請求的 URL 中也不能包含端口，甚至是默認的 443 端口也不可以。如果向 https://myserver.com:443 請求則會失敗。
域名必須經過 ICP 備案；
出於安全考慮，api.weixin.qq.com 不能被配置為服務器域名，相關API也不能在小程序內調用。 開發者應將 AppSecret 保存到后台服務器中，通過服務器使用 getAccessToken 接口獲取 access_token，並調用相關 API；
不支持配置父域名，使用子域名

開發者代碼注入優化

自基礎庫版本 2.11.1 起，小程序支持懶注入，在 app.json 中配置

{
  "lazyCodeLoading": "requiredComponents"
}

添加這項配置后，未使用到的代碼文件將不被執行

其他優化

提前首屏數據請求

數據預拉取
周期性更新
骨架屏
緩存請求數據
精簡首屏數據：推薦開發者延遲請求非關鍵渲染數據，與視圖層渲染無關的數據盡量不要放在 data 中，加快頁面渲染完成時間
性能數據獲取：小程序助手
性能得分：
- 首屏時間不超過 5 秒
- 渲染時間不超過 500ms
- 一個執行周期內腳本運行時間不超過 1 秒
- 每秒調用setData的次數不超過 20 次
- setData的數據在JSON.stringify后不超過 256KB
- 頁面WXML節點少於 1000 個，節點樹深度少於 30 層，子節點數不大於 60 個
- 所有圖片均開啟 HTTP 緩存
- 圖片寬高乘積 <= 實際顯示寬高乘積 * (設備像素比 ^ 2)
- 所有網絡請求都在 1 秒內返回結果
- 通過wx.request發起的耗時超過 300ms 的請求並發數不超過 10 個
- 同域名耗時超過 100ms 的圖片請求並發數不超過 6 個
- 3 分鍾以內同一個url請求不出現兩次回包大於 128KB 且一模一樣的內容

小程序基礎語法

數據綁定

<view> {{ message }} </view>

<view id="item-{{id}}"> </view>

<checkbox checked="{{false}}"> </checkbox>

三元運算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算術運算

<view> {{a + b}} + {{c}} + d </view>

遍歷

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

條件渲染(wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好)

<view wx:if="{{condition}}"> </view>

定義模板

使用 name 屬性，作為模板的名字。然后在<template/>內定義代碼片段

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用模板：用 is 屬性，聲明需要的使用的模板，然后將模板所需要的 data 傳入；

<template is="msgItem" data="{{...item}}"/>

引用：WXML 提供兩種文件引用方式import和include

<import src="item.wxml"/>

<include src="header.wxml"/>

import 有作用域的概念，即只會 import 目標文件中定義的 template，而不會 import 目標文件 import 的 template

include 可以將目標文件除了 <template/> <wxs/> 外的整個代碼引入，相當於是拷貝到 include 位置

tabbar的配置（小程序自帶配置好頁面和路徑以及圖標和選中圖標即可生效)

  "tabBar": {
    "color": "#6e6d6b",
    "selectedColor": "#f9f027",
    "borderStyle": "white",
    "backgroundColor": "#000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/tabbar-01.png",
        "selectedIconPath": "images/tabbar-01-active.png",
        "text": "首頁"
      },
      {
        "pagePath": "pages/sort/index",
        "iconPath": "images/tabbar-02.png",
        "selectedIconPath": "images/tabbar-02-active.png",
        "text": "分類"
      },
      {
        "pagePath": "pages/cart/index",
        "iconPath": "images/tabbar-03.png",
        "selectedIconPath": "images/tabbar-03-active.png",
        "text": "購物車"
      },
      {
        "pagePath": "pages/my/index",
        "iconPath": "images/tabbar-04.png",
        "selectedIconPath": "images/tabbar-04-active.png",
        "text": "我的"
      }
    ]
  },

常用API

一般建議該用同步的時候就要用同步，同步解決不了的問題再用異步

wx.canIUse(string schema)

判斷小程序的API，回調，參數，組件等是否在當前版本可用

wx.getSystemInfo()  系統信息(同步版本)
wx.getSystemInfoAsync()  系統信息(異步版本)
wx.getSystemInfo() 獲取系統信息[一般用這個就好]

try {
    const res = wx.getSystemInfoSync()
    console.log(res)
} catch (e) {
    // Do something when catch error
}

wx.getSystemInfo({
    success (res) {
        console.log(res)
    }
})

wx.updateWeChatApp(Object object)

更新客戶端版本。當判斷用戶小程序所在客戶端版本過低時，可使用該接口跳轉到更新微信頁面

wx.updateWeChatApp({
    success(res){
        console.log(res,'res')
    }
})

wx.getUpdateManager()

獲取全局唯一的版本更新管理器，用於管理小程序更新（相關代碼前面小程序檢測版本更新章節有參考）

關於小程序頁面跳轉

wx.switchTab()
跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面
wx.reLaunch()  
關閉所有頁面，打開到應用內的某個頁面
wx.redirectTo()
關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面
wx.navigateTo()
保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面。小程序中頁面棧最多十層
wx.navigateBack()
關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages 獲取當前的頁面棧，決定需要返回幾層

wx.switchTab({
  url: '/index'
})

wx.reLaunch({
  url: 'test?id=1'
})
// 頁面內獲取參數
Page({
  onLoad (option) {
    console.log(option.query)
  }
})
wx.redirectTo({
  url: 'test?id=1'
})
wx.navigateTo({
  url: 'test?id=1'
})
wx.navigateBack({
  delta: 2
})

wx.showLoading(Object object)

wx.showToast(Object object)

wx.showLoading 和 wx.showToast 同時只能顯示一個
wx.showToast 應與 wx.hideToast 配對使用

wx.showToast({
    title: '操作成功',
    icon: 'loading', // success（成功） | error（失敗） | loading（加載中..） | none(無圖標)
    duration: 2000,
})

wx.showModal(Object object) 顯示模態對話框

wx.showModal({
    title: '提示',
    content: '這是一個模態彈窗',
    success (res) {
        if (res.confirm) {
            console.log('用戶點擊確定')
        } else if (res.cancel) {
            console.log('用戶點擊取消')
        }
    }
})

wx.setNavigationBarTitle() 動態設置當前頁面的標題

wx.setNavigationBarTitle({
    title:'自定義標題覆蓋當前設置的'
})

wx.setNavigationBarColor() 設置頁面導航條顏色背景字體樣式對應api也可設置

wx.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#ff0000',
    animation: {
        duration: 400,
        timingFunc: 'easeIn'
    }
})

wx.hideHomeButton() 隱藏返回首頁按鈕

微信7.0.7版本起，當用戶打開的小程序最底層頁面是非首頁時，默認展示“返回首頁”按鈕，開發者可在頁面 onShow 中調用 hideHomeButton 進行隱藏。

wx.showTabBar() 顯示 tabBar

wx.hideTabBar() 隱藏 tabBar

wx.pageScrollTo(Object object)

將頁面滾動到目標位置，支持選擇器和滾動距離兩種方式定位

wx.pageScrollTo({
  scrollTop: 0,
  duration: 300
})

wx.request(Object object) 網絡請求（ajax）

wx.request({
  url: '/api/login', //僅為示例，並非真實的接口地址
  data: {
    parmas1: '',
    parmas2: ''
  },
  header: {
    'content-type': 'application/json' // 默認值
  },
  success (res) {
    console.log(res.data)
  }
})

wx.uploadFile() 上傳文件

wx.chooseImage({
  success (res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //僅為示例，非真實的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      }
    })
  }
})

wx.downloadFile() 下載文件

wx.downloadFile({
  url: 'https://example.com/audio/123', //僅為示例，並非真實的資源
  success (res) {
    // 只要服務器有響應數據，就會把響應內容寫入文件並進入 success 回調，業務需要自行判斷是否下載到了想要的內容
    if (res.statusCode === 200) {
      wx.playVoice({
        filePath: res.tempFilePath
      })
    }
  }
})

小程序數據緩存

wx.setStorageSync() 將數據存儲在本地緩存中指定的key中(同步)
wx.setStorage()  從本地緩存中移除指定 key(異步)
wx.removeStorageSync() 從本地緩存中移除指定 key[同步]
wx.removeStorage() 從本地緩存中移除指定 key[異步]
wx.getStorageSync() 從本地緩存中獲取指定 key[同步]
wx.getStorage() 從本地緩存中獲取指定 key[異步]
wx.clearStorageSync() 清除緩存所有key[同步]
wx.clearStorage() 清除緩存所有key[異步]
wx.getStorageInfoSync() 從本地緩存中獲取所有 key(同步)
wx.getStorageInfo() 從本地緩存中獲取所有  key(異步)
最后面兩個幾乎用不上

// 設置
try {
  wx.setStorageSync('key', 'value')
} catch (e) { }
// 移除
try {
  wx.removeStorageSync('key')
} catch (e) {
  // Do something when catch error
}
// 獲取
try {
  var value = wx.getStorageSync('key')
  if (value) {
    // Do something with return value
  }
} catch (e) {
  // Do something when catch error
}
// 清除
try {
  wx.clearStorageSync()
} catch(e) {
  // Do something when catch error
}

wx.getLocation() 獲取當前的地理位置、速度。開啟高精度定位，接口耗時會增加，可指定 highAccuracyExpireTime 作為超時時間。地圖相關使用的坐標格式應為 gcj02。高頻率調用會導致耗電，如有需要可使用持續定位接口 wx.onLocationChange()

使用：在app.json文件中配置

"permission": {
  "scope.userLocation": {
     "desc": "你的位置信息將用於小程序位置接口的效果展示"
  }
}

wx.getLocation({
    type: 'wgs84',
    success (res) {
        console.log(res,'res')
    }
})

wx.getLocation({
 type: 'gcj02', //返回可以用於wx.openLocation的經緯度
 success (res) {
   const latitude = res.latitude
   const longitude = res.longitude
   // 使用微信內置地圖查看位置
   wx.openLocation({ 
     latitude,
     longitude,
     scale: 18 // 5 - 18 級 縮放比例
   })
 }
})

wx.chooseLocation() 打開地圖選擇位置

wx.showShareMenu() 顯示當前頁面的轉發按鈕參數

"shareAppMessage"表示“發送給朋友”按鈕，"shareTimeline"表示“分享到朋友圈”按鈕
顯示“分享到朋友圈”按鈕時必須同時顯示“發送給朋友”按鈕，顯示“發送給朋友”按鈕時則允許不顯示“分享到朋友圈”按鈕

wx.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
})

// 隱藏當前頁面的轉發按鈕
wx.hideShareMenu({
  menus: ['shareAppMessage', 'shareTimeline']
})

wx.showShareImageMenu() 打開分享圖片彈窗

wx.showShareImageMenu({
    path: '../../images/tabbar-01-active.png',
})

wx.shareVideoMessage() 轉發視頻到聊天(功能類似分享圖片)

wx.shareFileMessage() 轉發文件到聊天(功能類似分享圖片)

wx.scanCode() 調起客戶端掃碼界面進行掃碼

// 允許從相機和相冊掃碼
wx.scanCode({
    success (res) {
        console.log(res)
    }
})

wx.authorize() 授權

調用后會立刻彈窗詢問用戶是否同意授權小程序使用某項功能或獲取用戶的某些數據，但不會實際調用對應接口。如果用戶之前已經同意授權，則不會出現彈窗，直接返回成功。

小程序插件可以使用 wx.authorizeForMiniProgram

// 可以通過 wx.getSetting 先查詢一下用戶是否授權了 "scope.record" 這個 scope
wx.getSetting({
  success(res) {
    if (!res.authSetting['scope.record']) {
      wx.authorize({
        scope: 'scope.record',
        success () {
          // 用戶已經同意小程序使用錄音功能，后續調用                 wx.startRecord 接口不會彈窗詢問
          wx.startRecord()
        }
      })
    }
  }
})

授權列表

授權有效期

一旦用戶明確同意或拒絕過授權，其授權關系會記錄在后台，直到用戶主動刪除小程序。

最佳實踐

在真正需要使用授權接口時，才向用戶發起授權申請，並在授權申請中說明清楚要使用該功能的理由。

注意事項

wx.authorize({scope: "scope.userInfo"})，不會彈出授權窗口，請使用 <button open-type="getUserInfo"/> [``](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)
需要授權 scope.userLocation scope.userLocationBackground 時必須配置地理位置用途說明

wx.navigateToMiniProgram() 打開另一個小程序

wx.navigateBackMiniProgram() 返回到上一個小程序

只有在當前小程序是被其他小程序打開時可以調用成功

注意：微信客戶端 iOS 6.5.9，Android 6.5.10 及以上版本支持

wx.getUserProfile() 獲取用戶信息

頁面產生點擊事件（例如 button 上 bindtap 的回調中）后才可調用，每次請求都會彈出授權窗口，用戶同意后返回 userInfo。該接口用於替換 wx.getUserInfo

優化改進規則：https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801?highLine=login

<block wx:elif="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 獲取頭像昵稱 </button>
      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
      <view wx:else> 請使用1.4.4及以上版本基礎庫 </view>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">                  {{userInfo.nickName}}</text>
    </block>

 getUserProfile(e) {
    // 推薦使用wx.getUserProfile獲取用戶信息，開發者每次通過該接口獲取用戶個人信息均需用戶確認，開發者妥善保管用戶快速填寫的頭像昵稱，避免重復彈窗
    wx.getUserProfile({
      desc: '展示用戶信息', // 聲明獲取用戶個人信息后的用途，后續會展示在彈窗中，請謹慎填寫
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
      
  getUserInfo(e) {
    // 不推薦使用getUserInfo獲取用戶信息，預計自2021年4月13日起，getUserInfo將不再彈出彈窗，並直接返回匿名的用戶個人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }

wx.login() 調用接口獲取登錄憑證（code）

通過憑證進而換取用戶登錄態信息，包括用戶在當前小程序的唯一標識（openid）、微信開放平台帳號下的唯一標識（unionid，若當前小程序已綁定到微信開放平台帳號）及本次登錄的會話密鑰（session_key）等

// 登錄
wx.login({
    success: res => {
        console.log(res,'login信息')
        // 發送 res.code 到后台換取 openId,sessionKey,             unionId
    }
})

wx.checkSession() 檢查登錄態是否過期

通過 wx.login 接口獲得的用戶登錄態擁有一定的時效性。用戶越久未使用小程序，用戶登錄態越有可能失效。反之如果用戶一直在使用小程序，則用戶登錄態一直保持有效。具體時效邏輯由微信維護，對開發者透明。開發者只需要調用 wx.checkSession 接口檢測當前用戶登錄態是否有效。

登錄態過期后開發者可以再調用 wx.login 獲取新的用戶登錄態。調用成功說明當前 session_key 未過期，調用失敗說明 session_key 已過期。

wx.checkSession({
  success () {
    //session_key 未過期，並且在本生命周期一直有效
  },
  fail () {
    // session_key 已經失效，需要重新執行登錄流程
    wx.login() //重新登錄
  }
})

如果你只是用wx.login實現用戶快速登陸賬號，那么不需要使用checkSession。

除非服務端與小程序API交互需要用session_key時候(例如獲取用戶綁定的手機號)，不過期無所謂，過期了就重新wx.login，給后台換新的session_key

wx.checkSession幾乎沒有必要調用，而且他本身耗時，長達300+ms

以上API是較為常用的在實際項目開發中梳理了一遍；其他API遵照官方文檔即可；

公眾號關聯小程序

關聯規則：

所有公眾號都可以關聯小程序。
公眾號可關聯10個同主體，3個非同主體小程序。公眾號一個月可新增關聯小程序13次。
小程序可設置無需關聯確認。設置后，公眾號關聯小程序不需要小程序確認，單方操作即可關聯成功。
小程序可設置需關聯確認。設置后，公眾號關聯小程序需小程序管理員確認后才能關聯成功。
小程序可設置不允許被關聯。設置后，公眾號無法關聯此小程序。

關聯流程：

登錄公眾號后台-小程序-小程序管理-添加-關聯小程序

"style": "v2" wx7f576b5fa5065792

結語

以上就是小程序開發流程規范以及常用的API使用和注意的點，具體和齊全api參照官方文檔！以上內容自己總結，未經允許，請勿隨意轉載~謝謝合作！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 微信小程序開發流程微信小程序開發大體流程微信小程序開發流程支付寶小程序開發流程微信小程序后端開發流程小程序支付開發流程圖小程序開發客戶對接流程微信小程序開發的基本流程小程序開發流程(java后端) uniappp開發小程序，啟動及發布流程