简单粗暴教你在VUE中引入微信SDK 调用微信分享、朋友圈分享、QQ分享......
写在前面:刚做了一个微信端的网页,用到了微信分享,在网上看了好多的资料,发现好多文档都写得云里雾里,让人看的头疼。通过对很多大佬文章的综合整理,才完成了微信分享的部分。所以我想着自己写一篇文章,能让看到我这篇文章的亲们能够清楚的明白在vue上怎么使用微信分享SDK,能够按照我写的步骤简单粗暴的实现备注:本人还是个菜鸟,刚刚接触vue 文章中有错误或者大家对我有建议,随意的提出来,我好改正,谢...
·
写在前面:
刚做了一个微信端的网页,用到了微信分享,在网上看了好多的资料,发现好多文档都写得云里雾里,让人看的头疼。通过对很多大佬文章的综合整理,才完成了微信分享的部分。所以我想着自己写一篇文章,能让看到我这篇文章的亲们能够清楚的明白在vue上怎么使用微信分享SDK,能够按照我写的步骤简单粗暴的实现
备注:本人还是个菜鸟,刚刚接触vue 文章中有错误或者大家对我有建议,随意的提出来,我好改正,谢谢大家!
1.安装sdk
npm install weixin-js-sdk --save
2. 在main.js入口文件中引入微信sdk
import wx from 'weixin-js-sdk'
3.在main.js的生命周期函数(created()或mounted())中引入微信sdk配置代码那就是全局的,也可以在你想要分享的.vue组件中引入微信sdk配置代码这样微信分享只在这个组件有效
4.通过config接口注入权限验证配置(一般后台会提供接口,获取接口后对应上就好,这个权限验证也可以放到一个公用js中这样不同的组件都可以复用这个配置)
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
5.通过ready接口处理成功验证(如果每个组件要应用不同的分享内容那么这个ready接口就在不同组件的生命周期函数中配置就好)
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)最新接口
wx.updateAppMessageShareData({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)最新接口
wx.updateTimelineShareData({
title: '', // 分享标题
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
});
本人也是VUE的菜鸟,谢谢大家查看和使用本文档,如果文档中有什么问题,希望大家能指正出来,我好及时修正,谢谢你
更多推荐
已为社区贡献10条内容
所有评论(0)