Slog69_實現一個帶參數的雲函數GET！（微信小程序之雲開發-全棧時代2）

時間  2019-12-13
標籤 slog69 slog 實現 一個 參數 函數 微信 程序 開發 時代 简体版
原文   原文鏈接

ArthurSlog

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

禍兮福之所倚 福兮禍之所伏html

開發環境MacOS(High Sierra 10.13.5)

須要的信息和信息源：

前言

  • 騰訊推出「雲開發」概念，簡單說，就是爲開發者提供搭建好的服務器，服務器使用npm安裝好了「wx-server-sdk」模塊
  • 騰訊就是把業務包裝在模塊裏，而後在本身的平臺提供的 API，供開發人員調用
  • 開發人員能夠藉助平臺進行核心業務開發，實現快速上線和迭代
  • 雲開發方式，能夠和開發者已經使用的雲服務相互並存
  • 」雲開發「 提供三大基礎能力：
  1. 雲函數
  2. 數據庫
  3. 存儲管理

開始編碼

  • 如今先把微信開發工具更新至最新（1.02.1809101），有部分開發人員在微信社區反饋更新以後沒有看到「雲開發」的按鈕
  • 解決辦法：點擊檢查更新，等待更新徹底完成以後重啓開發工具
  • 重點：雲開發方式須要appid，請準備好
  • 當前雲開發模版的微信小程序文件結構以下：
cloudfunctions
    | - login
          | - index.js
          | - package.json
          | - package-lock.json
          
    | - arthurSlog_getInfo
          | - index.js
          | - package.json
          | - package-lock.json
          
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
  • 在使用「雲開發」的時候，必定要記得最早調用 初始化函數 init，小程序端和雲端都須要 初始化函數

Client：
miniprogram/app.js前端

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

    this.globalData = {}
  }
})

Server:
cloudfunctions/arthurSlog_getInfo/index.jsnode

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

cloud.init()

// 雲函數入口函數
exports.main = async(event, context) => {
  return event.userInfo
}
  • 上面的Server端代碼中

Server:
cloudfunctions/arthurSlog_getInfo/index.jsgit

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

//cloud.init()

// 雲函數入口函數
exports.main = async(event, context) => {
  return event.userInfo
}
  • 沒有調用到 「wx-server-sdk」 的方法，因此能夠註釋掉，不影響結果
  • 這裏提醒一下，就是 cloudfunctions 路徑下的文件名稱，就是雲端向小程序端提供的方法
  • 舉個栗子 cloudfunctions/arthurSlog_getInfo，arthurSlog_getInfo這個文件夾的名字就是雲端向小程序端提供的方法
  • 如今在小程序端就能夠參考小程序端API文檔（客戶端）
  • 大部分函數都來源於 對象「wx」，這個 「wx」對象 就相似於服務端的 「wx-server-sdk」對象
  • 這兩個對象都包含了騰訊公司封裝好的屬性和方法
  • 讓咱們來回顧一下以前的項目文件

Client
miniprogram/pages/index/index.jsgithub

//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對象中
  // 這裏咱們把結果再控制檯打印出來
  // 返回appId 和 openId的數據，並保存在res對象中
  arthurSlog_getInfo: function() {
    wx.cloud.callFunction({
      name: 'arthurSlog_getInfo',
      complete: res => {
        console.log('callFunction test result: ', res)
      }
    })
  },
})
  • 定位到咱們添加的方法區域：

Client
miniprogram/pages/index/index.js數據庫

//index.js
const app = getApp()

Page({
  data: {
    avatarUrl: './user-unlogin.png',
    userInfo: {},
    logged: false,
    takeSession: false,
    requestResult: ''
  },
  // 添加前端代碼，向後端服務發起 名爲」arthurSlog_getInfo「方法的請求
  // 請求的結果會返回，並保存再 res對象中
  // 這裏咱們把結果再控制檯打印出來
  // 返回appId 和 openId的數據，並保存在res對象中
  arthurSlog_getInfo: function() {
    wx.cloud.callFunction({
      name: 'arthurSlog_getInfo',
      complete: res => {
        console.log('callFunction test result: ', res)
      }
    })
  },
})
  • 其中，咱們就調用了用了 「wx」對象 的方法，wx.cloud.callFunction()
  • 這個方法會讓小程序端向雲端發送請求，請求的方法名稱是 arthurSlog_getInfo（name參數）
  • 同時等待服務端的返回的數據，返回的數據保存在res對象中
  • 咱們再來看雲端的代碼文件，雲函數的傳入參數有兩個，一個是 event 對象，一個是 context 對象。

