Vue+Vue-router微信分享功能

来源:转载

在使用vue和vue-router路由框架已经开发过好几个项目了,其中也遇到不少坑,有些坑各种搜也没有找到非常理想的答案。


vue学习相对来说还是比较简单,官方文档说明非常清楚(https://cn.vuejs.org/v2/guide/),多做一些Demo就可以熟练上手了,并且现在也有好多框架(vuex,MintUI,Element,iView等),根据项目需要自行学则,因此本人也就没有怎么写过关于vue这方面的文章。


这次主要是把自己在微信中分享遇到的问题分享一下,Android机器中分享不会存在问题,主要是IOS分享各种签名,标题、内容、图片不改变问题。


1.微信分享当然要引入微信JS-SDK


微信JS-SDK说明文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115


分享页面引入:http://res.wx.qq.com/open/js/jweixin-1.2.0.js


vue框架可以使用:https://github.com/yanxi-me/weixin-js-sdk 命令:npm install weixin-js-sdk


2.封装一下微信分享的功能,如下:


import wx from 'weixin-js-sdk'; import apiUrl from "@/config/apiUrl.js"; export default {wxChat : ($vue, param) => { let appId = ""; let timestamp=""; let nonceStr = ""; let signature = ""; let options = {title: "",desc: "",link: "",imgUrl: "",type: "link",dataUrl: "",localUrl: "" }; options = Object.assign({}, options, param); // $vue.$httpPost(apiUrl.weChatShare, {shareLink: options.localUrl}).then((res) => {if(res.data&&res.data.status==="1000") { wx.config({debug: false,appId: res.data.appId, // 和获取Ticke的必须一样------必填,公众号的唯一标识timestamp: res.data.timestamp, // 必填,生成签名的时间戳nonceStr: res.data.nonceStr, // 必填,生成签名的随机串signature: res.data.signature, // 必填,签名jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline','onMenuShareQQ', 'onMenuShareQZone'] }); //处理验证失败的信息 wx.error(function (res) {console.log('验证失败返回的信息:', res); }); //处理验证成功的信息 wx.ready(function () {//分享到朋友圈wx.onMenuShareTimeline({title: options.title, // 分享标题link: options.link, // 分享链接imgUrl: options.imgUrl, // 分享图标success: function (res) { // 用户确认分享后执行的回调函数 console.log("分享到朋友圈成功返回的信息为:", res); showMsg("分享成功!");},cancel: function (res) { // 用户取消分享后执行的回调函数 console.log("取消分享到朋友圈返回的信息为:", res);}});//分享给朋友wx.onMenuShareAppMessage({title: options.title,desc: options.desc,link: options.link,imgUrl: options.imgUrl,type: options.type, // 分享类型,music、video或link,不填默认为linkdataUrl: options.dataUrl, // 如果type是music或video,则要提供数据链接,默认为空success: function (res) { // 用户确认分享后执行的回调函数 console.log("分享给朋友成功返回的信息为:", res); showMsg(JSON.stringify(options));},cancel: function (res) { // 用户取消分享后执行的回调函数 console.log("取消分享给朋友返回的信息为:", res);}});//分享到QQwx.onMenuShareQQ({title: options.title,desc: options.desc,link: options.link,imgUrl: options.imgUrl,success: function (res) { // 用户确认分享后执行的回调函数 console.log("分享到QQ好友成功返回的信息为:", res);},cancel: function (res) { // 用户取消分享后执行的回调函数 console.log("取消分享给QQ好友返回的信息为:", res);}});//分享到QQ空间wx.onMenuShareQZone({title: options.title,desc: options.desc,link: options.link,imgUrl: options.imgUrl,success: function (res) { // 用户确认分享后执行的回调函数 console.log("分享到QQ空间成功返回的信息为:", res);},cancel: function (res) { // 用户取消分享后执行的回调函数 console.log("取消分享到QQ空间返回的信息为:", res);}}); });} else { console.log(res.data.msg);} }).catch((err) => {console.log(err); });} };


3.如何使用封装的分享


如果使用vue路由hash模式,IOS中打开页面获取的地址永远都是一开始打开的地址,不是跳转后的当前页面地址,所以可以在打开的页面进行初始化调用或者在分享页面初始化满足(android),可以获取不同内核区分;要不就在跳转页面的时候使用location.href = "",不要使用路由,这样只需要在分享页面调用微信初始化。为了保险可以在router.beforeEach钩子里面保存跳转后的地址到localStorage.set("LocalUrl",document.URL)。


跳转页面:location.href = "?#/invite?userId=3" ;


import weixin from "@/utils/wechat.js"; initWxChat: function() {let url = window.localStorage.getItem("LocalUrl")||window.location.href;let param = { title: "邀请有礼", desc: "欢迎您参加邀请有礼", link: window.location.href, imgUrl: this.headPortrait, localUrl: url};weixin.wxChat(this, param); }


4.微信签名认证可以通过,但是自定义分享的内容不一定好使


这个问题主要是分享的页面带参数,由于路由Hash模式自动会加入#号,微信在IOS中自动加入了自己的内容,然后把#后面的内容放在了它的后面所以获取参数就会出现问题,或许签名认证也会出现问题,这样就想到了加入一个特殊符号去处理,在传入地址的参数#号前面加入一个?号,并且传递的参数最好只有一个,如果是多个话还是会存在问题。


获取当前页面地址:let url = window.localStorage.getItem("LocalUrl")||window.location.href;


分享授权认证页面localUrl:http://localhost:9000/?#/invite?userId=3;


真正要分享的页面link:window.location.href.split('#')[0] + "#/invite_share?userId=3";

分享给朋友:
您可能感兴趣的文章:
随机阅读: