微信小程序云開(kāi)發(fā)(二)

云函數(shù)

云函數(shù)即在云端(服務(wù)器端)運(yùn)行的函數(shù)。在物理設(shè)計(jì)上,一個(gè)云函數(shù)可由多個(gè)文件組成掷漱,占用一定量的 CPU 內(nèi)存等計(jì)算資源;各云函數(shù)完全獨(dú)立榄檬;可分別部署在不同的地區(qū)卜范。開(kāi)發(fā)者無(wú)需購(gòu)買、搭建服務(wù)器鹿榜,只需編寫函數(shù)代碼并部署到云端即可在小程序端調(diào)用海雪,同時(shí)云函數(shù)之間也可互相調(diào)用。
一個(gè)云函數(shù)的寫法與一個(gè)在本地定義的 JavaScript 方法無(wú)異舱殿,代碼運(yùn)行在云端 Node.js 中奥裸。當(dāng)云函數(shù)被小程序端調(diào)用時(shí),定義的代碼會(huì)被放在 Node.js 運(yùn)行環(huán)境中執(zhí)行沪袭。我們可以如在 Node.js 環(huán)境中使用 JavaScript 一樣在云函數(shù)中進(jìn)行網(wǎng)絡(luò)請(qǐng)求等操作湾宙,而且我們還可以通過(guò)云函數(shù)后端 SDK 搭配使用多種服務(wù),比如使用云函數(shù) SDK 中提供的數(shù)據(jù)庫(kù)和存儲(chǔ) API 進(jìn)行數(shù)據(jù)庫(kù)和存儲(chǔ)的操作冈绊,這部分可參考數(shù)據(jù)庫(kù)存儲(chǔ)后端 API 文檔侠鳄。

云開(kāi)發(fā)的云函數(shù)的獨(dú)特優(yōu)勢(shì)在于與微信登錄鑒權(quán)的無(wú)縫整合。當(dāng)小程序端調(diào)用云函數(shù)時(shí)死宣,云函數(shù)的傳入?yún)?shù)中會(huì)被注入小程序端用戶的 openid伟恶,開(kāi)發(fā)者無(wú)需校驗(yàn) openid 的正確性因?yàn)槲⑿乓呀?jīng)完成了這部分鑒權(quán),開(kāi)發(fā)者可以直接使用該 openid十电。

設(shè)置云函數(shù)根目錄

在項(xiàng)目根目錄找到 project.config.json 文件知押,新增 cloudfunctionRoot 字段,指定本地已存在的目錄作為云開(kāi)發(fā)的本地根目錄


image.png

由于我有兩套環(huán)境鹃骂,所有配置好之后沒(méi)有需要選擇環(huán)境, 在mycloud文件夾上右鍵選擇環(huán)境


image.png

然后右鍵新建node.js云函數(shù)testClound1
會(huì)自動(dòng)生成一個(gè)例子


image.png

我們?cè)賱?chuàng)建的云函數(shù)文件夾上右鍵可以看到三個(gè)選項(xiàng)


image.png

分別是本地調(diào)試台盯、創(chuàng)建并部署所有文件(包括node_modules),以及創(chuàng)建并部署文件(云端安裝依賴)畏线;

我們先本地調(diào)試好之后静盅,再部署。
先進(jìn)入testClound1文件夾安裝依賴


image.png
image.png

我們新建一個(gè)頁(yè)面,調(diào)用云函數(shù)

    wx.cloud.callFunction({
      // 云函數(shù)名稱
      name: 'testClound1',
      // 傳給云函數(shù)的參數(shù)
      data: {
      },
      success: function(res) {
        console.log('success-clound',res) // 3
      },
      fail: console.error
    })

控制臺(tái)打印


image.png

調(diào)用成功蒿叠,并且返回了調(diào)用者的openid.

現(xiàn)在來(lái)講解一些云函數(shù)

  1. 在云函數(shù)中使用 wx-server-sdk

云函數(shù)屬于管理端明垢,在云函數(shù)中運(yùn)行的代碼擁有不受限的數(shù)據(jù)庫(kù)讀寫權(quán)限和云文件讀寫權(quán)限

