簡單幾步，讓微信小程序變身 H5 網頁

雲開發（Tencent Cloud Base，TCB）是騰訊云爲移動開發者提供的一站式後端雲服務，它幫助開發者統一構建和管理資源，免去了移動應用開發過程中繁瑣的服務器搭建及運維、域名註冊及備案、數據接口實現等繁瑣流程，讓開發者可以專注於業務邏輯的實現，而無需理解後端邏輯及服務器運維知識，開發門檻更低，效率更高。

官方教程：https://tencentcloudbase.github.io/

Web 端調用雲開發

開通步驟

1. 先開通小程序的雲開發環境，若已開通，此步驟可忽略。
2. 訪問騰訊云云開發，以“微信公衆號”進行登錄，授權所需小程序即可登錄。（每個小程序對應着獨立的騰訊雲賬號，當然也可以在騰訊雲的賬號上綁定唯一的一個小程序。）
3. 在“用戶管理=>登錄設置”開通“匿名登錄”。（我的目標是跑通 Web 端，所以此處並未對完整登錄校驗做深入討論。）

如果有疑問，可以在騰訊雲上提工單，工單的回覆速度比較快。

配置方法

方案一：Script 引入

適合普通網頁使用

<script src="//imgcache.qq.com/qcloud/tcbjs/1.3.8/tcb.js"></script>
<script>
  var app = tcb.init({
    env: 'development-v9y2f'
  })
</script>

以 npm 引入

雲開發可以通過 tcb-js-sdk 來訪問：

npm install --save tcb-js-sdk@latest

要在你的模塊式使用模塊可以

const tcb = require('tcb-js-sdk');

或

import * as tcb from 'tcb-js-sdk';

// 初始化環境
const app = tcb.init({
  env: '你的環境 Id'
});

tcb-js-sdk 支持多端適配，如微信小程序、Web 端、QQ 小遊戲等，具體可以看 https://github.com/TencentCloudBase/tcb-js-sdk/blob/master/docs/adapters.md

而我的代碼是基於 Taro 跨端框架。

import * as tcb from 'tcb-js-sdk';

componentWillMount() {

  //
  if (process.env.TARO_ENV === 'weapp') {
    Taro.cloud.init({
      env: '環境 ID'
    })
  } else if (process.env.TARO_ENV === 'h5') {
    // 將TCB綁定到 Taro.coud 上便於全局使用
    // 實測 tcb-js-sdk 大部分的 API 與wx.cloud好像一樣
    Taro.cloud = tcb.init({
      env: '環境 ID'
    })

    // 匿名登錄
    Taro.cloud.auth().signInAnonymously().then(() => {

      // 這裏代碼可以不寫，我是想調用雲開發的雲函數，來驗證是否成功調用。
      Taro.cloud.callFunction({
        name: 'thanks-data',
        data: {}
      }).then(res => console.log('thanks-data res', res))

    }).catch(error => {
      console.log('error :', error);
    })
  }
}

這裏補充一些關於 Taro 的信息

Taro 是一套遵循 React 語法規範的 多端開發 解決方案。

使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節跳動/QQ/京東小程序、快應用、H5、React-Native 等）運行的代碼。

項目開發中所踩的坑

適配過程

從微信小程序遷移到 Web 端，不是一蹴而就的。在我的“快快戴口罩”小程序中，我是基於以下三個頁面來完成的：

• 致謝頁（pages/thanks/thanks）：調用雲函數，讓頁面正常運轉
• 聖誕帽 canvas 畫圖（pages/test/test）：調用雲函數，自動在canvas畫上人物圖片和聖誕帽，完成小程序端與 Web 端的適配。
• 口罩頁（pages/wear-a-mask/wear-a-mask）：完整流程，包含雲開發、UI 適配、圖片識別及圖片生成等。

畫布功能

小程序側 所要繪製的圖片資源（網絡圖片要通過 getImageInfo / downloadFile 先下載），也就是說，小程序上所需的是有效的本地圖片地址，比如本地路徑、代碼包路徑。

Web 端 需要的是 Img 元素在 onload 後，也就是需要將圖片加載完後再進行繪製。

// Web 端，獲取圖片元素
const getH5Image = (src) => {
  return new Promise((resolve, reject) => {
    const image = new Image()
    image.setAttribute('crossOrigin', 'anonymous');
    image.src = src
    image.id = `temp_image_${Date.now()}`;
    image.style.display = 'none';
    document.body.append(image);
    image.onload = () => resolve(image)
    image.onerror = () => reject(image)
  })
}

// 獲取網絡圖片
export const getImg = async (src) => {

  try {
    if (process.env.TARO_ENV === 'h5') {
      let image = await getH5Image(src)
      return image
    }

    if (src.includes(';base64,')) {
      return await base64src(src)
    }

    const res = await Taro.getImageInfo({
      src
    })
    return res.path

  } catch (error) {
    console.log('error :', error);
    throw error

  }
}

樣式適配

Taro H5 版本上少了一些樣式適配。

<!-- index.html 加入iPhone X適配-->
<meta content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover" name="viewport">

html #app .taro_page {
  height: 100%;
}
html button {
  display: inline-block;
  width: auto;
  border: none;
}
html .taro-text {
  white-space: pre-line;
}
/* iPhone x異形屏適配 */
html .taro-tabbar__tabbar-bottom {
  margin-bottom: calc(env(safe-area-inset-bottom) / 3);
}

功能隱藏

小程序特有，Web 端缺失

分享給朋友 Button

<Button className='share-btn' openType='share'>分享給朋友<View className='share-btn-icon'></View></Button>

圖片壓縮 wx.compressImage

文章相關內容：

珍愛生命，從我做起，快點戴上口罩，給大家介紹我開源的 Taro + 騰訊雲開發 小程序「快快戴口罩」它可以智能識別人臉，給集體照戴上口罩。(*￣︶￣)

採用 Taro 跨端框架，採用騰訊雲開發模式，採用基於騰訊雲的五官分析的人臉識別，實現了自動爲頭像戴上口罩的功能。

源碼地址：

https://github.com/shenghanqin/quickly-mask

我是 盛瀚欽，滬江 CCtalk 前端開發工程師，Taro 框架的 issue 維護志願者，主要側重於前端 UI 編寫和團隊文檔建設。

主要功能

• 智能識別人臉，進行五官定位
• 支持多人識別，並戴上口罩
• 以後會增加多種節日的效果

掃碼預覽

微信搜一搜：快快戴口罩

小程序截圖