vue引入微信jssdk，完美实现

1.安装SDK

npm install weixin-js-sdk --save

2.微信分享的封装工具类（wxShare.js)

/* eslint-disable */
import Vue from 'vue';
import wx from 'weixin-js-sdk';
//存储服务器授权链接
const jsSDKAuth = 'XXX/wx_jssign_package.json';
//存储各个链接的签名信息
const signMap = new Map();
// 设置默认的分享信息，因为如分享图、请求授权项、隐藏授权项等基本不变，此处设置直接引用，避免使用时繁琐设置
const defaultWxShareConfig = { title: "分享标题（通常是动态的）", desc: '分享描述（通常是动态的）',link: location.href,imgUrl: '分享图片（通常是128*128的logo）',jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'hideMenuItems', 'closeWindow'],hideMenuList: ['menuItem:editTag', 'menuItem:delete', 'menuItem:originPage', 'menuItem:readMode','menuItem:openWithQQBrowser', 'menuItem:openWithSafari', 'menuItem:share:email', 'menuItem:share:brand']
}
//存储临时的分享信息
const wxShareConfig = {}const wxShare = {//各个页面加载后，调用此方法，传入的参数config是对象，其属性参考defaultWxShareConfigupdateWxShareConfig(config = {}) {wxShareConfig.title = config.title || defaultWxShareConfig.title;wxShareConfig.desc = config.desc || defaultWxShareConfig.desc;wxShareConfig.link = config.link || defaultWxShareConfig.link;wxShareConfig.imgUrl = config.imgUrl || defaultWxShareConfig.imgUrl;wxShareConfig.jsApiList = config.jsApiList || defaultWxShareConfig.jsApiList;wxShareConfig.hideMenuList = config.hideMenuList || defaultWxShareConfig.hideMenuList;//微信中二次分享的处理，截取到有效的分享链接var authUrl = wxShareConfig.link.split("#")[0];authUrl = authUrl.split("?")[0];//判断是否已经签名了if (signMap.has(authUrl)) {this._wxConfigJSSDK(signMap.get(authUrl), wxShareConfig);} else {this._wxShareAuth(authUrl);}},//从服务器获取某分享链接的签名信息，并存储起来_wxShareAuth(authUrl) {//此处我使用的是自己封装的网络请求方法const promise = Vue.http.get(jsSDKAuth + "?url=" + encodeURIComponent(authUrl));promise.then(res => {//此处请根据各自的服务器返回数据文档进行操作if (res.data.code == 200) {//分享链接授权签名信息const sign = res.data.data;signMap.set(authUrl, sign);this._wxConfigJSSDK(sign);}});promise.catch((err) => {console.log(err.response);})},//将签名信息更新到微信的SDK中_wxConfigJSSDK(shareSign) {wx.config({debug: false,appId: shareSign.appId,timestamp: shareSign.timestamp,nonceStr: shareSign.nonceStr,signature: shareSign.signature,jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']})// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。wx.ready(function() {const {title,desc,link,imgUrl} = wxShareConfig;wx.onMenuShareAppMessage({title,desc,link,imgUrl,success: function() {console.log("分享成功");},fail: function() {console.log("分享失败");},cancel: function() {console.log("取消分享");}})wx.onMenuShareTimeline({title,link,imgUrl,success: function() {console.log("分享成功");},cancel: function() {console.log("取消分享");}})});// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。  wx.error(function(res) {console.log("分享失败: error", res);});}
}
//导出工具类
export default wxShare;
//将工具类添加到Vue静态方法方便调用
Vue.prototype.$wxShare = wxShare;

3.调用方式

1）mian.js中引入：import './utils/wxShare';

2）页面中调用：

//页面加载完成后调用
activated() {var _this = this;_this.uuid = _this.$route.query.uuid;var shareUrl = global.BASE_SHARE_URL + 'grade?uuid=' + _this.uuid;this.$wxShare.updateWxShareConfig({title:'标题',desc: '简介',link: shareUrl});
}

vue引入微信jssdk，完美实现相关推荐

VUE项目引入微信JSSDK 实现微信自定义分享
VUE项目引入微信JSSDK 实现自定义分享前端vue.后端php 问题:后端获取config参数所需的url 需要和请求自定义分享页面url一致一.微信公众号后台添加 js安全域名(白名单) 二 ...
vue引入微信的JSSDK h5与小程序之间的跳转方案
vue引入微信的JSSDK使用 h5与小程序之间的跳转 vue如何使用微信的JSSDK 安装 npm install weixin-js-sdk --save 我喜欢设置全局属性,所以在main.j ...
前端基于vue企业微信JS-SDK语音识别功能开发（同公众号）
前端基于vue企业微信JS-SDK语音识别功能开发(同公众号) 微信JS-SDK 1.前期准备前端代码撰写微信JS-SDK 前端需要实现一个功能,如录音,拍照,分享,地理位置等,前端想要实现这些功 ...
uniapp项目引入微信JSSDK并封装使用
uniapp项目引入微信JSSDK并封装使用 1.引入微信JSSDK 两种方法 1.npm 2.直接下载js文件,保存到本地使用封装JSSDK方便我们使用 1.引入微信JSSDK 其实这一步我研究了 ...
vue 使用微信jssdk，调用微信相册上传图片
vue 使用微信jssdk 1.引入weixin-js-sdk npm install weixin-js-sdk 使用文档 https://www.npmjs.com/package/weixin- ...
Vue调用微信JSSDK上传图片(wx.uploadImage)
Vue页面调用微信API上传图片由于原生input上传图片无法在选择图片时控制选择的张数,所以选择调用微信JSSDK提供的方法调用相册选择图片进行上传.选择图片后上传到微信服务器,然后通知后台去微信 ...
vue history 微信jssdk授权失败解决办法
bug再现: 前提保证后端签名都正确,我的是正确的,前端时不时会出现授权失败的情况. IOS微信访问vue history模式的页面, A页面,需要微信授权,调用jssdk使用扫描二维码接口,打开方式 ...
前端vue+后台node实现获取微信用户基本信息+调用微信JS-SDK（下篇）
1. 获取微信用户基本信息 2. vue接入微信JS-SDK 环境: 前端:vue2.0 后台:node.js 公众号:微信提供的测试号以分享至微信和分享至朋友圈为例. 微信网页接入微信JS-SDK ...
vue项目-android版本引入微信录音
项目引入微信JSSDK npm install weixin-js-sdk 在录制音频的页面中引入微信JSSDK import wx from 'weixin-js-sdk' 该页面需要进行微信端验证 ...

vue引入微信jssdk，完美实现

vue引入微信jssdk，完美实现相关推荐

最新文章

热门文章