云函數(shù)中使用 wx-server-sdk 需在對(duì)應(yīng)云函數(shù)目錄下安裝 wx-server-sdk 依賴,在創(chuàng)建云函數(shù)時(shí)會(huì)在云函數(shù)目錄下默認(rèn)新建一個(gè) package.json 并提示用戶是否立即本地安裝依賴市咽。請(qǐng)注意云函數(shù)的運(yùn)行環(huán)境是 Node.js痊银,因此在本地安裝依賴時(shí)務(wù)必保證已安裝 Node.js,同時(shí) node 和 npm 都在環(huán)境變量中施绎。如不本地安裝依賴溯革,可以用命令行在該目錄下運(yùn)行:

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

在云函數(shù)中調(diào)用其他 API 前,同小程序端一樣谷醉,也需要執(zhí)行一次初始化方法:

const cloud = require('wx-server-sdk')
// 給定字符串環(huán)境 ID:接下來(lái)的 API 調(diào)用都將請(qǐng)求到環(huán)境 some-env-id
cloud.init({
  env: 'some-env-id'
})

或者

const cloud = require('wx-server-sdk')
// 給定 DYNAMIC_CURRENT_ENV 常量:接下來(lái)的 API 調(diào)用都將請(qǐng)求到與該云函數(shù)當(dāng)前所在環(huán)境相同的環(huán)境
// 請(qǐng)安裝 wx-server-sdk v1.1.0 或以上以使用該常量
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

現(xiàn)在云函數(shù)升級(jí)之后致稀,直接在云函數(shù)根目錄右鍵就可以選擇環(huán)境。 init也不用傳遞參數(shù)選擇環(huán)境俱尼。

然后是云函數(shù)的入口函數(shù)

// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

云函數(shù)的傳入?yún)?shù)有兩個(gè)抖单,一個(gè)是event 對(duì)象,一個(gè)是 context對(duì)象遇八。event 指的是觸發(fā)云函數(shù)的事件矛绘,當(dāng)小程序端調(diào)用云函數(shù)時(shí),event 就是小程序端調(diào)用云函數(shù)時(shí)傳入的參數(shù)押蚤,外加后端自動(dòng)注入的小程序用戶的 openid 和小程序的 appid蔑歌。context 對(duì)象包含了此處調(diào)用的調(diào)用信息和運(yùn)行狀態(tài),可以用它來(lái)了解服務(wù)運(yùn)行的情況揽碘。

比如我們?cè)谛〕绦蚨藗鬟f參數(shù)

    wx.cloud.callFunction({
      // 云函數(shù)名稱
      name: 'testClound1',
      // 傳給云函數(shù)的參數(shù)
      data: {
        num1: 2,
        num2: 3
      },
      success: function(res) {
        console.log('success-clound',res) // 3
      },
      fail: console.error
    })

云函數(shù)打印event對(duì)象

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

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  console.log('event', event)
  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

右鍵testCound1開(kāi)啟本地調(diào)試
打開(kāi)云函數(shù)本地調(diào)試控制臺(tái)


image.png

在云函數(shù)本地調(diào)試控制臺(tái)看到接受到了小程序端傳遞的參數(shù)

我們可以在云函數(shù)中返回給小程序端


// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  console.log('event', event)
  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
    num: event.num1+event.num2
  }
}

小程序端在調(diào)用云函數(shù)成功之后返回了結(jié)果


image.png

當(dāng)然我們也可以使用then的語(yǔ)法獲取云函數(shù)的結(jié)果

wx.cloud.callFunction({
      // 云函數(shù)名稱
      name: 'testClound1',
      // 傳給云函數(shù)的參數(shù)
      data: {
        num1: 2,
        num2: 3
      }
    }).then(res=>{
      console.log('云函數(shù)調(diào)用成功', res);
    }).catch(err =>{
      console.log('云函數(shù)調(diào)用失敗', err);
    })

獲取用戶信息

