最近接到这样一个需求,本身一个简单的H5中间页,点击跳转唤端到小程序,但一般的H5页面在微信浏览器中会有一个中间页。但是这个H5本身就是想起到中间页的作用,不想要?那怎么办呢? 这就了解到微信小程序中的云开发静态网站 H5 跳小程序 developers.weixin.qq.com/miniprogram…
1、使用场景
非个人主体并且已认证的(微信认证)小程序,使用云开发静态网站托管的网页,可以免鉴权跳转任意合法合规的小程序。即可以在微信内部浏览器的 H5 跳转小程序,也可以在微信外部浏览器或其他部分 App (如企业微信、QQ 等)跳转微信小程序。 静态网站网页在微信客户端打开时,wx.config 可以传入小程序 AppID 并且不需计算签名,也就是免鉴权即可使用跳转小程序的能力。
扫码体验(将会跳转到微信官方的 "小程序示例" 小程序):postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.htm…
2、怎么用
(1)拉取官方模板,修改小程序信息
在微信公众平台找到你小程序相关信息替换上图配置。
注意,以下代码中有以下内容必须替换,可以搜索 <!-- replace --> 查看到所有需要替换的地方:
-
你的小程序信息
- 小程序 AppID:填入你的小程序 AppID
- 云开发环境 ID:填入你的开通了静态网站托管的云开发环境 ID
-
想要拉取的小程序信息
- 小程序原始账号 ID:填入要跳转的小程序原始账号 ID(gh_ 开头)
- 小程序页面路径:填入要跳转到的小程序的页面路径
- 小程序名称:填入要跳转到的小程序名称
(2)将以上静态文件上传至微信小程序云开发托管
进入微信小程序=>云开发=>更多=>静态网站=>上传文件
-找到刚刚的html文件地址上传,上传成功后就会在下面列表中显示
-点击该文件,出现右边抽屉,找到下载地址,复制到浏览器就可以正常访问了(移动端环境),这就完成了第一步。
(3)修改云函数编写业务逻辑
·进入微信小程序创建云开发项目
·拉取官方云函数模板,在cloudfunction文件夹下将你拉取的云函数文件拉进去
·修改云函数中的跳转地址为你的目标地址
在此以上特别需要注意的是在H5openWepp方法中的云函数名称和你放在cloudfunction文件夹下的云函数文件名称对应,在callFunction方法中传递的actoin参数和云函数中接收到的参数对应
·最后一步将你创建的云函数上传
在微信小程序中右击云函数文件夹=>上传并部署(云端安装依赖)
上传成功后可以在 云开发=>云函数 中看见刚刚上传的云函数
回到刚刚的h5页面,如果以上配置正确的会就会跳转到你想要的目标页面了
接下来就是将模板改成你目标的落地页的样式
注:该h5的跳转方法区分了三个环境: 一个是普通的移动端浏览器环境:调用的是openWeapp()方法,即调用上传至云端的云函数,进行跳转 一个是微信浏览器环境:调用的是跳转小程序的开放标签,使用该标签要配置正确标签中的小程序id和要跳转的页面路径,进行跳转 一个是pc端浏览器环境,这边提示会引导在手机端打开网页链接,可自行进行修改
文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
以上,一个云开发H5页面就开发完成了