H5 跳小程序

「使用开放标签 :」

「开放对象:」

  • 必须是已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
  • 已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。

「客户端要求:」

微信版本要求为:7.0.12及以上。系统版本要求为:iOS 10.3及以上、Android 5.0及以上。

注意:微信开发者工具暂时不支持!所以建议直接使用手机访问进行测试。

示例

「第一步:判断浏览器」

var userAgent = window.navigator.userAgent.toLowerCase();var is_android = /(android)/.test(userAgent);var is_iphone = /(iphone|ios)/.test(userAgent);var is_mobile = is_android || is_iphone;var is_weixin_browser = /micromessenger/.test(userAgent);
// 获取微信的版本号,如:7.0.14let wechat = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i)if (wechat) {  let judgewechat = wechat[1].split('.')  if (judgewechat[0] >= 7) {    if (judgewechat[1] >= 0) {      if (judgewechat[2] >= 12) {        // 微信版本是 7.0.12及以上      }    }  }}

「第二步:引入微信 JSSDK 并且配置最新 JSSDK」

wx.config({  debug: false,  beta: true,  appId: data.appid,  timestamp: data.timestamp,  nonceStr: data.noncestr,  signature: data.signature,  jsApiList: [''], // 备注:这里有一个坑,这项不能是 [],会不显按钮...  openTagList: ['wx-open-launch-weapp']})wx.ready(() => {  // 显示小程序跳转按钮})

「第三步:示例」

id="launch-btn"  username="gh_xxxxxxxx"  path="pages/home/index.html?user=123&action=abc">          打开小程序    var btn = document.getElementById('launch-btn');  btn.addEventListener('launch', function (e) {    console.log('success');  });  btn.addEventListener('error', function (e) {    console.log('fail', e.detail);  });

其中:

名称

备注

username

所需跳转的小程序原始id,即小程序对应的以gh_开头的id

path

所需跳转的小程序内页面路径及参数

「备注:对于path属性,所声明的页面路径必须添加.html后缀,如pages/home/index.html。」

H5跳APP

「使用开放标签」

开发平台配置

前往微信开放平台的管理中心-公众账号或小程序详情-接口信息-网页跳转移动应用-关联设置中绑定所需要跳转的App。

**第一步:引入微信 JSSDK **

「第二步:初始化配置」

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

「第三步:示例」

id="launch-btn"  appid="your-appid"  extinfo="your-extinfo">          App内查看    var btn = document.getElementById('launch-btn');  btn.addEventListener('launch', function (e) {    console.log('success');  });  btn.addEventListener('error', function (e) {    console.log('fail', e.detail);  });

其中:

名称

备注

appid

所需跳转的AppID

extinfo

跳转所需额外信息

好了,今天的分享就到这里了,咱们下期再见吧,希望可以对你有所帮助。