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

ArthurSlog

SLog-71

Year·1

Guangzhou·China

Sep 12th 2018

ArthurSlog Page

GitHub

NPM Package Page

掘金主頁

簡書主頁

segmentfault

道常無為而無不為

小程序官方文檔

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

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

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

云函數(shù)

數(shù)據(jù)庫

存儲管理

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

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

重點：云開發(fā)方式需要appid，請準(zhǔn)備好

當(dāng)前云開發(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

在使用“云開發(fā)”的時候，需要先調(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("請使用 2.2.3 或以上的基礎(chǔ)庫以使用云能力")
    } 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
}

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

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

舉個栗子：對于cloudfunctions/arthurSlog_getInfo來說，arthurSlog_getInfo這個文件夾的名字就是云端向小程序端提供的方法

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

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

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

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

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

打開小程序端的 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])
      }
    })
  },
})

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

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

Client
miniprogram/pages/index/index.js

const this_ = this

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

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

現(xiàn)在，我們來更新頁面文件：

Client
miniprogram/pages/index/index.wxml

  

  
  
    點擊獲取 openid
  

  
  
    點擊返回兩個對象之和
  

  
  
    上傳圖片
  
  
  
    
  

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

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

選中要上傳的文件，點擊“打開”

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

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

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