云開(kāi)發(fā)的云函數(shù)的獨(dú)特優(yōu)勢(shì)在于與微信登錄鑒權(quán)的無(wú)縫整合次屠。當(dāng)小程序端調(diào)用云函數(shù)時(shí),云函數(shù)的傳入?yún)?shù)中會(huì)被注入小程序端用戶的 openid雳刺,開(kāi)發(fā)者無(wú)需校驗(yàn) openid 的正確性劫灶,因?yàn)槲⑿乓呀?jīng)完成了這部分鑒權(quán),開(kāi)發(fā)者可以直接使用該 openid掖桦。與 openid 一起同時(shí)注入云函數(shù)的還有小程序的 appid本昏。

從小程序端調(diào)用云函數(shù)時(shí),開(kāi)發(fā)者可以在云函數(shù)內(nèi)使用 wx-server-sdk 提供的 getWXContext 方法獲取到每次調(diào)用的上下文(appid枪汪、openid 等)涌穆,無(wú)需維護(hù)復(fù)雜的鑒權(quán)機(jī)制,即可獲取天然可信任的用戶登錄態(tài)(openid

const cloud = require('wx-server-sdk')
exports.main = async (event, context) => {
  // 這里獲取到的 openId雀久、 appId 和 unionId 是可信的宿稀,
// 注意 unionId 僅在滿足 unionId 獲取條件時(shí)返回
  let { OPENID, APPID, UNIONID } = cloud.getWXContext()

  return {
    OPENID,
    APPID,
    UNIONID,
  }
}

異步返回結(jié)果

經(jīng)常,我們需要在云函數(shù)中處理一些異步操作赖捌,在異步操作完成后再返回結(jié)果給到調(diào)用方祝沸。此時(shí)我們可以通過(guò)在云函數(shù)中返回一個(gè) Promise 的方法來(lái)完成

// index.js
exports.main = async (event, context) => {
  return new Promise((resolve, reject) => {
    // 在 3 秒后返回結(jié)果給調(diào)用方(小程序 / 其他云函數(shù))
    setTimeout(() => {
      resolve(event.num1 + event.num2)
    }, 3000)
  })
}

這次我們上傳并部署云函數(shù) (node_modules不上傳) (注意,每次有修改都需要重新上傳和部署)


image.png

點(diǎn)擊左上角云開(kāi)發(fā) 去云函數(shù)控制臺(tái)


image.png

每次上傳后要看函數(shù)狀態(tài)變?yōu)橐巡渴?才能測(cè)試(所有更多推薦本地云開(kāi)發(fā)測(cè)試)

刷新小程序


image.png

云函數(shù)中調(diào)用其他云函數(shù)

假設(shè)我們要在云函數(shù)中調(diào)用另一個(gè)云函數(shù) sum 并返回 sum 所返回的結(jié)果:

const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

exports.main = async (event, context) => {
  return await cloud.callFunction({
    name: 'sum',
    data: {
      x: 1,
      y: 2,
    }
  })
}

灰度和版本

云開(kāi)發(fā)提供發(fā)布版本(快照)和多版本間調(diào)整流量比例的能力。借此能力用戶可以完成灰度罩锐,同時(shí)可以灰度函數(shù)配置


image.png
image.png

云函數(shù)版本

一個(gè)云函數(shù)可以發(fā)布多個(gè)版本奉狈,一個(gè)版本就是一個(gè)函數(shù)在當(dāng)前時(shí)刻的快照,包含其代碼和配置(超時(shí)時(shí)間涩惑、環(huán)境變量等)仁期。

云函數(shù)始終存在一個(gè) LATEST 版,即最新版竭恬。編輯器中上傳云函數(shù)和在控制臺(tái)更改配置始終更改 LATEST 版本蟀拷。

在發(fā)布版本時(shí),總是從 LATEST 當(dāng)前的狀態(tài)發(fā)布一個(gè)版本(快照)萍聊。

要進(jìn)行灰度,只需更改版本之前的流量配比悦析,即可實(shí)現(xiàn)灰度寿桨。

流量比例

在沒(méi)有設(shè)置流量比例前,默認(rèn)情況下都是 100% 流量導(dǎo)向 LATEST 版本强戴,在發(fā)布一個(gè)或多個(gè)版本后亭螟,即可調(diào)整各個(gè)版本之間的流量比例。

