97亚洲综合视频网站,亚洲激情一区二区在线

本篇主要介紹serverless在小程序云開發(fā)的實踐

小程序傳統(tǒng)開發(fā)模式

前后臺聯(lián)調(diào)時間有時候更多，等項目上線需要考慮更多運維的問題，買域名買服務(wù)器等

image

云開發(fā)正在改變小程序的開發(fā)模式

云開發(fā)是什么

讓開發(fā)者更專注于業(yè)務(wù)的開發(fā)，在云開發(fā)云函數(shù)中，我們可以很方便獲取小程序用戶openId、unionId一些鑒權(quán)信息，減輕后臺開發(fā)量
云開發(fā)是一套綜合類服務(wù)的技術(shù)產(chǎn)品，通常開發(fā)一個完整的應(yīng)用（小程序也好，Web、移動應(yīng)用也好）都需要數(shù)據(jù)庫、存儲、CDN、后端函數(shù)、靜態(tài)托管、用戶登錄等等，但是云開發(fā)將這些服務(wù)都集成到了一起，而且以一種全新的開發(fā)方式，讓開發(fā)一個應(yīng)用更加快速、方便、便宜且強大，引領(lǐng)未來技術(shù)開發(fā)的新趨勢。

簡單的說，就是云開發(fā)是一套綜合類服務(wù)的技術(shù)產(chǎn)品，通常開發(fā)一個完整的應(yīng)用（小程序也好，Web、移動應(yīng)用也好）都需要數(shù)據(jù)庫、存儲、CDN、后端函數(shù)、靜態(tài)托管、用戶登錄等等，但是云開發(fā)將這些服務(wù)都集成到了一起，而且以一種全新的開發(fā)方式，讓開發(fā)一個應(yīng)用更加快速、方便、便宜且強大，引領(lǐng)未來技術(shù)開發(fā)的新趨勢。

image

我們不需要區(qū)分那部分是前端那部分是后端，我們只需要調(diào)用函數(shù)一樣去哪里這個流程就可以，云函數(shù)也可以在本地調(diào)式，調(diào)式云函數(shù)就像調(diào)式我們的代碼一樣的

云開發(fā)優(yōu)勢

快速上線
更加專注我們的業(yè)務(wù)
獨立開發(fā)一個完整的小程序，云開發(fā)提供非常豐富的接口，我們通過這些接口很方便文件上傳等操作
不需要考慮運維等問題，云開發(fā)是彈性擴(kuò)容的
數(shù)據(jù)更安全

小程序云開發(fā)提供哪些基礎(chǔ)能力

image

小程序云函數(shù)計費

產(chǎn)品定價

img

支持地域

img

免費額度

每個月的免費額度，會在每月開始時刻重置，不會進(jìn)行累積

img

配額限制說明

img

小程序云開發(fā)項目的創(chuàng)建與配置

img

云開發(fā)項目初始化

找到云開發(fā)的環(huán)境ID，點擊云開發(fā)控制臺窗口里的設(shè)置圖標(biāo)，在環(huán)境變量的標(biāo)簽頁找到環(huán)境名稱和環(huán)境ID。

用戶在開通云開發(fā)之后就創(chuàng)建了一個云開發(fā)環(huán)境，微信小程序可擁有最多兩個環(huán)境，每個環(huán)境都對應(yīng)一整套獨立的云開發(fā)資源，包括數(shù)據(jù)庫、云存儲、云函數(shù)、靜態(tài)托管等，各個環(huán)境是相互獨立的。每個環(huán)境都有一個唯一的環(huán)境ID（環(huán)境名稱不唯一）。

img

指定開發(fā)者工具的云開發(fā)環(huán)境

當(dāng)云開發(fā)服務(wù)開通后，我們可以在小程序源代碼cloudfunctions文件夾名看到你的環(huán)境名稱。如果在cloudfunctions文件夾名顯示的不是環(huán)境名稱，而是“未指定環(huán)境”，可以鼠標(biāo)右鍵該文件夾，可以看到彈窗的第一項為“當(dāng)前環(huán)境”，有個小三角，在這里可以選擇或切換已經(jīng)建好的云開發(fā)環(huán)境。如果環(huán)境為空白，重啟開發(fā)者工具，再來選擇。

img

指定小程序的云開發(fā)環(huán)境

在開發(fā)者工具中打開源代碼文件夾miniprogram里的app.js文件，找到如下代碼：

wx.cloud.init({
  // env 參數(shù)說明：
  //   env 參數(shù)決定接下來小程序發(fā)起的云開發(fā)調(diào)用（wx.cloud.xxx）會默認(rèn)請求到哪個云環(huán)境的資源
  //   此處請?zhí)钊氕h(huán)境 ID, 環(huán)境 ID 可打開云控制臺查看
  //   如不填則使用默認(rèn)環(huán)境（第一個創(chuàng)建的環(huán)境）
  // env: 'my-env-id',
  traceUser: true,
})

img

在 env: ‘my-env-id’處改成你的環(huán)境ID，注意需要填入的是你的環(huán)境ID而不是環(huán)境名稱哦，結(jié)果如下：

// 因為云開發(fā)可以創(chuàng)建多個環(huán)境，比如微信小程序就可以創(chuàng)建兩個免費的云開發(fā)環(huán)境，一個用于測試，一個用于正式發(fā)布。如果你沒有在小程序端指定環(huán)境，會默認(rèn)選擇為你創(chuàng)建的第一個云開發(fā)環(huán)境。我們可以通過修改env的參數(shù)來切換小程序端用來調(diào)用的云開發(fā)環(huán)境。
wx.cloud.init({
  env: 'cloud1-2g12nyjfdh7f4caed9',

  // 云開發(fā)能力全局只需要初始化一次即可，這里的traceUser屬性設(shè)置為true，會將用戶訪問記錄到用戶管理中，在云開發(fā)控制臺的運營分析—用戶訪問里可以看到訪問記錄。
  traceUser: true,
})

