背景
微信尽管推出了微信凋谢标签能够实现h5跳转小程序。
然而,开发者在应用之前要在公众号设置JS接口平安域名,不仅限度个数还限度批改次数,而且在应用之前还得获取access_token、ticket等计算signature传入config,十分麻烦。
怎么解决这个问题呢?
应用云开发动态托管能够免鉴权的跳转任意合规小程序。
流程比照
- 传统公众号开发
- 动态网站托管
动态网站托管
动态网站托管是云开发为开发者提供的 Web 资源托管服务,网站的动态资源(HTML、JavaScript、CSS、图片、音频、视频等)能够托管在该服务上,并享有以下能力:
- 默认域名:取得对应云环境的惟一专属默认域名,通过域名可拜访动态资源,域名能够用于测试或线上应用
- 自定义域名:你也能够绑定本人域名,绑定后本人的域名可拜访动态网站资源
- 程序 webview:小程序不必配置业务域名即可在<web-view> 关上云开发动态网站托管的域名(仅反对可能应用<web-view> 标签的小程序
- CDN 减速
- 能够免鉴权间接关上小程序:非集体主体的认证的小程序,应用动态网站托管的网页,能够免鉴权跳转任意非法合规的小程序,
筹备
- 微信开发者工具
- 非集体主体认证的小程序
- 开明云开发(按量计费)
应用流程
一、开明云开发
开明云开发:https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
在微信开发者工具中点击云开发,依据提醒步骤疾速开明,留神抉择按量计费环境。
二、开明动态网站托管
上一步开明后进入云开发控制台->更多->动态网站,依据提醒开明动态网站托管。此处须要期待几分钟服务初始化。
三、编写代码
依据官网的demo联合微信凋谢标签文档批改
<html> <head> <meta charset="utf-8"> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> </head> <body> <script> wx.config({ debug: true, // 调试时可开启 appId: '小程序 AppID',//必须是非集体主体认证的小程序 timestamp: 0, // 必填,填任意数字即可 nonceStr: 'nonceStr', // 必填,填任意非空字符串即可 signature: 'signature', // 必填,填任意非空字符串即可 jsApiList: [], openTagList:['wx-open-launch-weapp'], // 填入关上小程序的凋谢标签名 }) </script> Hello World <!-- 跳转小程序的凋谢标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html --> <wx-open-launch-weapp id="weapp" username="小程序 原始id" path="/pages/index/index.html"> <template> <button style="width: 200px; height: 45px; line-height: 45px; text-align: center; font-size: 17px; border-radius: 22.5px; color:cornflowerblue;">拉起小程序</button> </template> </wx-open-launch-weapp> </body></html>
四、上传代码至动态网站托管
将编写好的html文件上传至动态托管
获取url地址点击文件右侧的详情按钮,即可看到下载地址,复制到微信里拜访就能够看到跳转按钮。
五、成果演示
注意事项
- 应用该性能必须是非集体主体认证的小程序。
- 按量计费的云开发环境才能够开明动态网站托管。
- <wx-open-launch-weapp>应用的是username属性(小程序的原始id)而不是appId。
- path属性,所申明的页面门路必须增加.html后缀,如pages/home/index.html。
- 目前动态网站仅反对h5跳转小程序凋谢标签权限,其余jssdk接口暂不反对。
相干文档
- 微信网页开发凋谢标签(https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html)
- 小程序·云开发动态网站(https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/introduction.html)
总结
以上便是应用小程序·云开发动态网站实现免鉴权H5跳转小程序的办法,极大的节俭了开发工夫,快去试试吧!
产品介绍
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为开发者提供高可用、主动弹性扩缩的后端云服务,蕴含计算、存储、托管等serverless化能力,可用于云端一体化开发多种端利用(小程序,公众号,Web 利用,Flutter 客户端等),帮忙开发者对立构建和治理后端服务和云资源,防止了利用开发过程中繁琐的服务器搭建及运维,开发者能够专一于业务逻辑的实现,开发门槛更低,效率更高。
开明云开发:https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
产品文档:https://cloud.tencent.com/product/tcb?from=12763
技术文档:https://cloudbase.net?from=10004
技术交换加Q群:601134960
最新资讯关注微信公众号【腾讯云云开发】