简单几步,让微信小程序变身 H5 网页
云开发(Tencent Cloud Base,TCB)是腾讯云为移动开发者提供的一站式后端云服务,它帮助开发者统一构建和管理资源,免去了移动应用开发过程中繁琐的服务器搭建及运维、域名注册及备案、数据接口实现等繁琐流程,让开发者可以专注于业务逻辑的实现,而无需理解后端逻辑及服务器运维知识,开发门槛更低,效率更高。
官方教程:https://tencentcloudbase.github.io/
Web 端调用云开发
开通步骤
- 先开通小程序的云开发环境,若已开通,此步骤可忽略。
- 访问腾讯云云开发,以“微信公众号”进行登录,授权所需小程序即可登录。(每个小程序对应着独立的腾讯云账号,当然也可以在腾讯云的账号上绑定唯一的一个小程序。)
- 在“用户管理=>登录设置”开通“匿名登录”。(我的目标是跑通 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 = srcimage.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 编写和团队文档建设。
主要功能
- 智能识别人脸,进行五官定位
- 支持多人识别,并戴上口罩
- 以后会增加多种节日的效果
扫码预览
微信搜一搜:快快戴口罩
小程序截图
简单几步,让微信小程序变身 H5 网页相关推荐
- 微信小程序和H5网页之间有什么区别?
微信小程序和H5网页之间有什么区别 本博主语录:小程序和H5网页的主要开发语言都是 JavaScript ,所以通常小程序的开发会被用来同普通的网页开发来做对比.两者有很大的相似性,对于前端开发者而言 ...
- Shopro商城 高级版 Fastadmin和Uniapp进行开发的多平台商城(微信公众号、微信小程序、H5网页、Android-App、IOS-App)
Shopro商城无加密的开源源码(可用于自营+外包项目(多主体).可用于外包定制开发项目) shopro 商城,一款基于 uni-app 的前端模板商城.目前适配了(小程序+app+h5+公众号). ...
- Shopro商城,基于Fastadmin和Uniapp进行开发的多平台(微信公众号、微信小程序、H5网页、Android-App、IOS-App)购物商城
Shopro商城 基于Fastadmin和Uniapp进行开发的多平台(微信公众号.微信小程序.H5网页.Android-App.IOS-App)购物商城,拥有强大的店铺装修.小程序直播.自定义模板. ...
- Shopro商城,多平台移动商城(微信公众号、微信小程序、H5网页、Android-App、IOS-App购物商城)
基于Uniapp进行开发的多平台(微信公众号.维信小程序.H5网页.Android-App.IOS-App)购物商城,拥有强大的店铺装修.小程序直播.自定义模板.路由同步.多端支付(威信,支付宝).多 ...
- iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 本文目录 前言 ...
- html5苹果x底部满屏,iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配...
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 前言 在苹果 iPho ...
- json 微信小程序 筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件,适配app、微信小程序、H5。...
sl-filter 筛选 筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介 一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享 效果图 并列菜单 ...
- 6步实现微信小程序获取群排名与群openGid。
6步实现微信小程序获取群排名与群openGid. 摘要:微信小程序群分享对活动的宣传力度是非常大的,如果我们需要进行群Pk,就必须获取对应的群信息.本篇文章将把本人实践的获取群信息的过程share出来 ...
- uni-app开发微信小程序,H5 关于压缩上传图片的问题
文章目录 前言 一.为什么要压缩图片 二.图片压缩方式 1. 微信小程序 2. H5 总结 前言 关于微信小程序.H5兼容性问题,今天就压缩以及上传图片做一个可实现方法的简要阐述. 一. ...
最新文章
- C++11中override的使用
- python模块之keyword
- session多服务器共享的方案梳理
- 牛腩新闻发布系统——初探CSS
- Vue开启Gzip打包异常:webpack打包报错Cannot read property ‘emit‘ of undefined
- facebook 面试_我在Facebook接受了应届毕业生的面试。 这是我从设计中学到的东西。...
- python编写一个程序、计算字符串中子串出现的次数_急求。。。C语言实现,计算字符串中子串出现的次数,就是先输入一个字符串,再输入一个上面字符串中存在...
- JavaScript设计模式与开发实践系列之单例模式
- IO流-设置输出字符编码格式
- ct与x光的哪个辐射大_听说做一次CT所受到的辐射剂量和损害 = 拍400张X光片?
- 地理人必备的宝藏网站
- 全网首发:LINUX上编译ARM(AARCH)版本的OpenJDK8
- windows系统镜像文件汇总
- Android修炼之道—自定义控件 (300喵喵币)
- Windows蓝屏了,如何处理?
- Java实现支付功能代码
- 阿里需要定力打持久战
- 【Linux 内核】实时调度类 ④ ( 实时运行队列 rt_rq 源码分析 | 实时运行队列 rt_rq 结构体字段分析 | active、rt_nr_running、curr、next 字段 )
- 两台不同的型号的路由器桥接
- 深析 | 手机摄像产业趋势—多摄/TOF/高倍变焦或成行业新风口