比如現(xiàn)在要進(jìn)行灰度骑歹,首先我們發(fā)布版本 1预烙,然后設(shè)置 100% 流量到版本 1,接著更改 LATEST 代碼道媚,此時(shí)希望 10% 的線上流量給到需要灰度觀察的最新代碼扁掸,則設(shè)置 10% 流量給到 LATEST,90% 流量給到 1最域。

日志服務(wù)

開(kāi)發(fā)者可通過(guò)微信云開(kāi)發(fā)提供的日志服務(wù)實(shí)現(xiàn)日志采集和檢索分析等功能谴分,方便開(kāi)發(fā)者通過(guò)日志快速的發(fā)現(xiàn)和定位問(wèn)題。每條日志可最長(zhǎng)存儲(chǔ)30天镀脂,超過(guò) 30 天的日志將被自動(dòng)清理牺蹄。

開(kāi)發(fā)者可前往微信開(kāi)發(fā)者工具云控制臺(tái)的云函數(shù)高級(jí)日志界面開(kāi)啟高級(jí)日志服務(wù)

image.png

日志采集

可使用 wx-server-sdk 提供的 logger 方法打日志:

  1. 通過(guò) logger() 方法取得 log 對(duì)象
  2. 調(diào)用 log 對(duì)象上的 log / info / warn / error (對(duì)應(yīng)不同 level 的日志等級(jí))方法,傳入一個(gè)對(duì)象作為參數(shù)薄翅,每調(diào)用一次會(huì)產(chǎn)生一條日志記錄
  3. 對(duì)象的每一個(gè) <key, value> 對(duì)都會(huì)成為日志一條記錄中的一個(gè)可檢索的鍵值對(duì)沙兰,其中 value 不論值是什么都會(huì)被轉(zhuǎn)成字符串
// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  const log = cloud.logger()
  log.info({
    name: 'xx',
    cost: 10,
    attributes: {
      width: 100,
      height: 200,
    },
    colors: ['red', 'blue'],
  })

  // 輸出到日志記錄中會(huì)有這么一條記錄:
  // {
  //   "level": "info",
  //   "name": "xx",
  //   "cost": "10",
  //   "attributes": "{ width: 100, height: 200 }",
  //   "colors": "[ "red", "blue" ]"
  //   ..., // 其他系統(tǒng)字段
  // }

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

定時(shí)觸發(fā)器

如果云函數(shù)需要定時(shí) / 定期執(zhí)行,也就是定時(shí)觸發(fā)翘魄,我們可以使用云函數(shù)定時(shí)觸發(fā)器鼎天。配置了定時(shí)觸發(fā)器的云函數(shù),會(huì)在相應(yīng)時(shí)間點(diǎn)被自動(dòng)觸發(fā)熟丸,函數(shù)的返回結(jié)果不會(huì)返回給調(diào)用方训措。

在需要添加觸發(fā)器的云函數(shù)目錄下新建文件 config.json,格式如下:

{
  // triggers 字段是觸發(fā)器數(shù)組,目前僅支持一個(gè)觸發(fā)器绩鸣,即數(shù)組只能填寫一個(gè)怀大,不可添加多個(gè)
  "triggers": [
    {
      // name: 觸發(fā)器的名字,規(guī)則見(jiàn)下方說(shuō)明
      "name": "myTrigger",
      // type: 觸發(fā)器類型呀闻,目前僅支持 timer (即 定時(shí)觸發(fā)器)
      "type": "timer",
      // config: 觸發(fā)器配置化借,在定時(shí)觸發(fā)器下,config 格式為 cron 表達(dá)式捡多,規(guī)則見(jiàn)下方說(shuō)明
      "config": "0 0 2 1 * * *"
    }
  ]
}
  • 定時(shí)觸發(fā)器名稱 (name):最大支持 60 個(gè)字符蓖康,支持 a-z, A-Z, 0-9, -_。必須以字母開(kāi)頭垒手,且一個(gè)函數(shù)下不支持同名的多個(gè)定時(shí)觸發(fā)器蒜焊。
  • 定時(shí)觸發(fā)器觸發(fā)周期 (config):指定的函數(shù)觸發(fā)時(shí)間。填寫自定義標(biāo)準(zhǔn)的 cron 表達(dá)式來(lái)決定何時(shí)觸發(fā)函數(shù)科贬。有關(guān) cron 表達(dá)式的更多信息泳梆,請(qǐng)參考下面的內(nèi)容。

