vs 开发android 页面跳转_最齐全干货 | 微信H5网页跳转 App、跳转小程序

好记性不如烂笔头~

我决定要把 在微信里 「H5 跳小程序」，「H5跳转 App」这两个知识点

做个笔记，也跟大家分享一下。

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	跳转所需额外信息

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