微信html5程序,H5跳转微信小程序

如题,最近有项目需要H5跳转到微信小程序,之前的认知中,跳转到微信小程序只有通过公众号、小程序、扫码这几种方式。终于H5支持跳转小程序了,废话不多说直接贴代码

1、需要微信公众号,并且是已经认证过的服务号。文档链接:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html,这个和获取微信公众号个人信息接口有点类似。

wx.config({

// debug: false, // 调试时可开启

appId: jsonData.content.appId, //

timestamp: jsonData.content.timestamp, // 必填,填任意数字即可

nonceStr: jsonData.content.nonceStr, // 必填,填任意非空字符串即可

signature: jsonData.content.signature, // 必填,填任意非空字符串即可

jsApiList: jsonData.content.jsApiList, // 必填,随意一个接口即可

openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名

})

唯一不同的是添加了:openTagList开放列表。这个接口是需要从服务器请求的,jsondata是服务器返回的数据信息。

2、H5中需要加入标签:

打开小程序

以上就是所需参数:小程序原始ID和小程序的页面路径,需要注意的地方:template 标签必须有,它所包含的标签设置样式的话要直接写在标签里面,要不然不起作用。如果使用微信浏览器直接点开就可以跳转小程序,

如果是使用手机浏览器的话需要小程序生成URL Scheme,进入小程序点击工具

cb793e9878d9497d979a89ce7edfc868.png

07e5d37886511cdd190e914ae7bbd89e.png

最后把生成的url scheme 放到H5里面,代码如下:window.location.href = "weixin://dl/business/?t=arfgrpQvnWt";就可以完成浏览器跳转小程序了。

3、记得实现引入jssdk.js.

以上就可以完成从H5跳转微信小程序了,如有不懂评论区留言。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值