Cron 表達(dá)式
Cron 表達(dá)式有七個(gè)必需字段榜掌,按空格分隔

image.png

image.png

image.png

實(shí)現(xiàn)增刪改查

把微信小程序云開(kāi)發(fā)(一)中的例子拿過(guò)來(lái)优妙,用云函數(shù)實(shí)現(xiàn)
創(chuàng)建云函數(shù) list 實(shí)現(xiàn)查詢

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

cloud.init()
const db = cloud.database() //獲取數(shù)據(jù)庫(kù)的引用
const userCollection = db.collection('user')

// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
 return userCollection
    .get() // 查詢
    .then(res => {
      console.log('獲取user成功', res);
      return {
        code: 0,
        list: res.data
      }
    }).catch(err => {
      console.log('獲取user失敗', err);
      return {
        code: -1,
        msg: err
      }
    })
}

小程序端int方法調(diào)用list函數(shù)

    wx.cloud.callFunction({
      name: 'list',
      data:{},
    }).then(res=>{
      console.log('獲取列表', res);
      if(res.result.code === 0){
        this.setData({
          list: res.result.list
        })
      }
    }).catch(err=>{
      console.log('err', err);
    })
    return false;   
image.png

接下來(lái)分別創(chuàng)建add ,delete,update云函數(shù)實(shí)現(xiàn)剩下功能

add

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

cloud.init()
const db = cloud.database() //獲取數(shù)據(jù)庫(kù)的引用
const userCollection = db.collection('user')

// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  const {name, age, sex} = event
  return  userCollection
  .add({        // 新增
    data: {
      name,
      age: +age,
      sex: +sex
    }
  }).then(res => {
    return {
      code: 0
    }
  }).catch(err => {
    return {
      code: -1,
      msg: err
    }
  })
}

udpate

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

cloud.init()
const db = cloud.database() //獲取數(shù)據(jù)庫(kù)的引用
const userCollection = db.collection('user')

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

  return userCollection
    .doc(id) // 找到需要修改的數(shù)據(jù)索引
    .update({ // 修改數(shù)據(jù)
      data
    }).then(res => {
      return {
        code: 0
      }
    }).catch(err => {
      return {
        code: -1,
        msg: err
      }
    })
}

delete

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

cloud.init()
const db = cloud.database() //獲取數(shù)據(jù)庫(kù)的引用
const userCollection = db.collection('user')

// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  const {
    id
  } = event
  return userCollection
    .doc(id)
    .remove()
    .then(res => {
      return {
        code: 0
      }
    }).catch(err => {
      return {
        code: -1,
        msg: err
      }
    })
}

小程序端代碼
cloud.js

