vue微信网页开发--开放标签

网页跳转小程序

文档地址目录 | 微信开放文档 (qq.com)
重点：线下测试（即微信开发者工具）可hosts文件映射线上地址

步骤

1

image.png

2、引入jweixin-1.6.0.js（我是复制到本地）

const wx = require('@/jweixin-1.6.0');

3、获取签名

文档地址概述 | 微信开放文档 (qq.com)

4、初始化组件

wx.config({
   debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
   appId: data.data.appId, // 必填，公众号的唯一标识
   timestamp: data.data.timestamp, // 必填，生成签名的时间戳，这个可前端生成也可后端生成，跟生成签名时传的一致就行
   nonceStr: data.data.nonceStr, // 必填，生成签名的随机串，这个可前端生成也可后端生成，跟生成签名时传的一致就行
   signature: data.data.signature, // 必填，签名
   jsApiList: [
      "checkJsApi"
  ], // 必填，需要使用的JS接口列表，百度了一堆说至少要填一个，不然会有各种问题
  openTagList: ['wx-open-launch-weapp']
});
wx.ready(function () {
   //config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
});
wx.error(function (res) {
   console.log('res', res);
   // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

5、组件使用（官网）

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </script>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

6、自己改的

<div style="position: relative;">
  //这里放自己要展示的内容
  <div class="enroll">
    <img class="img" src="../assets/program.jpg">
  </div>
  <wx-open-launch-weapp
      id="launch-btn"
      username="xxxxxxxx" //所需跳转的小程序原始id，即小程序对应的以gh_开头的id，如何获取请自行百度
      path="pages/videopa/videopa.html?xxx=123" //要跳转到小程序的哪个页面，可携带参数
      @launch="launchHandle"
      @error="errorHandle"
      class="launch-weapp_class"
  >
    <script type="text/wxtag-template">
      <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;"></div>
    </script>
  </wx-open-launch-weapp>
</div>

参考地址vue跳转微信小程序遇到的坑_山重水复疑无路的博客-CSDN博客_vue转微信小程序

wx.config({
  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: data.data.appId, // 必填，公众号的唯一标识
  timestamp: data.data.timestamp, // 必填，生成签名的时间戳（可前端生成，可后端生成，要跟生成签名传的参数一致就行）
  nonceStr: data.data.nonceStr, // 必填，生成签名的随机串（可前端生成，可后端生成，要跟生成签名传的参数一致就行）
  signature: data.data.signature, // 必填，签名
  jsApiList: [
    "checkJsApi"
  ], // 必填，需要使用的JS接口列表，很多文章说一定要填，不能填“”或这null或者不填
  openTagList: ['wx-open-launch-weapp']
});
wx.ready(function () {
  //config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
});
wx.error(function (res) {
  console.log('res', res);
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

methods: {
  launchHandle(e) {
    console.log('success');
  },
  errorHandle(e) {
    console.log('fail', e.detail);
  },
} 

//css
.launch-weapp_class {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

7、效果展示(图为开发者工具测试效果)

image.png

image.png