摘要：掘金主頁(yè)簡(jiǎn)書(shū)主頁(yè)道常無(wú)為而無(wú)不為開(kāi)發(fā)環(huán)境需要的信息和信息源小程序官方文檔小程序端文檔客戶端云端文檔服務(wù)端前言云開(kāi)發(fā)封裝好了一些常用的業(yè)務(wù)邏輯，提供了以下方面的相關(guān)供開(kāi)發(fā)者使用云函數(shù)數(shù)據(jù)庫(kù)存儲(chǔ)管理開(kāi)始編碼現(xiàn)在先把微信開(kāi)發(fā)工具更新至最新，有部

ArthurSlog

SLog-71

Year·1

Guangzhou·China

Sep 12th 2018

ArthurSlog Page

GitHub

NPM Package Page

掘金主頁(yè)

簡(jiǎn)書(shū)主頁(yè)

segmentfault

道常無(wú)為而無(wú)不為

小程序官方文檔

小程序端API文檔（客戶端）

云端API文檔（服務(wù)端）

”云開(kāi)發(fā)“ 封裝好了一些常用的業(yè)務(wù)邏輯，提供了以下方面的相關(guān)API供開(kāi)發(fā)者使用：

云函數(shù)

數(shù)據(jù)庫(kù)

存儲(chǔ)管理

現(xiàn)在先把微信開(kāi)發(fā)工具更新至最新（1.02.1809101），有部分開(kāi)發(fā)人員在微信社區(qū)反饋更新之后沒(méi)有看到“云開(kāi)發(fā)”的按鈕

解決辦法：點(diǎn)擊檢查更新，等待更新完全完成之后重啟開(kāi)發(fā)工具

重點(diǎn)：云開(kāi)發(fā)方式需要appid，請(qǐng)準(zhǔn)備好

當(dāng)前云開(kāi)發(fā)模版的微信小程序文件結(jié)構(gòu)如下：

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

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

在使用“云開(kāi)發(fā)”的時(shí)候，需要先調(diào)用 初始化函數(shù) init

小程序端的初始化函數(shù)是 wx.cloud.init()

云端的初始化函數(shù)是 const cloud = require("wx-server-sdk") cloud.init())

Client：
miniprogram/app.js

//app.js
App({
  onLaunch: function () {
    
    if (!wx.cloud) {
      console.error("請(qǐng)使用 2.2.3 或以上的基礎(chǔ)庫(kù)以使用云能力")
    } else {
      wx.cloud.init({
        env: "arthurslog-test-d4537a",
        traceUser: true,
      })
    }

    this.globalData = {}
  }
})

Server:
cloudfunctions/arthurSlog_getInfo/index.js

// 云函數(shù)入口文件
const cloud = require("wx-server-sdk")

cloud.init()

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

上面的Server端代碼中

Server:
cloudfunctions/arthurSlog_getInfo/index.js

// 云函數(shù)入口文件
//const cloud = require("wx-server-sdk")

//cloud.init()

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

沒(méi)有調(diào)用到 “wx-server-sdk” 的方法，所以可以注釋掉，不影響結(jié)果

這里提醒一下，就是 cloudfunctions 路徑下的文件的名稱，就是云端向小程序端提供的方法

舉個(gè)栗子：對(duì)于cloudfunctions/arthurSlog_getInfo來(lái)說(shuō)，arthurSlog_getInfo這個(gè)文件夾的名字就是云端向小程序端提供的方法

現(xiàn)在在小程序端就可以參考小程序端API文檔（客戶端）

大部分函數(shù)都來(lái)源于 對(duì)象“wx”，這個(gè) “wx”對(duì)象 就類似于服務(wù)端的 “wx-server-sdk”對(duì)象

比如，在小程序端（客戶端）有 wx.cloud.callFunction（）、wx.cloud.uploadFile（）等方法

再比如，在云端（服務(wù)端）有 cloud.init()、cloud.database()、cloud.collection（）等方法

現(xiàn)在，我們來(lái)接觸一下 “小程序·云開(kāi)發(fā)” 的 “存儲(chǔ)管理功能”

打開(kāi)小程序端的 miniprogram/pages/index/index.js

Client
miniprogram/pages/index/index.js

Page({
  data: {
    avatarUrl: "./user-unlogin.png",
    userInfo: {},
    logged: false,
    takeSession: false,
    requestResult: "",
    fileID: "",
    cloudPath: "",
    imagePath: "./user-unlogin.png",
  },

  // ...
  // ...
  // ...

  // 添加前端代碼,向云端上傳圖片
  arthurSlog_uploadImg: function() {
    // 選擇圖片
    const this_ = this
    wx.chooseImage({
      count: 1,
      sizeType: ["original", "compressed"],
      sourceType: ["album", "camera"],
      success(res) {
        // tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
        const tempFilePaths = res.tempFilePaths

        this_.setData({
          imagePath: tempFilePaths[0],
        })

        console.log(tempFilePaths[0])
      }
    })
  },
})

在這里，我們定義了一個(gè)方法arthurSlog_uploadImg，參考 小程序官方文檔

首先將當(dāng)前環(huán)境對(duì)象 映射 給對(duì)象 this_

Client
miniprogram/pages/index/index.js

const this_ = this

使用 wx.chooseImage 方法，打開(kāi)本地文件，選擇要上傳的文件

在success函數(shù)里，使用setdata函數(shù)，更新 imagePath 對(duì)象的值，并使得頁(yè)面上對(duì)應(yīng)的部分重新渲染

現(xiàn)在，我們來(lái)更新頁(yè)面文件：

Client
miniprogram/pages/index/index.wxml

  

  
  
    點(diǎn)擊獲取 openid
  

  
  
    點(diǎn)擊返回兩個(gè)對(duì)象之和
  

  
  
    上傳圖片
  
  
  
    
  

這次使用的方法，不需要自己編寫(xiě)云端服務(wù)代碼，騰訊公司已經(jīng)提供了

保存文件，在模擬器中點(diǎn)擊上傳圖片（我放了一張演示圖片在此路徑下：miniprogram/images/ArthurSlog.png）

選中要上傳的文件，點(diǎn)擊“打開(kāi)”

正常執(zhí)行之下，會(huì)顯示出我們剛剛上傳的圖片，到這里暫停一下，現(xiàn)在圖片還沒(méi)發(fā)送出去

在下一篇中，再繼續(xù)補(bǔ)充

至此，我們實(shí)現(xiàn)了一個(gè)選取本地文件，并顯示選中的圖片文件。