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、组件使用（官网）

6、自己改的

  //这里放自己要展示的内容
  

    
  
  
    
  

参考地址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