微信浏览器跳转还是有中间页?不想?那教你十分钟用云开发生成没有中间页的H5页面(微信云开发)

853 阅读3分钟

微信图片_20221010133830.jpg

最近接到这样一个需求,本身一个简单的H5中间页,点击跳转唤端到小程序,但一般的H5页面在微信浏览器中会有一个中间页。但是这个H5本身就是想起到中间页的作用,不想要?那怎么办呢? 这就了解到微信小程序中的云开发静态网站 H5 跳小程序 developers.weixin.qq.com/miniprogram…

1、使用场景

非个人主体并且已认证的(微信认证)小程序,使用云开发静态网站托管的网页,可以免鉴权跳转任意合法合规的小程序。即可以在微信内部浏览器的 H5 跳转小程序,也可以在微信外部浏览器或其他部分 App (如企业微信、QQ 等)跳转微信小程序。 静态网站网页在微信客户端打开时,wx.config 可以传入小程序 AppID 并且不需计算签名,也就是免鉴权即可使用跳转小程序的能力。

扫码体验(将会跳转到微信官方的 "小程序示例" 小程序):postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.htm…

image.png

2、怎么用

(1)拉取官方模板,修改小程序信息

image.png

image.png

image.png 在微信公众平台找到你小程序相关信息替换上图配置。

注意,以下代码中有以下内容必须替换,可以搜索 <!-- replace --> 查看到所有需要替换的地方:

  • 你的小程序信息

    • 小程序 AppID:填入你的小程序 AppID
    • 云开发环境 ID:填入你的开通了静态网站托管的云开发环境 ID
  • 想要拉取的小程序信息

    • 小程序原始账号 ID:填入要跳转的小程序原始账号 ID(gh_ 开头)
    • 小程序页面路径:填入要跳转到的小程序的页面路径
    • 小程序名称:填入要跳转到的小程序名称

(2)将以上静态文件上传至微信小程序云开发托管

进入微信小程序=>云开发=>更多=>静态网站=>上传文件 image.png

image.png

image.png -找到刚刚的html文件地址上传,上传成功后就会在下面列表中显示

image.png -点击该文件,出现右边抽屉,找到下载地址,复制到浏览器就可以正常访问了(移动端环境),这就完成了第一步。

(3)修改云函数编写业务逻辑

·进入微信小程序创建云开发项目

image.png ·拉取官方云函数模板,在cloudfunction文件夹下将你拉取的云函数文件拉进去

image.png ·修改云函数中的跳转地址为你的目标地址

image.png 在此以上特别需要注意的是在H5openWepp方法中的云函数名称和你放在cloudfunction文件夹下的云函数文件名称对应,在callFunction方法中传递的actoin参数和云函数中接收到的参数对应

image.png

image.png

image.png ·最后一步将你创建的云函数上传 在微信小程序中右击云函数文件夹=>上传并部署(云端安装依赖) 上传成功后可以在 云开发=>云函数 中看见刚刚上传的云函数

image.png

回到刚刚的h5页面,如果以上配置正确的会就会跳转到你想要的目标页面了

接下来就是将模板改成你目标的落地页的样式

注:该h5的跳转方法区分了三个环境: 一个是普通的移动端浏览器环境:调用的是openWeapp()方法,即调用上传至云端的云函数,进行跳转 一个是微信浏览器环境:调用的是跳转小程序的开放标签,使用该标签要配置正确标签中的小程序id和要跳转的页面路径,进行跳转 一个是pc端浏览器环境,这边提示会引导在手机端打开网页链接,可自行进行修改

文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

image.png

以上,一个云开发H5页面就开发完成了