Server:
cloudfunctions/arthurSlog_getInfo/index.jsnpm

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

//cloud.init()

// 雲函數入口函數
exports.main = async(event, context) => {
  return event.userInfo
}
  • event 指的是觸發雲函數的事件，當小程序端調用雲函數時，
  • event 就是小程序端調用雲函數時傳入的參數，外加後端自動注入的小程序用戶的 openid 和小程序的 appid
  • context 對象包含了此處調用的調用信息和運行狀態，能夠用它來了解服務運行的狀況
  • 如今，咱們在小程序端寫一個帶數據（帶參數）的方法，把數據傳給雲端（服務端），而後小程序端接收返回的數據
  • 首先編寫客戶端代碼

Client
miniprogram/pages/index/index.jsjson

//index.js
const app = getApp()

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

  //
  //...省略中間的代碼.........
  //

  // 添加前端代碼，向後端服務發起 名爲」arthurSlog_methodAdd「方法的請求
  // 請求的結果會返回，並保存再 res對象中
  // 這裏咱們把結果在控制檯打印出來
  // 返回appId 和 openId的數據，並保存在res對象中
  arthurSlog_methodAdd: function() {
    wx.cloud.callFunction({
        // 雲函數名稱
        name: 'arthurSlog_methodAdd',
        // 傳給雲函數的參數
        data: {
          a: 8,
          b: 8,
        },
      })
      .then(res => {
        console.log(res.result)
      })
      .catch(console.error)
  },
})
  • 在小程序端：咱們建立了一個新的方法，方法名爲 「arthurSlog_methodAdd」，傳送的雲端的數據是 data對象，data對象裏面包含了兩個對象，a對象和b對象的值都是8
  • 如今，咱們來建立一個新的服務端方法，同時編寫新方法的代碼文件：
  • 右鍵 cloudfunctions文件夾，點擊「新建node.js雲函數」，函數名爲 arthurSlog_methodAdd
  • 提示安裝本地依賴，肯定

Server
cloudfunctions/arthurSlog_methodAdd/index.js小程序

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

cloud.init()

// 雲函數入口函數
// event中包含了來自小程序端的「data對象」的數據
// data對象中有 a對象和 b對象，兩個對象的值都爲8
// 返回一個sum對象給小程序端，返回的對象就是來自小程序端的兩個對象a和b的和
// 返回的數據將會保存在小程序端的res.result對象內
exports.main = async(event, context) => {
  return {
    sum: event.a + event.b
  }
}
  • ok，如今，右鍵 arthurSlog_methodAdd 文件夾，點擊「上傳並部署「
  • 如今小程序端和雲端的對接準備已經作好了，咱們還須要一個交互頁面

Client
miniprogram/pages/index/index.wxmlsegmentfault

!--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>

  <!-- 獲取 openid -->
  <view class="uploader">
    <button class="userinfo-nickname" bindtap="arthurSlog_getInfo">點擊獲取 openid</button>
  </view>

  <!-- 返回兩個對象之和 -->
  <view class="uploader">
    <button class="userinfo-nickname" bindtap="arthurSlog_methodAdd">點擊返回兩個對象之和</button>
  </view>

</view>
  • ok，差很少要大功告成了
  • 在頁面上添加了「點擊返回兩個對象之和」按鈕，並綁定「arthurSlog_methodAdd」函數以後，保存好文件
  • 在模擬器中點擊「點擊返回兩個對象之和」的按鈕，觀察Console控制檯會打印以下內容：
{sum: 16}
  • ok，一個能攜帶數據給雲端（服務端），的小程序端的方法就完成並正常工做了
  • 至此，咱們實現了一個帶參數的小程序端方法，和一個能接受前端參數的雲端（服務端）的方法，讓他們成功實現了對接並正常工做。

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

關注微信公衆號「ArthurSlog」

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

謝謝

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程