Slog68_微信雲開發開啓全棧時代！（微信小程序之雲開發-全棧時代1）

• ArthurSlog
• SLog-68
• Year·1
• Guangzhou·China
• Sep 11th 2018

---

• ArthurSlog Page
• GitHub
• NPM Package Page
• 掘金主頁
• 簡書主頁
• segmentfault

常道無名 惟德以顯之 至德無本 順道而成之 禍福無門 唯人自召 善惡之報 如影隨形

---

開發環境MacOS(High Sierra 10.13.5)

須要的信息和信息源：

• 小程序官方文檔

開始編碼

• 騰訊推出「雲開發」概念，簡單說，就是爲開發者提供搭建好的服務器，服務器使用npm安裝好了「wx-server-sdk」模塊
• 騰訊就是把業務包裝在模塊裏，而後在本身的平臺提供的 API，供開發人員調用
• 開發人員能夠藉助平臺進行核心業務開發，實現快速上線和迭代
• 雲開發方式，能夠和開發者已經使用的雲服務相互並存
• 如今先把微信開發工具更新至最新（1.02.1809101）
• 雲開發方式，須要appid，請準備好
• 新建一個小程序項目，選擇「創建雲開發快速啓動模版」
• 項目創建以後，文件結構以下：

cloudfunctions
    | - login

miniprogram
    | - images
           | - code-db-inc-dec.png
           | - code-db-onAdd.png
           | - code-db-onQuery.png
           | - code-db-onRemove.png
           | - code-func-sum.png
           | - console-entrance.png
           | - create-collection.png
    | - pages
           | - addFunction
                    | - addFunction.js
                    | - addFunction.json
                    | - addFunction.wxml
                    | - addFunction.wxss
           | - chooseLib
                    | - chooseLib.js
                    | - chooseLib.json
                    | - chooseLib.wxml
                    | - chooseLib.wsxx
           | - databaseGuide
                    | - databaseGuide.js
                    | - databaseGuide.json
                    | - databaseGuide.wxml
                    | - databaseGuide.wxss
           | - deployFunctions
                    | - deployFunctions.js
                    | - deployFunctions.json
                    | - deployFunctions.wxml
                    | - deployFunctions.wxss
           | - index
                    | - index.js
                    | - index.wxml
                    | - index.wxss
                    | - user-unlogin.png
           | - storageConsole
                    | - storageConsole.js
                    | - storageConsole.json
                    | - storageConsole.wxml
                    | - storageConsole.wxss
           | - userConsole
                    | - userConsole.js
                    | - userConsole.json
                    | - userConsole.wxml
                    | - userConsole.wxss
    | - style
           | - guide.wxss
    | - app.js
    | - app.json
    | - app.wxss

README.md
project.config.json

• 如今，在開發者工具工具欄左側，點擊 「雲開發」 按鈕可開通雲開發
• 開發環境命名目前不可更改！
• 一個帳戶能夠建立兩個環境，建立一個做爲測試環境，命名爲test，而後平臺會給你生成一個環境ID，相似這個樣子test-3gh3g12
• 而後在再建立一個生產環境produce
• 點擊右上角能夠切換開發環境，如今切換回test
• 回到開發界面，右擊cloudfunctions路徑下的login文件夾，選擇上傳並部署
• 等待上傳成功以後，打開miniprogram路徑下的app.js文件，對這個文件進行更新
• 更新以前，先點擊微信開發工具的左上角的「雲開發」，而後，在雲開發界面的左上角找到「環境ID」，複製「環境ID」
• 接下來更新代碼：

miniprogram/app.js

//app.js
App({
  onLaunch: function () {
    
    if (!wx.cloud) {
      console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力')
    } else {
      wx.cloud.init({
        env: 'test-dxx7x',
        traceUser: true,
      })
    }

    this.globalData = {}
  }
})

• 添加環境變量 env: 'test-dxx7x'
• 保存修改
• 在模擬器中點擊「點擊獲取openid」
• 在Console控制檯裏能夠看到

[雲函數] [login] user openid:  o8xxf0Sxxxfdsfdfsdf342

• ok,已經實現了簡單的一個先後交互邏輯
• 打開微信開發工具的左上角的「雲開發」，點擊「雲函數」
• 能夠看到咱們的login函數已經出現了，在「函數名稱」欄中點擊login，能夠看到login函數的三大參數：

1. 函數配置
2. 日誌
3. 監控