const db = wx.cloud.database() //獲取數(shù)據(jù)庫(kù)的引用
const userCollection = db.collection('user') // 獲取集合的引用
Page({
  data: {   
    sex: 1,
    name: '',
    age: 0,
    list: []
  },  
  onLoad() {
   this.init()
  },
  init(){
    wx.cloud.callFunction({
      name: 'list',
      data:{},
    }).then(res=>{
      console.log('獲取列表', res);
      if(res.result.code === 0){
        this.setData({
          list: res.result.list
        })
      }
    }).catch(err=>{
      console.log('獲取列表失敗-err', err);
    })  
  },
  // 獲取輸入框 的姓名和年齡
  bindinput(e) {
    const type = e.currentTarget.dataset.type
    this.setData({
      [type]: e.detail.value
    })
    console.log(e.detail.value);
  },
  // 獲取性別
  radioChange(e) {
    this.setData({
      sex: e.detail.value
    })
    console.log('radio', e.detail.value);
  },
  //  新增方法的實(shí)現(xiàn)
  addFn() {
    const {
      name,
      age,
      sex
    } = this.data;
    if (!name || !age) {
      return wx.showToast({
        title: '需要輸入姓名或年齡',
      })
    }
    wx.cloud.callFunction({
      name: 'add',
      data:{
        name,
        age: +age,
        sex: +sex
      },
    }).then(res=>{
      console.log('新增成功', res);
      if(res.result.code === 0){
        this.init()
      }
    }).catch(err=>{
      console.log('新增失敗-err', err);
    })  
  },
  updateFn(e) {
    const id = e.currentTarget.dataset.id
    const {name, age, sex} = this.data;
    const data = {sex}
    if (name) {
      data.name = name
    }
    if (age) {
      data.age = age
    }

    wx.cloud.callFunction({
      name: 'update',
      data:{
        id,
        data
      },
    }).then(res=>{
      console.log('更新成功', res);
      if(res.result.code === 0){
        this.init()
      }
    }).catch(err=>{
      console.log('更新失敗-err', err);
    })
  },
  deleteFn(e) {
    const id = e.currentTarget.dataset.id
    wx.cloud.callFunction({
      name: 'delete',
      data:{
        id
      },
    }).then(res=>{
      console.log('刪除成功', res);
      if(res.result.code === 0){
        this.init()
      }
    }).catch(err=>{
      console.log('刪除失敗-err', err);
    })
  },
})

增刪改查也實(shí)現(xiàn)了憎账。

上傳文件 (可以是圖片套硼、音頻、視頻胞皱、文件等)

wx.cloud.uploadFile
將本地資源上傳至云存儲(chǔ)空間邪意,如果上傳至同一路徑則是覆蓋寫

image.png

新建一個(gè)頁(yè)面 ,創(chuàng)建button按鈕 點(diǎn)擊 上傳本地的圖片

upload(){
    console.log('點(diǎn)擊上傳');
    wx.cloud.uploadFile({
      cloudPath: 'imgs/葫蘆娃.jpg',
      filePath: '/static/image/葫蘆娃.jpg', // 文件路徑
      success: res => {
        // get resource ID
        console.log('上傳成功',res);
        console.log(res.fileID)
      },
      fail: err => {
        console.log('err', err);
        // handle error
      }
    })
  },
image.png

然后我們?nèi)ピ崎_(kāi)發(fā)控制臺(tái)
點(diǎn)擊儲(chǔ)存


image.png
image.png

點(diǎn)擊圖片朴恳,右側(cè)查看詳情信息


image.png

我們可以看到圖片的fileId(小程序使用)抄罕,以及下載地址(鏈接可以直接瀏覽器打開(kāi))

本地選擇圖片上傳本展示

由于wx.chooseImage無(wú)法獲取圖片名,只能獲取圖片的本地臨時(shí)文件路徑列表 (本地路徑) 于颖,所有上傳數(shù)據(jù)庫(kù)的圖片需要自己命名
pic.wxml

<button bindtap="upload">上傳文件</button>
<image src="{{imgSrc}}"></image>

pic.js

Page({
  data: {
    imgSrc: ''
  },
  upload() {
    const that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        console.log('res', res);
        // tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
        const tempFilePaths = res.tempFilePaths
        that.cloundUpdate(tempFilePaths[0], '測(cè)試圖片.jpg')
      }
    })
  },
  cloundUpdate(filePath, nameStr) {
    wx.cloud.uploadFile({
      cloudPath: 'imgs/' + nameStr,
      filePath: filePath,
      success: res => {
        // get resource ID
        console.log('上傳成功', res);
        console.log(res.fileID)
        this.setData({
          imgSrc: res.fileID
        })
      },
      fail: err => {
        console.log('err', err);
        // handle error
      }
    })
  }  
})

image.png

視頻呆贿、音頻,文件道理一樣森渐,無(wú)非就是 api不同而已做入。

wx.chooseMedia: 拍攝或從手機(jī)相冊(cè)中選擇圖片或視頻
wx.chooseVideo: 拍攝視頻或從手機(jī)相冊(cè)中選視頻
wx.chooseImage: 從本地相冊(cè)選擇圖片或使用相機(jī)拍照
wx.chooseMessageFile: 從客戶端會(huì)話選擇文件 (通過(guò)type可以上傳視頻、圖片和其他)

