mpvue中使用小程序雲開發總結

1、前言

這兩天在用踩坑了一下小程序雲開發，用mpvue、vant組件庫、wux組件庫、小程序雲開發開發了一款小程序。算是初試雲開發了，因此總結一下使用上的注意事項。

2、開啓雲開發功能

確保你的微信開發工具是最新版的
小程序雲開發文檔

1. 註冊一個小程序帳號

小程序雲開發必須有小程序AppId才能使用，因此首先應先註冊一個小程序帳號（若是已有請忽略）。記錄下設置->開發設置中的小程序AppId

2. 用mpvue初始化一個項目

參考： mpvue官方文檔

# 全局安裝 vue-cli
$ npm install --global vue-cli

# 建立一個基於 mpvue-quickstart 模板的新項目
$ vue init mpvue/mpvue-quickstart my-project

# 安裝依賴
$ cd my-project
$ npm install
# 啓動構建
$ npm run dev

2. 在微信開發者工具中新建項目

新建項目選擇的目錄爲dist目錄，而後填寫剛剛註冊的小程序的AppId。

打開項目以後，能夠發現開發者工具中多了個雲開發的按鈕。點擊以後，安裝提示配置，就能夠了。微信默認免費提供開發者一個服務器進行雲開發，對於小型程序來講是夠用了。

3、正式使用雲開發

1. 開發前的配置

首先在src/main.js文件添加如下語句。

wx.cloud.init({
  traceUser: true
})

必需要初始化才能使用雲開發，traceUser決定是否在將用戶訪問記錄到用戶管理中，在控制檯中可見。

2. 初試數據庫

雲開發的數據庫是一個JSON數據庫，這裏使用了查詢數據的功能。

添加數據

首先得有數據，你能夠在程序裏進行插入數據（提交表單時使用）（參考雲開發的文檔），也能夠手動的在雲開發控制檯中插入數據。

我直接在控制檯插入數據好了。

在控制檯的數據庫中，點擊添加集合->填入集合名稱->在集合中點擊添加紀錄->添加所需的數據。這種插入數據的方式，是不帶有用戶態的(openId)，若是你的權限設置是管理員可讀的話，那是沒辦法讀取到信息的，由於沒有openId，沒辦法識別你的身份。

千萬記住，要考慮你的集合數據的使用範圍進行 權限設置，好比我添加的是 article文章，那這是公開的。那我就應該在權限設置中修改成 全部用戶可讀、僅管理員可寫，默認的是 僅建立者及管理員可讀寫。

查詢數據

mounted{
  // env是你雲開發的環境id。
  const db = wx.cloud.database({ env: 'meow-helper-1b5609' })
  this.db.collection('article').get()
  .then(res=>{
    console.log(res.data)
    // 能夠進行數據初始化
  })
  .cathc(console.error)
}

能夠看到，使用方法很簡單，固然你也可使用回調的方式查詢數據，具體參考雲開發文檔。

3. 雲開發下的登陸流程

雲開發大大簡化了登陸流程，由於每當有用戶訪問時，都會在雲開發控制檯留下該用戶的openId。因此，我處理登陸流程以下：

• 使用<button></button>組件獲取用戶受權
• 使用雲函數從後端返回用戶openId (待會會講如何使用雲函數)
• 若是同時有openId以及用戶是否受權，那麼就登陸了

若用戶受權了，那麼你能在雲開發控制檯的用戶管理中看到用戶信息，不然只能看到一條記錄以及openId

4.雲函數的使用

這裏講解如何經過雲函數返回用戶的openId

配置雲函數根目錄

在/static目錄下建立目錄funtions，而後在project.config.json文件下新增字段

{
  "cloudfunctionRoot": "/static/functions/"
}

注意：這可能在編譯後不會生效，保險起見，應在npm run dev後檢查dist/project.config.json文件，看看剛剛的字段是否添加成功，若是沒有，請在dist/project.config.json中也添加上述字段。

新增雲函數

新增雲函數這一步必須得在微信開發者工具中進行。

1. 打開開發者工具
2. 在編輯器窗口下，右鍵/static/funtions，選擇新建Node雲函數
3. 填寫雲函數名,如user，回車。
4. 在彈出的窗口中，會詢問你是否安裝wx-server-sdk，點擊肯定（若是安裝沒有進行，能夠本身手動在命令行中運行npm install）

完成以上步驟後就能夠在index.js中編寫雲函數了。如下的雲函數代碼用於返回用戶openId

// 雲函數入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 雲函數入口函數
exports.main = async (event, context) => {
  return event.userInfo
}

編寫完成後，必定要記得右鍵雲函數目錄，選擇上傳並部署以後，才能使用雲函數。

使用雲函數

// 調用雲函數，返回用戶openId，參數爲雲函數名稱
wx.cloud.callFunction({ name: 'user' }).then(res => {
          console.log(res)
      // 更新store中的openId
          this.$store.commit('updateOpenId', res.result)
          return this.WXP.getSetting()
        })
        .then(res => {
      // 檢驗是否受權
          const authUserInfo = res.authSetting['scope.userInfo']
          if (authUserInfo) {
            this.$store.commit('updateAuthUserInfo', authUserInfo)
          }
        })
        .catch(err => console.error(err))

5.存儲的使用

雲開發的存儲具備上傳，下載，刪除等功能，具體能夠查看雲開發文檔。

它支持直接在<image/>,<audio/>等組件中直接使用雲文件id。接下來演示一下。

首先咱們手動在雲存儲中上傳一張圖片，而後複製其fileId

在須要用到的地方引入便可：

<image src="cloud://meow-helper-1b5609.6d65-meow-helper-1b5609/img/13.png"/>

4、總結

小程序雲開發是屬於最近剛出來的技術，目的是爲了簡化小程序的開發。特別適合於業務邏輯簡單，功能不復雜的小程序。對於那些好比說電商平臺等業務邏輯複雜的小程序，目前來講可能不適合了。

這個是我用雲開發寫的一個小程序，歡迎你們使用，提供建議。

貓叫助手 | 收錄各類貓叫聲，幫助與貓咪交流，分享一些養貓的小知識等。

原文連接: mpvue中小程序雲開發總結|Rychou

5、分享個小程序

這是我近期使用Taro開發框架開發的一款小程序，主要功能是提供可靠的書架管理功能，只須要掃一掃書籍背後的條形碼便可添加書籍入庫，你能夠方便的在線上管理你的書架，查看書籍的基本信息，亦能夠添加書評。

該項目得到了微信小程序 U 計劃的資助。目前項目正在開發中，歡迎你們體驗反饋。