• 其中日誌記錄就能夠看成是後端服務器的控制檯了，相關的調用時間和記錄均可以差的到
• 還有比較實用的日誌篩選功能
• 如今點擊左上角的「測試」按鈕，能夠對函數進行測試
• 點擊「運行測試」
• 測試結果：失敗
• 查看日誌，以下：

TypeError: Cannot read property 'openId' of undefined
    at EventHandler.exports.main [as realHandler] (/var/user/index.js:21:28)
    at EventHandler.handle (/var/runtime/node8/bootstrap.js:238:34)
    at invoke (/var/runtime/node8/bootstrap.js:111:22)
    at Timeout.setTimeout [as _onTimeout] (/var/runtime/node8/bootstrap.js:61:9)
    at ontimeout (timers.js:475:11)
    at tryOnTimeout (timers.js:310:5)
    at Timer.listOnTimeout (timers.js:270:5)

• 咱們點擊左上角的「用戶管理」，點擊右上角的「複製openid「
• 而後咱們返回雲函數，點擊左邊的「login」函數，再從新點擊右邊的「測試」按鈕來測試函數
• 雙擊「openId」右邊的值，右鍵粘貼咱們剛剛複製的openID
• 如今點擊「運行測試」，結果是
• 測試結果：成功
• 報錯消失
• 接下來
• 咱們來本身編寫一個雲服務（後端服務）
• 回到微信開發工具，右鍵點擊cloudfunctions文件夾，點擊「新建node.js雲函數」，並命名爲 "arthurSlog_getInfo"
• 開發工具會在cloudfunctions路徑下建立一個 arthurSlog_getInfo 文件夾，文件結構以下：

cloudfunctions/arthurSlog_getInfo

cloudfunctions
      | - arthurSlog_getInfo
                 | - index.js
                 | - package.json
                 | - package-lock.json

• 這個文件是要放在服務器上，爲咱們的前端提供服務的
• 這個文件會提供一個「接口」供先後端交互
• 其中package.json文件裏，包含了index.js代碼的依賴關係
• 簡單點說，index.js 裏面會引用到 wx-server-sdk這個模塊的方法
• 而這些引用的關係，就記錄再package.json文件裏面
• 咱們能夠看一下package.json文件裏的代碼：

cloudfunctions/arthurSlog_getInfo/package.json

{
  "name": "arthurSlog_getInfo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "wx-server-sdk": "latest"
  }
}

• package.json 是一份配置文件，只用來指導 npm工具作事的方案
• npm工具，是nodejs語言的一個包管理工具，更多的使用方式 參考 npm官方手冊
• 在個人 Slog57 和 Slog58兩篇文章中，介紹了npm的使用和npm package（npm包）的製做、發佈和更新
• 感興趣的能夠去翻閱一下
• 好了，回過頭來，咱們看回來微信「雲開發」
• 讓咱們來打開剛剛建立的 arthurSlog_getInfo路徑下的 index.js文件
• 同時添加代碼：

cloudfunctions/arthurSlog_getInfo/index.js

// 雲函數入口文件
const cloud = require('wx-server-sdk') //引入騰訊封裝好的業務 API

cloud.init() //初始化

// 雲函數入口函數
// 導出函數（服務），供前端訪問，函數名爲 arthurSlog_getInfo
exports.main = async(event, context) => {
  return event.userInfo
}

• 編寫完成以後，右鍵arthurSlog_getInfo文件夾，點擊「上傳並部署」
• 由於雲函數中使用 wx-server-sdk 需在對應雲函數目錄下安裝 wx-server-sdk 依賴
• 參考 微信官方說明
• 在建立雲函數時會在雲函數目錄下默認新建一個 package.json 並提示用戶是否當即本地安裝依賴
• 請注意雲函數的運行環境是 Node.js，所以在本地安裝依賴時務必保證已安裝 Node.js，同時 node 和 npm 都在環境變量中
• 如不本地安裝依賴，能夠用命令行在該目錄下運行：

npm install --save wx-server-sdk@latest

• ok，如今咱們打開 miniprogram/pages/index/index.js 文件：
• 並添加前端代碼：（用於向後端發起請求服務）

miniprogram/pages/index/index.js

//index.js
const app = getApp()

