vue 项目如何引入微信sdk接口的方法
5星 · 超过95%的资源 134 浏览量
2020-11-29
12:47:24
上传
评论 1
收藏 105KB PDF 举报 
vue 项目如何引入微信项目如何引入微信sdk接口的方法接口的方法
做微信的网页基本上都要接入微信的sdk，我在做的时候，也颇费了一番功夫，然后就想记录一下，供自己日后翻阅，以及让
有需要的朋友可以做一下参考，如果喜欢的可以点波赞，或者关注一下，希望可以帮到大家。
安装安装sdk
npm install weixin-js-sdk --save
开始之前大家可以先读一读微信公众号的 接入文档 ，vue是单页面项目，比如你想要接入微信分享功能，分享功能在每个路
由地址都要有，因为每个路由的url是不一样的，搜易就需要在每个路由地址都引入一遍。
整体步骤：整体步骤：
vue引入sdk的话，就是在路由组件里面的，组件生命周期的：creatd()和mounted()里面放代码。
用伪代码，熟悉一下整体的流程，要做哪些事情：
//wx是引入的微信sdk
wx.config('这里有一些参数');//通过config接口注入权限验证配置
wx.ready(function() { //通过ready接口处理成功验证
// config信息验证成功后会执行ready方法
wx.onMenuShareAppMessage({ // 分享给朋友 ,在config里面填写需要使用的JS接口列表，然后这个方法才可以用
title: '这里是标题', // 分享标题
desc: 'This is a test!', // 分享描述
link: '链接', // 分享链接
imgUrl: '图片', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareTimeline({ //分享朋友圈
title: '标题', // 分享标题
link: '链接',
imgUrl: '图片', // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
});
wxx.error(function(res){//通过error接口处理失败验证
// config信息验证失败会执行error函数
});
上面的流程多看几遍，对整个流程有个概念，其中最重要的一步就是下面这个借口注入权限。
config接口注入权限接口注入权限
接入微信接口的最主要也是最重要一步步就是填写下面这些信息，填完这些信息之后，基本就好了。下面这些信息通常是通过
后端接口来获取的。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时
才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
- 1
- 2
前往页