H5跳转小程序页面/wx-open-launch-weapp/

本文详细介绍了如何从H5页面跳转到微信小程序,包括必须在服务器上部署H5页面、微信环境判断、配置信息设置、签名算法检查、错误排查等步骤。同时提醒开发者注意动态获取URL和正确设置appid。
摘要由CSDN通过智能技术生成

外部的H5已经可以跳转小程序啦,也可以跳转app啦,让我们一起学习一下吧!
🙂🙂🙂

重要重要重要

我们编写的H5页面一定要放在服务器上,不然看不见效果!!!
这个必须是微信浏览器访问!!!
此功能的开放对象:
已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。
官方文档:微信官方文档:开放标签wx-open-launch-weapp的使用

第一步

我们按照文档的意思先引入
1.js文件,必须是1.6版本及以上:<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
2.我们的配置信息:提示:这里的话我们需要后端一起哦,appid可以在页面上写死,我们的timestamp/nonceStr/signature需要后端给传值,jsApiList这个我们可以随便给个js接口列表,可查看:js接口列表,openTagList这个是使用开放标签列表,必填wx-open-launch-weapp;

wx.config({
   
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [], // 必填,需要使用的JS接口列表
  openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});

官方给的用例:
提示:username小程序的原始id,和微信小程序的id是不一样的,微信小程序的id是WX开头哦;path这个可以给死的路径,就给都不是的时候跳转页面吧!

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index.html?user=123&action=abc"
>
  <template>
    <style>.btn {
   
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

nine percent 陈立农

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值