Page({
  data: {
    avatarUrl: './user-unlogin.png',
    userInfo: {},
    logged: false,
    takeSession: false,
    requestResult: ''
  },

  onLoad: function() {
    if (!wx.cloud) {
      wx.redirectTo({
        url: '../chooseLib/chooseLib',
      })
      return
    }

    // 獲取用戶信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已經受權，能夠直接調用 getUserInfo 獲取頭像暱稱，不會彈框
          wx.getUserInfo({
            success: res => {
              this.setData({
                avatarUrl: res.userInfo.avatarUrl,
                userInfo: res.userInfo
              })
            }
          })
        }
      }
    })
  },

  onGetUserInfo: function(e) {
    if (!this.logged && e.detail.userInfo) {
      this.setData({
        logged: true,
        avatarUrl: e.detail.userInfo.avatarUrl,
        userInfo: e.detail.userInfo
      })
    }
  },

  onGetOpenid: function() {
    // 調用雲函數
    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log('[雲函數] [login] user openid: ', res.result.openid)
        app.globalData.openid = res.result.openid
        wx.navigateTo({
          url: '../userConsole/userConsole',
        })
      },
      fail: err => {
        console.error('[雲函數] [login] 調用失敗', err)
        wx.navigateTo({
          url: '../deployFunctions/deployFunctions',
        })
      }
    })
  },

  // 上傳圖片
  doUpload: function() {
    // 選擇圖片
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function(res) {

        wx.showLoading({
          title: '上傳中',
        })

        const filePath = res.tempFilePaths[0]

        // 上傳圖片
        const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            console.log('[上傳文件] 成功：', res)

            app.globalData.fileID = res.fileID
            app.globalData.cloudPath = cloudPath
            app.globalData.imagePath = filePath

            wx.navigateTo({
              url: '../storageConsole/storageConsole'
            })
          },
          fail: e => {
            console.error('[上傳文件] 失敗：', e)
            wx.showToast({
              icon: 'none',
              title: '上傳失敗',
            })
          },
          complete: () => {
            wx.hideLoading()
          }
        })

      },
      fail: e => {
        console.error(e)
      }
    })
  },
  // 添加前端代碼，向後端服務發起 名爲」arthurSlog_getInfo「方法的請求
  // 請求的結果會返回，並保存再 res對象中
  // 這裏咱們把結果再控制檯打印出來
  arthurSlog_getInfo: function() {
    wx.cloud.callFunction({
      name: 'arthurSlog_getInfo',
      complete: res => {
        console.log('callFunction test result: ', res)
      }
    })
  },
})

• 而後，再打開 miniprogram/pages/index/index.wxml 文件
• 並添加頁面代碼，在頁面上新建一個 button 組件與js裏的方法 「arthurSlog_getInfo」綁定在一塊兒
• 當點擊按鈕的時候，調用函數「arthurSlog_getInfo」，像雲服務（後端）發起請求

miniprogram/pages/index/index.wxml

<!--index.wxml-->
<view class="container">

  <!-- 用戶 openid -->
  <view class="userinfo">
    <button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo" class="userinfo-avatar" style="background-image: url({{avatarUrl}})"></button>
    <view>
      <button class="userinfo-nickname" bindtap="onGetOpenid">點擊獲取 openid</button>
    </view>
  </view>


  <!-- 上傳圖片 -->
  <view class="uploader">
    <view class="uploader-text" bindtap="doUpload">
      <text>上傳圖片</text>
    </view>
    <view class="uploader-container" wx:if="{{imgUrl}}">
      <image class="uploader-image" src="{{imgUrl}}" mode="aspectFit" bindtap="previewImg"></image>
    </view>
  </view>


  <!-- 操做數據庫 -->
  <view class="uploader">
    <navigator url="../databaseGuide/databaseGuide" open-type="navigate" class="uploader-text">
      <text>前端操做數據庫</text>
    </navigator>
  </view>

  <!-- 新建雲函數 -->
  <view class="uploader">
    <navigator url="../addFunction/addFunction" open-type="navigate" class="uploader-text">
      <text>快速新建雲函數</text>
    </navigator>
  </view>

  <!-- 新建雲函數 -->
  <!-- fun:  -->
  <view class="uploader">
    <button class="userinfo-nickname" bindtap="arthurSlog_getInfo">點擊向雲端發起請求</button>
  </view>

</view>

• 保存，在模擬器中，點擊「點擊向雲端發起請求」按鈕
• 觀察控制檯打印的信息：

callFunction test result:  {errMsg: "cloud.callFunction:ok", result: {…}}

• 點擊展開 {errMsg 左邊的小箭頭展開：

errMsg
:
"cloud.callFunction:ok"
result
:
{appId: "*****wd1**14*****", openId: "o5***4******N****"}
__proto__
:
Object

• 能夠看到雲端服務返回的 appId 和 openId數據
• 至此，咱們對微信「雲開發」有了基礎的瞭解和使用。

---

歡迎關注個人微信公衆號 ArthurSlog

若是你喜歡個人文章 歡迎點贊 留言

謝謝