导航
导航
文章目录󰁋
  1. 接入要求
  2. 接入微信JS-SDK
  3. 接入要求
  4. 接入微信JS-SDK
  5. 在vue中使用例子
  6. 第1步 在main.js中设置
  7. 第2步 获取微信版本
  8. 第3步 在页面上展示
  9. 第4步 监听开发标签回调事件
  10. 更多参考
  11. 在vue中使用例子
  12. 第1步 在main.js中设置
  13. 第2步 获取微信版本
  14. 第3步 在页面上展示
  15. 第4步 监听开发标签回调事件
  16. 更多参考
NEW
🚀

前端系统进阶指南

系统化学习前端知识

→

关注公众号

公众号：前端进价之旅

微信h5网页跳转小程序方案

2020.07.24 Poetry Front-End  热度 ℃   字数统计 1.5k字   阅读时长 7分

接入要求

  • 主体要求: 仅开放给已认证的服务号
  • 系统要求：微信版本要求为：7.0.12及以上。系统版本要求为：iOS 10.3及以上、Android 5.0及以上

接入微信JS-SDK

包使用方式

接入要求

  • 主体要求: 仅开放给已认证的服务号
  • 系统要求：微信版本要求为：7.0.12及以上。系统版本要求为：iOS 10.3及以上、Android 5.0及以上

接入微信JS-SDK

包使用方式

"weixin-js-sdk": "^1.6.0"

直接在页面上使用

在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

wx.config({
  appId: '',
  debug: true,
  timestamp: '',
  nonceStr: '',
  signature: '',
  jsApiList: [],
  openTagList: ['wx-open-launch-app','wx-open-launch-weapp'] // 获取开放标签权限
});

需要注意的点

  • wx.config 内列出使用到的 openTagList
  • 符合开放平台列出的要求 https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html
  • app 需要根据接入微信 sdk https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/iOS.html

在微信开发者工具内打开你的网页测试如果显示

{errMsg: "config:ok”}

说明你已经接入JS-SDK成功了

在vue中使用例子

第1步 在main.js中设置

// 忽略微信自定义标签
Vue.config.ignoredElements = ['wx-open-launch-weapp','wx-open-launch-app']

第2步 获取微信版本

// 获取微信版本
// return eg. 7.0.16.1600
getWeixinVersion() {
  return navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i)[1]
},
created(){
  // 微信版本号大于 7.0.12 开放标签才可进行
  const wxVersion = this.isWechat() && this.getWeixinVersion() || ''
  if(wxVersion){
    let v = wxVersion.split('.')
    if(v[0]>=7){
      if(v[1]>=0){
        if(v[2]>=12){
          this.enableLaunchWeapp = true
        }
      }
    }
  }
},

第3步 在页面上展示

如果微信版本低于7.0.12 开放标签是无法使用的，需要降级处理

<div v-if="enableLaunchWeapp">
  <wx-open-launch-weapp
    id="launch-btn"
    username="gh_ed1212c48129d7fa3d"
    path="/pages/home/index.html"
  >
    <script type="text/wxtag-template">
      <style>
        .goodsname {
          font-size: 16px;
          color: #333333;
          font-weight: 600;
          line-height: 24px;
          margin-bottom: 5px;
        }
      </style>
      <h1 class="goodsname">{{ goodsInfo.goodsName }}</h1>
    </script>
  </wx-open-launch-weapp>
</div>
<h1 v-else>{{ goodsInfo.goodsName }}</h1>

需要注意

  • 在vue中需要加上 <script type="text/wxtag-template”></script>包裹元素，否则按钮不能展示
  • username为小程序原始id，需要在小程序后台设置那里获取
  • path是打开小程序的指定页面，需要加上.html 如/pages/home/index.html
  • style中样式写法需要注意，goods-name 好像不支持，需要这样写goodsname，只支持px格式

第4步 监听开发标签回调事件

mounted(){
  var btn = document.getElementById('launch-btn')
  btn.addEventListener('launch', e => {
    console.log('success');
  });
  btn.addEventListener('error',  e => {
    console.log('fail', e.detail);
  });
}

更多参考

"weixin-js-sdk": "^1.6.0"

直接在页面上使用

在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

wx.config({
  appId: '',
  debug: true,
  timestamp: '',
  nonceStr: '',
  signature: '',
  jsApiList: [],
  openTagList: ['wx-open-launch-app','wx-open-launch-weapp'] // 获取开放标签权限
});

需要注意的点

  • wx.config 内列出使用到的 openTagList
  • 符合开放平台列出的要求 https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html
  • app 需要根据接入微信 sdk https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/iOS.html

在微信开发者工具内打开你的网页测试如果显示

{errMsg: "config:ok”}

说明你已经接入JS-SDK成功了

在vue中使用例子

第1步 在main.js中设置

// 忽略微信自定义标签
Vue.config.ignoredElements = ['wx-open-launch-weapp','wx-open-launch-app']

第2步 获取微信版本

// 判断微信环境内
isWechat() {
  let ua = window.navigator.userAgent.toLowerCase()
  // console.log(ua)
  if (ua.match(/MicroMessenger/i)) {
    return true
  } else {
    return false
  }
},

// 获取微信版本
// return eg. 7.0.16.1600
getWeixinVersion() {
  return navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i)[1]
},
created(){
  // 微信版本号大于 7.0.12 开放标签才可进行
  const wxVersion = this.isWechat() && this.getWeixinVersion() || ''
  if(wxVersion){
    let v = wxVersion.split('.')
    if(v[0]>=7){
      if(v[1]>=0){
        if(v[2]>=12){
          this.enableLaunchWeapp = true
        }
      }
    }
  }
},

第3步 在页面上展示

如果微信版本低于7.0.12 开放标签是无法使用的，需要降级处理

<div v-if="enableLaunchWeapp">
  <wx-open-launch-weapp
    id="launch-btn"
    username="gh_edc489d117fa3d"
    path="/pages/home/index.html"
  >
    <script type="text/wxtag-template">
      <style>
        .goodsname {
          font-size: 16px;
          color: #333333;
          font-weight: 600;
          line-height: 24px;
          margin-bottom: 5px;
        }
      </style>
      <h1 class="goodsname">{{ goodsInfo.goodsName }}</h1>
    </script>
  </wx-open-launch-weapp>
</div>
<h1 v-else>{{ goodsInfo.goodsName }}</h1>

需要注意

  • 在vue中需要加上 <script type="text/wxtag-template”></script>包裹元素，否则按钮不能展示
  • username为小程序原始id，需要在小程序后台设置那里获取
  • path是打开小程序的指定页面，需要加上.html 如/pages/home/index.html
  • style中样式写法需要注意，goods-name 好像不支持，需要这样写goodsname，只支持px格式

第4步 监听开发标签回调事件

mounted(){
  var btn = document.getElementById('launch-btn')
  btn.addEventListener('launch', e => {
    console.log('success');
  });
  btn.addEventListener('error',  e => {
    console.log('fail', e.detail);
  });
}

更多参考

支持一下
扫一扫，支持poetries
  • 微信扫一扫
  • 支付宝扫一扫