专栏首页云开发简单几步,让微信小程序变身 H5 网页? | 云开发实战
原创

简单几步,让微信小程序变身 H5 网页? | 云开发实战

作者

我是 盛瀚钦,沪江 CCtalk 前端开发工程师,Taro 框架的 issue 维护志愿者,主要侧重于前端 UI 编写和团队文档建设。

导语

疫情期间,用Taro+小程序·云开发,我开发了一个「快快戴口罩」的小程序,并将教程代码开源给大家。 最近了解到【云开发支持H5开发】,于是便折腾着把之前开发的「快快戴口罩」小程序改成了H5,并给他改了一个好听的名字,叫「女皇戴皇冠」,一来借这个机会体验一把Web云开发,二来可以把这个有趣的互动在更多平台分享。

技术栈

Taro 跨端框架,

腾讯云Web云开发

腾讯云的五官分析的人脸识别

H5主要功能

  • 智能识别人脸,进行五官定位
  • 支持多人识别,并戴上口罩
  • 以后会增加多种节日的效果

Web 端调用云开发

云开发(CloudBase)是腾讯云为移动开发者提供的一站式后端云服务,它帮助开发者统一构建和管理资源,免去了移动应用开发过程中繁琐的服务器搭建及运维、域名注册及备案、数据接口实现等繁琐流程,让开发者可以专注于业务逻辑的实现,而无需理解后端逻辑及服务器运维知识,开发门槛更低,效率更高。

云开发社区官网:https://www.cloudbase.net

开通步骤

  1. 先在微信IDE中开通小程序·云开发的环境,若已开通,此步骤可忽略。
  2. 访问腾讯云云开发[1],以“微信公众号”进行登录,授权所需小程序即可登录。(每个小程序对应着独立的腾讯云账号,当然也可以在腾讯云的账号上绑定唯一的一个小程序。)
  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[2]

而我的代码是基于 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

H5体验

参考资料

[1]腾讯云云开发: https://console.cloud.tencent.com/tcb

[2]https://github.com/TencentCloudBase/tcb-js-sdk/blob/master/docs/adapters.md: https://github.com/TencentCloudBase/tcb-js-sdk/blob/master/docs/adapters.md

[3]源码地址:https://github.com/shenghanqin/quickly-mask

云开发(CloudBase)是一款云端一体化的产品方案 ,采用 serverless 架构,免环境搭建等运维事务 ,支持一云多端,助力快速构建小程序、Web应用、移动应用。

技术文档:https://www.cloudbase.net/

微信搜索:腾讯云云开发,获取项目最新进展

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用腾讯云开发来部署Svelte Sapper应用

    Svelte是前端框架界新秀,以小巧、响应式、无virtual Dom著称,就像React有对应的SSR框架Next.js一样,Svelte也有自己官方的SSR...

    腾讯云开发TCB
  • 新能力 | 云开发CLI工具快速入门

    云开发 CLI 是一个开源的基于 Node 编写的命令行工具,用于帮助用户快速、方便的部署基于云开发的项目、管理云开发资源。

    腾讯云开发TCB
  • 1500+人参与的云开发0基础训练营又来啦!

    前三期中,我们通过干货满满的课程、细致及时的答疑吸引了1500+人学习小程序·云开发,并帮助一大批朋友真正从0基础的编程小白进阶为能够在小程序上实现idea的实...

    腾讯云开发TCB
  • tomcat 9.0.4 性能调优3

    拓荒者
  • 一篇文章教会你如何像大神一样写代码

    当我们还是小白,我们在写代码的时候,总会为了省事,就什么代码都写在一个文件里,如果一个文件不够,分两个,没有一个很好的规范性,最终的结果可能是这样的

    陌无崖
  • 专访腾讯杰出科学家贾佳亚:优图将成视觉AI的IP输出者

    在奔赴威尼斯参加 ICCV 前,贾佳亚接受深网专访,对优图实验室此次入围的论文以及实验室的基本情况进行了介绍。

    优图实验室
  • Hybris商品图片导入与压缩有关的配置

    1.   在电脑上安装 ImageMagick 软件(windows平台还需要安装VC++),下载路径:http://www.imagemagick.org/s...

    JMCui
  • C++17 fold expression

    C++11增加了一个新特性变参模板(variadic template),它可以接受任意个模版参数,参数包不能直接展开,需要通过一些特殊的方法,比如函数参数包的...

    Dabelv
  • 安卓编译 Jack server 错误问题解决办法

    问题 最近在编译安卓的时候,遇到Jack Server报错的问题:Failed to authenticate Jack server certificat...

    叉叉敌
  • mysql 查看索引、添加索引、删除索引命令添加索引删除索引

    · Table 表的名称。 · Non_unique 如果索引不能包括重复词,则为0。如果可以,则为1。 · Key_name 索引的名称。 · S...

    一个会写诗的程序员

扫码关注云+社区

领取腾讯云代金券