惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

F
Fortinet All Blogs
宝玉的分享
宝玉的分享
酷 壳 – CoolShell
酷 壳 – CoolShell
T
The Exploit Database - CXSecurity.com
Help Net Security
Help Net Security
腾讯CDC
Project Zero
Project Zero
C
CXSECURITY Database RSS Feed - CXSecurity.com
IT之家
IT之家
C
Cyber Attacks, Cyber Crime and Cyber Security
T
Tailwind CSS Blog
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
D
Darknet – Hacking Tools, Hacker News & Cyber Security
L
LINUX DO - 最新话题
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
T
Threatpost
N
News | PayPal Newsroom
C
Cybersecurity and Infrastructure Security Agency CISA
Hacker News - Newest:
Hacker News - Newest: "LLM"
S
SegmentFault 最新的问题
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
P
Proofpoint News Feed
A
Arctic Wolf
B
Blog RSS Feed
Forbes - Security
Forbes - Security
P
Privacy & Cybersecurity Law Blog
Attack and Defense Labs
Attack and Defense Labs
V2EX - 技术
V2EX - 技术
P
Proofpoint News Feed
I
Intezer
Application and Cybersecurity Blog
Application and Cybersecurity Blog
阮一峰的网络日志
阮一峰的网络日志
aimingoo的专栏
aimingoo的专栏
T
Tenable Blog
MyScale Blog
MyScale Blog
U
Unit 42
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
WordPress大学
WordPress大学
W
WeLiveSecurity
D
DataBreaches.Net
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
G
GRAHAM CLULEY
有赞技术团队
有赞技术团队
Martin Fowler
Martin Fowler
罗磊的独立博客
The Last Watchdog
The Last Watchdog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
V
Vulnerabilities – Threatpost
美团技术团队
Microsoft Security Blog
Microsoft Security Blog

博客园 - ZEKELOVE

学习云计算基础总结 初识物联网的无线(长/短)距离技术总结 初识物联网知识入门总结 学习React框架-总结 WEB开发-HTML入门学习总结 WEB开发-CSS入门学习总结 WEB开发-HTML入门学习总结 华为RPA机器人学习(2) 华为RPA机器人学习(1) Python学习(1)-基础语法学习丨【生长吧!Python】 《Python入门》学习笔记(3) 《Python入门》学习笔记(2) 《Python入门》学习笔记(1) 《基于华为云DevCloud的托马斯商城》的学习笔记 Angular4中路由Router类的跳转navigate 2017浅谈面试(一) iscroll简单使用说明 jQuery File Upload跨域上传 文本框输入内容放大显示和格式化插件
Vue+Vue-router微信分享功能
ZEKELOVE · 2018-02-13 · via 博客园 - ZEKELOVE

在使用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.封装一下微信分享的功能,如下:

  1 import wx from 'weixin-js-sdk';
  2 import apiUrl from "@/config/apiUrl.js";
  3 export default {
  4   wxChat : ($vue, param) => {
  5     let appId = "";
  6     let timestamp="";
  7     let nonceStr = "";
  8     let signature = "";
  9     let options = {
 10       title: "",
 11       desc: "",
 12       link: "",
 13       imgUrl: "",
 14       type: "link",
 15       dataUrl: "",
 16       localUrl: ""
 17     };
 18     options = Object.assign({}, options, param);
 19     //
 20     $vue.$httpPost(apiUrl.weChatShare, {shareLink: options.localUrl}).then((res) => {
 21       if(res.data&&res.data.status==="1000") {
 22         wx.config({
 23           debug: false,
 24           appId: res.data.appId, // 和获取Ticke的必须一样------必填,公众号的唯一标识
 25           timestamp: res.data.timestamp, // 必填,生成签名的时间戳
 26           nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
 27           signature: res.data.signature, // 必填,签名
 28           jsApiList: [
 29             'onMenuShareAppMessage', 'onMenuShareTimeline',
 30             'onMenuShareQQ', 'onMenuShareQZone'
 31           ]
 32         });
 33         //处理验证失败的信息
 34         wx.error(function (res) {
 35           console.log('验证失败返回的信息:', res);
 36         });
 37         //处理验证成功的信息
 38         wx.ready(function () {
 39           //分享到朋友圈
 40           wx.onMenuShareTimeline({
 41             title: options.title, // 分享标题
 42             link: options.link, // 分享链接
 43             imgUrl: options.imgUrl, // 分享图标
 44             success: function (res) {
 45               // 用户确认分享后执行的回调函数
 46               console.log("分享到朋友圈成功返回的信息为:", res);
 47               showMsg("分享成功!");
 48             },
 49             cancel: function (res) {
 50               // 用户取消分享后执行的回调函数
 51               console.log("取消分享到朋友圈返回的信息为:", res);
 52             }
 53           });
 54           //分享给朋友
 55           wx.onMenuShareAppMessage({
 56             title: options.title,
 57             desc: options.desc,
 58             link: options.link,
 59             imgUrl: options.imgUrl,
 60             type: options.type, // 分享类型,music、video或link,不填默认为link
 61             dataUrl: options.dataUrl, // 如果type是music或video,则要提供数据链接,默认为空
 62             success: function (res) {
 63               // 用户确认分享后执行的回调函数
 64               console.log("分享给朋友成功返回的信息为:", res);
 65               showMsg(JSON.stringify(options));
 66             },
 67             cancel: function (res) {
 68               // 用户取消分享后执行的回调函数
 69               console.log("取消分享给朋友返回的信息为:", res);
 70             }
 71           });
 72           //分享到QQ
 73           wx.onMenuShareQQ({
 74             title: options.title,
 75             desc: options.desc,
 76             link: options.link,
 77             imgUrl: options.imgUrl,
 78             success: function (res) {
 79               // 用户确认分享后执行的回调函数
 80               console.log("分享到QQ好友成功返回的信息为:", res);
 81             },
 82             cancel: function (res) {
 83               // 用户取消分享后执行的回调函数
 84               console.log("取消分享给QQ好友返回的信息为:", res);
 85             }
 86           });
 87           //分享到QQ空间
 88           wx.onMenuShareQZone({
 89             title: options.title,
 90             desc: options.desc,
 91             link: options.link,
 92             imgUrl: options.imgUrl,
 93             success: function (res) {
 94               // 用户确认分享后执行的回调函数
 95               console.log("分享到QQ空间成功返回的信息为:", res);
 96             },
 97             cancel: function (res) {
 98               // 用户取消分享后执行的回调函数
 99               console.log("取消分享到QQ空间返回的信息为:", res);
100             }
101           });
102         });
103       } else {
104         console.log(res.data.msg);
105       }
106     }).catch((err) => {
107       console.log(err);
108     });
109   }
110 };

View Code

3.如何使用封装的分享

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

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

 1 import weixin from "@/utils/wechat.js";
 2 initWxChat: function() {
 3       let url = window.localStorage.getItem("LocalUrl")||window.location.href;
 4       let param = {
 5         title: "邀请有礼",
 6         desc: "欢迎您参加邀请有礼",
 7         link: window.location.href,
 8         imgUrl: this.headPortrait,
 9         localUrl: url
10       };
11       weixin.wxChat(this, param);
12     }

View Code

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";

如过没有看明白的可以私信我,或者大家有其它更好的解决办法欢迎留言,共同学习。

作者:zeke     
          出处:http://zhf.cnblogs.com/
          本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。