文件下載

wx.cloud.downloadFile

image.png

download(){
    wx.cloud.downloadFile({
      fileID: 'cloud://test-0ge6yywxbfeb7294.7465-test-0ge6yywxbfeb7294-1306429729/imgs/葫蘆娃.jpg'
    }).then(res => {
      // get temp file path
      console.log('下載文件成功', res);
      console.log(res.tempFilePath)
      this.setData({
        imgSrc: res.tempFilePath
      })
    }).catch(error => {
      // handle error
      console.log('下載文件失敗', err);
    })
  },

fileID 就是我們上次的fileID. 也可以到云開(kāi)發(fā)控制臺(tái)點(diǎn)擊圖片右側(cè)獲取


image.png

從云存儲(chǔ)空間刪除文件同衣,一次最多 50 個(gè)

我們?nèi)ピ崎_(kāi)發(fā)控制臺(tái)獲取測(cè)試普通的file ID

delete(){
    wx.cloud.deleteFile({
      fileList: ['cloud://test-0ge6yywxbfeb7294.7465-test-0ge6yywxbfeb7294-1306429729/imgs/測(cè)試圖片.jpg']
    }).then(res => {
      // handle success
      console.log(res.fileList)
      console.log('刪除測(cè)試圖片成功', res);
    }).catch(error => {
      // handle error
      console.log('刪除測(cè)試圖片失敗', err);
    })
  },
image.png
image.png

云文件 ID 換取真實(shí)鏈接

用云文件 ID 換取真實(shí)鏈接竟块,公有讀的文件獲取的鏈接不會(huì)過(guò)期,私有的文件獲取的鏈接十分鐘有效期耐齐。一次最多取 50 個(gè)

getUrl(){
    wx.cloud.getTempFileURL({
      fileList: ['cloud://test-0ge6yywxbfeb7294.7465-test-0ge6yywxbfeb7294-1306429729/imgs/葫蘆娃.jpg']
    }).then(res => {
      // get temp file URL
      console.log(res.fileList)
      this.setData({
        imgSrc: res.fileList[0].tempFileURL
      })
    }).catch(error => {
      // handle error
    })
  },
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末浪秘,一起剝皮案震驚了整個(gè)濱河市蒋情,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌耸携,老刑警劉巖棵癣,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異夺衍,居然都是意外死亡狈谊,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門沟沙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)河劝,“玉大人,你說(shuō)我怎么就攤上這事矛紫∈晗梗” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵颊咬,是天一觀的道長(zhǎng)煎娇。 經(jīng)常有香客問(wèn)我,道長(zhǎng)贪染,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任催享,我火速辦了婚禮杭隙,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘因妙。我一直安慰自己痰憎,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布攀涵。 她就那樣靜靜地躺著铣耘,像睡著了一般。 火紅的嫁衣襯著肌膚如雪以故。 梳的紋絲不亂的頭發(fā)上蜗细,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音怒详,去河邊找鬼炉媒。 笑死,一個(gè)胖子當(dāng)著我的面吹牛昆烁,可吹牛的內(nèi)容都是我干的吊骤。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼静尼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼白粉!你這毒婦竟也來(lái)了传泊?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤鸭巴,失蹤者是張志新(化名)和其女友劉穎眷细,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體奕扣,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡薪鹦,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了惯豆。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片池磁。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖楷兽,靈堂內(nèi)的尸體忽然破棺而出地熄,到底是詐尸還是另有隱情,我是刑警寧澤芯杀,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布端考,位于F島的核電站,受9級(jí)特大地震影響揭厚,放射性物質(zhì)發(fā)生泄漏却特。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一筛圆、第九天 我趴在偏房一處隱蔽的房頂上張望裂明。 院中可真熱鬧,春花似錦太援、人聲如沸闽晦。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)仙蛉。三九已至,卻和暖如春碱蒙,著一層夾襖步出監(jiān)牢的瞬間荠瘪,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工赛惩, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留巧还,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓坊秸,卻偏偏與公主長(zhǎng)得像麸祷,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子褒搔,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容