基于雲開發完成小程式使用者注冊登入

小程式 · 雲開發已經上線到現在也已經快有兩年了，期間自己也基于雲開發釋出了幾個小程式，總得來說，對于前端開發者來說，确實友善了很多。不用買伺服器、域名，不需要搭建資料庫、靜态存儲應用。通過平台提供的簡 API 就可以進行核心業務的開發。

之前，如果我們想要開發一個小程式，運維人員需要考慮買什麼樣的伺服器，比對哪些資源，比如存儲應用、資料庫等，後端開發人員需要編寫服務接口，前端人員需要編寫頁面，對接後端提供的接口，這個工作流程下來，需要至少一個月的時間。有了“小程式 · 雲開發”以後，開發者不用考慮後端複雜的技術操作，一個前端開發者就可以輕松的完成從無到有、從開發到釋出的過程。

1 小程式注冊

如果之前注冊了小程式或者有小程式APPID的使用者可以直接忽略這步。

首先要去注冊個小程式，如果開發者工具選擇測試号，是不能體驗雲開發的。小程式注冊位址如下：

​​https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN&token=​​

選擇小程式

填寫注冊資訊，激活郵箱，填寫基本資訊後，在設定裡可以看到APPID。這裡需要說明下，一個企業最多可以注冊50個微信小程式；個體工商戶最多可以注冊5個小程式；

2 搭建基礎環境

上面我們已經有了小程式，接下來就是建立小程式基礎環境，下載下傳微信開發者工具：

​​https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html​​

首次登入或者長時間未使用，需要微信掃一掃登入，這樣才能拿到你的微信号是否有權限開發小程式。

建立小程式項目，選擇後端服務 -“小程式 · 雲開發”

等待項目初始化完成，目錄結構如下

├── /cloudfunctions/         # 雲函數
├── /miniprogram/            # 前端代碼
│ ├── /images/               # 圖檔等資源
│ ├── /pages/                # 頁面目錄
│ ├── /app.js                # 全局配置
│ ├── /app.json              # 全局配置
│ ├── /app.wxss              # 全局樣式檔案
├── /project.config.json     # 項目配置檔案
      

預設建立項目是沒有雲環境的，需要我們自己初始化，并建立環境名稱

項目裡使用建立的環境，在app.js檔案配置

onLaunch: function () {
  if (!wx.cloud) {
    console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力')
  } else {
    wx.cloud.init({
      env: 'prd-yymsa'
      // env: 'dev-zvjun'
    })
  }
},      

我建立了兩個。一個是開發環境，一個是生産環境，并且一個小程式也隻能建立兩個，在之前，環境隻能建立，不能删除，現在也已經支援删除。

到這裡，我們基礎環境已經搭建完成，接下來就是如何編寫代碼了。

3 編寫邏輯代碼

1.擷取使用者

cloudfunctions目錄建立Node.js雲函數，名字getUser，内容如下

const cloud = require('wx-server-sdk')
  cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV })
  const db = cloud.database()
  exports.main = async (event, context) => {
    const wxContext = cloud.getWXContext()
    return await db.collection('user').where({
      openid: wxContext.OPENID
    }).get().then(res => {
      return res
  })
 }
      

第一行，引入sdk

第二行，使用設定的雲函數環境

第三行，初始化db

第四行到最後，這裡面就是我們要寫的邏輯，這裡是傳回user表的指定openid的值

一個簡單的查詢使用者接口就完成了

2 新增使用者

cloudfunctions目錄建立Node.js雲函數，名字addUser，内容如下

const cloud = require('wx-server-sdk')
  cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV })
  const db = cloud.database()
  exports.main = async (event, context) => {
   const wxContext = cloud.getWXContext()
    return await db.collection('user').add({
      data: {
        openid: wxContext.OPENID,
        nickName: event.nickName,
       gender: event.gender,
       language: event.language,
       city: event.city,
       province: event.province,
       country: event.country,
       avatarUrl: event.avatarUrl,
       role: "user"
     },
   })
 }
      

這裡也不用過多解釋，第一、二、三行，都一樣、四行到最後是向user表插入資料。

3 更新使用者

cloudfunctions目錄建立Node.js雲函數，名字updateUser，内容如下

const cloud = require('wx-server-sdk')
  cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV })
  const db = cloud.database()
  exports.main = async (event, context) => {
    const wxContext = cloud.getWXContext()
    return await db.collection('user').where({
      openid: wxContext.OPENID
    })
      .update({
       data: {
         nickName: event.nickName,
         gender: event.gender,
         language: event.language,
         city: event.city,
         province: event.province,
         country: event.country,
         avatarUrl: event.avatarUrl
       },
     })
 }      

代碼基本和新增使用者一樣，隻不過是我們這次要在插入的是指定openid的值。

到這裡，新增、修改、查詢接口已經完成了、接下來就是我們寫前端調用了。

4 編寫調用代碼

如果都看到這了，說明你是需要的，那說明你的小程式肯定也有使用者個人中心頁面，

我的邏輯是，使用者如果首次使用小程式，則需要登入，如果不是，之後就不在需要點選登入，直接擷取使用者資訊，畢竟雲開發是可以直接擷取使用者openid，

gologin(e) {
  let that = this
  wx.cloud.callFunction({
    name: 'getUser',
  }).then(res => {
    if (res.result.data == '') {
      wx.cloud.callFunction({
        name: 'addUser',
        data: {
          nickName: e.detail.userInfo.nickName,
          gender: e.detail.userInfo.gender,
          language: e.detail.userInfo.language,
          city: e.detail.userInfo.city,
          province: e.detail.userInfo.province,
          country: e.detail.userInfo.country,
          avatarUrl: e.detail.userInfo.avatarUrl
        }
      }).then(addres => {
        that.setData({
          userInfo: e.detail.userInfo
        })
        wx.setStorageSync('userInfo', JSON.stringify(e.detail.userInfo))
      })
    } else {
      that.setData({
        userInfo: res.result.data[0]
      })
      wx.setStorageSync('userInfo', JSON.stringify(res.result.data[0]))
    }
  })
},
      

這個方法也比較簡單，先去查詢使用者，如果沒有，我就新增，如果有，就快取區域。更新的方法就不展示了，用法基本一樣。

簡單了解，就是騰訊雲把小程式開發的服務端已經搭好，開發者看不到、也不需要看到背景架構如何搭建，更不用操心背景的穩定性和安全性問題，直接調用接口，寫小程式端代碼就可以了。