• ArthurSlog

• SLog-71

• Year·1

• Guangzhou·China

• Sep 12th 2018

道常無為而無不為

開發環境MacOS(High Sierra 10.13.5)

需要的資訊和資訊源：

前言

• ”雲開發“ 封裝好了一些常用的業務邏輯，提供了以下方面的相關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

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

• 在使用“雲開發”的時候，需要先呼叫 初始化函式 init

• 小程式端的初始化函式是 wx.cloud.init()

• 雲端的初始化函式是 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 或以上的基礎庫以使用雲能力')
    } else {
      wx.cloud.init(
 
{
        env: 'arthurslog-test-d4537a',
        traceUser: true,
      })
    }

    this.globalData = {}
  }
})

Server:
cloudfunctions/arthurSlog_getInfo/index.js

// 雲函式入口檔案
const cloud = require('wx-server-sdk')

cloud.init()

// 雲函式入口函式
exports.main = async(event, context) => {
  return event.userInfo
}

• 上面的Server端程式碼中

Server:
cloudfunctions/arthurSlog_getInfo/index.js

// 雲函式入口檔案
//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這個資料夾的名字就是雲端向小程式端提供的方法

• 大部分函式都來源於 物件“wx”，這個 “wx”物件 就類似於服務端的 “wx-server-sdk”物件

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

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

• 現在，我們來接觸一下 “小程式·雲開發” 的 “儲存管理功能”

• 開啟小程式端的 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標籤的src屬性顯示圖片
        const tempFilePaths = res.tempFilePaths

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

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

• 在這裡，我們定義了一個方法arthurSlog_uploadImg，參考 小程式官方文件

• 首先將當前環境物件 對映 給物件 this_

Client
miniprogram/pages/index/index.js

const this_ = this

• 使用 wx.chooseImage 方法，開啟本地檔案，選擇要上傳的檔案

• 在success函式裡，使用setdata函式，更新 imagePath 物件的值，並使得頁面上對應的部分重新渲染

• 現在，我們來更新頁面檔案：

Client
miniprogram/pages/index/index.wxml

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

  <!-- ... -->

  <!-- 獲取 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 class="uploader">
    <button class="userinfo-nickname" bindtap="arthurSLog_uploadImg">上傳圖片</button>
  </view>
  <!-- 顯示圖片 -->
  <view>
    <image class="img" src="{{imagePath}}" mode="scaleToFill"></image>
  </view>

</view>

• 這次使用的方法，不需要自己編寫雲端服務程式碼，騰訊公司已經提供了

• 儲存檔案，在模擬器中點選上傳圖片（我放了一張演示圖片在此路徑下：miniprogram/images/ArthurSlog.png）

• 選中要上傳的檔案，點選“開啟”

• 正常執行之下，會顯示出我們剛剛上傳的圖片，到這裡暫停一下，現在圖片還沒傳送出去

• 在下一篇中，再繼續補充

• 至此，我們實現了一個選取本地檔案，並顯示選中的圖片檔案。

歡迎關注我的微信公眾號 ArthurSlog

如果你喜歡我的文章 歡迎點贊 留言

謝謝