小程序云開發(fā)資源的管理

小程序云開發(fā)控制臺

img

騰訊云云開發(fā)網(wǎng)頁控制臺

我們還可以使用騰訊云云開發(fā)網(wǎng)頁控制臺來管理云開發(fā)資源，需要注意兩點，一個是登錄方式需要選擇其他登錄方式里的微信公眾號，點擊然后使用手機微信掃碼，在微信上選擇你要登錄的小程序；二是要進(jìn)入騰訊云后臺之后切換選擇云開發(fā)Cloudbase。

image

img

其他工具與方式

云開發(fā)資源還支持其他方式來調(diào)用

CloudBase CLI：我們可以使用云開發(fā)提供的命令行工具 CloudBase CLI 對云開發(fā)環(huán)境里面的資源進(jìn)行批量管理，比如云函數(shù)批量下載更新；云存儲里面的文件夾批量下載和上傳等等；
Tencent CloudBase Toolkit：Tencent CloudBase Toolkit是一款Visual Studio Code的云開發(fā)插件，使用這個插件可以更好地在本地進(jìn)行云開發(fā)項目開發(fā)和代碼調(diào)試，并且輕松將項目部署到云端；

img

部署并上傳云函數(shù)

云函數(shù)的根目錄與云函數(shù)目錄

cloudfuntions文件夾圖標(biāo)里有朵小云，表示這就是云函數(shù)根目錄。展開cloudfunctions，我們可以看到里面有l(wèi)ogin、openapi、callback、echo等文件夾，這些就是云函數(shù)目錄。而miniprogram文件夾則放置的是小程序的頁面文件

cloudfunctions里放的是云函數(shù)，miniprogram放的是小程序的頁面，這并不是一成不變的，也就是說你也可以修改這些文件夾的名稱，這取決于項目配置文件project.config.json里的如下配置項：

"miniprogramRoot":  "miniprogram/",
"cloudfunctionRoot":  "cloudfunctions/",

但是你最好是讓放小程序頁面的文件夾以及放云函數(shù)的文件夾處于平級關(guān)系且都在項目的根目錄下，便于管理。

云函數(shù)部署與上傳

右鍵云函數(shù)目錄，選擇在終端中打開，輸入npm install命令下載依賴文件；
然后再右鍵云函數(shù)目錄，點擊“創(chuàng)建并部署：所有文件”
在云開發(fā)控制臺–云函數(shù)–云函數(shù)列表查看云函數(shù)是否部署成功。

小程序云函數(shù)場景

小程序云開發(fā)對比不同方式獲取用戶信息的應(yīng)用場景

img

小程序碼

img

圖片上傳

img

云函數(shù)路由優(yōu)化tcb-router

npm i tcb-router

img

云函數(shù)超時時間

img

訂閱消息

消息推送位置：服務(wù)通知
消息下發(fā)條件：用戶自主訂閱
消息卡片：查看詳情可以跳轉(zhuǎn)到小程序頁面

使用步驟

1、在微信公眾平臺上獲取消息模板的ID
2、獲取下發(fā)的權(quán)限：

wx.requestSubscribeMessage({
    tmplIds: ['模板ID'],
    success(res) { 
      console.log(res)
    }
  })

subscribeNew: 獲取下發(fā)消息的權(quán)限，由用戶自主選擇訂閱

subscribeNew:function(){
   wx.requestSubscribeMessage({
     tmplIds: ['模板ID'],
     success(res) { 
       console.log(res)
     }
   })
}

img

3、調(diào)用接口下發(fā)訂閱消息：subscribeMessage.send

這里是云調(diào)用訂閱消息，首先要創(chuàng)建一個云函數(shù)

需要在config.json中配置subscribeMessage.send權(quán)限

config.json:

"permissions": {
  "openapi": [
    "openapi.subscribeMessage.send"
  ]
}

云函數(shù)編寫

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

cloud.init()

// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  console.log(event,'sendMessage')
  // 訂閱消息推送
  const res = await cloud.openapi.subscribeMessage.send({
    touser: wxContext.OPENID,
    page: `/pages/index/index`,
    lang: 'zh_CN',
    data: {
      name1: {
        value: event.user_name
      },
      thing7: {
        value: event.name
      },
      phone_number5: {
        value: event.phone
      },
      thing6: {
        value: event.xueli
      }
    },
    templateId: 'yXgBDeiRvjIZ98zOA1212CJeCXw8fj09Ir0sNT3ZXI7H0sw', // 模板id
  })
  return res
}

img

當(dāng)用戶訂閱消息之后，就可以給用戶下發(fā)消息了。

<view bindtap="sendNew">發(fā)送消息</view>
sendNew:function(){
    wx.cloud.callFunction({
      // 要調(diào)用的云函數(shù)名稱
      name: 'sendNew',
      // 傳遞給云函數(shù)的參數(shù)
      data: {
        openid: '',
        theme:"團(tuán)建",
        address:"xx"
      },
      success: res => {
        console.log(res)
        // output: res.result === 3
      },
      fail: err => {
        console.log(err)
        // handle error
      },
    })
}

最后將云函數(shù)上傳部署，使用手機測試，成功后，在微信的服務(wù)通知就會收到了訂閱的消息