mpvue中使用小程序雲開發詳細步驟

你可以在這裏下載本教程的示例工程：

一、創建項目

創建mpvue項目

$ vue init mpvue/mpvue-quickstart my-project

$ cd my-project
$ npm install

$ npm run dev

在微信開發者工具中新建項目：新建項目選擇的目錄爲dist/wx目錄，然後填寫剛剛註冊的小程序的AppId。

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

二、使用雲開發

新建雲開發工程

1 情況mpvue下的dist目錄

2 在dist目錄下用微信小程序開發工具新建雲開發工程

3 修改mpvue編譯生成目錄
在mpvue工程下的config目錄裏面的index.js裏：

修改wx爲miniprogram，並情況dist下miniprogram文件夾。

4 編譯工程

mpm run dev

5 查看miniprogram文件夾

使用默認雲函數login

1 在原來刪除的miniprogram查看login函數調用接口，可以重新建一個雲開發工程查看。

2 在main.js裏面添加
（1）雲函數初始化（原因參考官方手冊）

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

（2）調用login

function onGetOpenid() {
  // 調用雲函數
  wx.cloud.callFunction({
    name: 'login',
    data: {},
    success: res => {
      console.log('[雲函數] [login] user openid: ', res.result.openid)
      console.log('event:' + res.result.appid)
    },
    fail: err => {
      console.error('[雲函數] [login] 調用失敗', err)
    }
  })
}
//加載APP後調用函數
onGetOpenid();

3 可以看到控制檯打印結果

新增自定義雲函數

新建雲函數：
方法一：
1.點擊進入開發者工具的雲開發管理後臺(未開通事會提示開通)
2.點擊雲函數按鈕進入雲函數管理界面
3.點擊左側的新建雲函數按鈕

方法二：
1.2.3.右鍵雲函數根目錄cloudfunctions

4.輸入雲函數名稱(get_openid)點擊確定

5.在cloudfuntions文件夾上右擊選擇『同步雲函數列表』
6.在同步之後出現的文件夾上(get_openid)右擊選擇下載雲函數，並添加相關json文件，可以參考login示例文件夾
7.在雲函數的index.js文件中輸入以下內容並保存

const cloud = require('wx-server-sdk')

// 初始化 cloud
cloud.init({
  // API 調用都保持和雲函數當前所在環境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})

exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  try {
    let data = {
      openid: wxContext.OPENID
    }
    console.log(JSON.stringify(event))
    return data
  } catch (err) {
    console.log(err)
    return err
  }
}

8.雲函數文件夾(get_openid)上右擊選擇上傳並部署:雲端安裝依賴，因爲要在雲端安裝依賴，所以需要時間較長

使用自定義雲函數

src/main.js中添加，添加過的就不用添加了

wx.cloud.init({
  traceUser: true  //將用戶訪問記錄到用戶管理中，在控制檯中可見
})

頁面vue文件的onLoad方法追加以下代碼，這次我們改寫在onload生命週期位置，並使用另一種寫法

wx.cloud.callFunction({ name: 'get_openid' }).then(res => {
  console.log(res)
})

保存之後打開相應頁面即可在控制檯看到打印出來的信息

三、其他

會看到一個wx.login()函數，這個其實是用來在非雲開發模式下使用的，用來獲取openID。其目的在於將openID放在自己的服務器上獲取，而不是在小程序中獲取，這樣可以避免小程序被抓包破解，從而泄露信息。
參考博客：https://www.jianshu.com/p/865f0679ba52
對於使用雲開發的服務器，我們就不需要用該方法獲取用戶信息了。

---

交流QQ羣：【技術齋】646258285
關注微信公衆號【技術齋】，閱讀更多內容。我會定期對博客內容進行整理，用簡單的語言發佈到公衆號上，適合休閒閱讀。