h5调用微信jssdk--vue项目

本文适用于使用vue开发的项目。

首先要进行测试号的相关配置，比如接口配置信息、JS接口安全域名等，这个在我的博客《微信公众号网页授权--前端获取code及用户信息（vue）》里面有介绍，这里略过啦。

一、安装微信js-sdk

npm install weixin-js-sdk

二、在你的页面中引入

import wx from 'weixin-js-sdk'

三、通过config接口注入权限验证配置

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

这里的参数timestamp、nonceStr、signature是要从后端获取的，虽然前端也可以做，但是出于安全考虑，必须在服务器端实现签名的逻辑，这个在微信开发者文档也有说明。因此，我们前端只需要把当前页面的url传给后端，让后端在服务端去完成签名的逻辑，然后返回这