uniapp开发多页面h5程序_实战丨借助云开发静态托管实现 H5 跳转小程序

作者：凡人多烦事01 | 2024-02-16 22:35:42

踩

uniapp 多页面开发

借助云开发静态托管可以实现免鉴权跳转任意合规小程序，静态网站托管是云开发为开发者提供的 Web 资源托管服务，网站的静态资源(HTML、JavaScript、CSS、图片、音频、视频等)可以托管在该服务上，并享有以下能力：

默认域名：获得对应云环境的唯一专属默认域名，通过域名可访问静态资源，域名可以用于测试或线上使用；
自定义域名：你也可以绑定自己域名，绑定后自己的域名可访问静态网站资源；
小程序 webview：小程序不用配置业务域名即可在打开云开发静态网站托管的域名(仅支持能够使用标签的小程序)。
CDN 加速；
可以免鉴权直接打开小程序：非个人主体的认证的小程序，使用静态网站托管的网页，可以免鉴权跳转任意合法合规的小程序。

资源准备：

微信开发者工具
非个人主体认证的小程序

一、开通云开发

在微信开发者工具中点击云开发，根据提示步骤快速开通，注意选择按量计费环境。

二、开通静态网站托管

上一步开通后进入云开发控制台->更多->静态网站，根据提示开通静态网站托管。此处需要等待几分钟服务初始化。

三、编写代码

根据官方的 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<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>