vue3项目wx-open-launch-weapp使用

学崖无海

已于 2022-06-27 11:32:12 修改

阅读量2.3k

点赞数 2

分类专栏： H5 文章标签：微信

于 2022-06-23 16:43:13 首次发布

本文链接：https://blog.csdn.net/xueyawuhai/article/details/120215291

版权

本文介绍了在vue3项目中使用wx-open-launch-weapp的步骤和遇到的问题。首先，通过两种方法安装了weixin-js-sdk。接着，详细讲述了如何获取并配置wx.config的权限验证，包括设置JS接口安全域名和调用后端接口获取签名。最后，讨论了在实际应用中使用v-is指令渲染script标签以实现小程序跳转，并提到在本地环境与线上环境的差异问题。

摘要由CSDN通过智能技术生成

vue3项目wx-open-launch-weapp踩坑

看了许多vue2的相关教程，发现vue3的相关文章少一些

第一步：weixin-js-sdk安装

第一种方法

npm install  weixin-js-sdk
var wx = require('weixin-js-sdk');

第二种方法

<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js "></script>

第二步：拉取wx.config的权限验证配置

点击跳转微信jssdk配置文档

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”,也就是允许哪个域名去请求拿到jssdk的配置。其次，后端需要给出签名算法的接口，前端把网页域名作为参数发送出去，拿到返回的公众号appId,timestamp,nonceStr,signature.这几个参数。
所有需要使用 JS-SDK 的页面必须先注入配置信息，才可配置微信的JS接口。

例如H5中要跳转对应的小程序去，使用小程序跳转标签wx-open-launch-weapp

  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: appId, // 必填，公众号的唯一标识
    timestamp: timestamp, // 必填，生成签名的时间戳
    nonceStr: nonceStr, // 必填，生成签名的随机串
    signature: signature, // 必填，签名，见附录1
    jsApiList: ['hideMenuItems', 'getLocation'], // 必填，需要使用的JS接口列表，hideMenuItems隐藏菜单，getLocation地理授权
    openTagList: ['wx-open-launch-weapp']//这里一定要加上
  })
  wx.ready(function(){
  // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，例如在这里才把跳转小程序的按钮显示出来