在使用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. };

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. }

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

  

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

Vue+Vue-router微信分享功能的更多相关文章

  1. AndroidStudio用微信官方方法接入微信分享功能

    转载请注明出处:http://www.cnblogs.com/wangoublog/p/5367950.html 现在微信的功能众所周知,用户量.影响力也是惊人,很多应用接入微信的功能已成为一种不可缺 ...

  2. 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制

    1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> &l ...

  3. android APP 中微信分享功能实现 的总结

    //花了很长时间最终完成了微信分享功能,中间走了很多弯路,在此做一下小结,希望对在应用中使用到微信分享的朋友有所帮助. 主要问题就是下面两个: 1.为什么运行了项目之后,微信分享只是闪了一下就没有了? ...

  4. 微信开发】【Asp.net MVC】-- 微信分享功能

    [微信开发][Asp.net MVC]-- 微信分享功能 2017-01-15 09:09 by stoneniqiu, 12886 阅读, 15 评论, 收藏, 编辑 内嵌在微信中的网页,右上角都会 ...

  5. AndroidStudio怎么实现微信分享功能

    在应用中添加微信分享功能,需要在微信开放平台上传你的应用,审核通过后方可使用此功能. https://open.weixin.qq.com/网址 申请的过程比较简单,这里就不追溯了,贴一个友情链接 h ...

  6. Android微信分享功能实例+demo

    Android微信分享功能实例 1 微信开放平台注册 2 获得appId,添加到程序中,并运行程序 3 使用应用签名apk生成签名,添加到微信开放平台应用签名,完成注册 4 测试分享功能. 有问题请留 ...

  7. php框架tp3.2.3和js写的微信分享功能心得,分享的标题内容图片自定义

    https://blog.csdn.net/weixin_42231483/article/details/81585322 最近用PHP的tp3.2.3框架和js写的微信分享功能心得,分享的标题内容 ...

  8. VueJs单页应用实现微信网页授权及微信分享功能

    在实际开发中,无论是做PC端.WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算 ...

  9. 【微信开发】【Asp.net MVC】-- 微信分享功能

    内嵌在微信中的网页,右上角都会有一个默认的分享功能.如下图所示,第一个为自定义的效果,第二个为默认的效果.实现了自定义的分享链接是不是更让人有点击的欲望?下面讲解下开发的过程. 一.准备,设置js接口 ...

随机推荐

  1. CodeForce VKcup C 树形dp

    题意: 给出一棵树,一个人可以在树上跳,每次最多跳k(1≤k≤5)个点定义f(s,t)为从顶点ss跳到顶点tt最少需要跳多少次求∑(s<t)f(s,t) 链接: 点我 dp[i][j]表示以i点 ...

  2. setuid setgid

    http://blog.csdn.net/oo__yan/article/details/7076889 在Linux系统中每个普通用户都可以更改自己的密码,这是合理的设置. 问题是:用户的信息保存在 ...

  3. [P1441]砝码称重 (搜索+DP)

    对于我这种蒟蒻,是很不错的一题了. dfs搜索当前状态 满足时DP 比较坑的地方就是起始的地方 我一开始从1开始,搜索写的是从0开始. 后来就统一用0开始的了. #include<bits/st ...

  4. C++学习笔记54:关联容器,函数对象

    关联容器的特点 1.每个关联容器都有一个键(key) 2.可以根据键高效查找元素 集合set 集合用来存储一组无重复的元素,由于集合的元素本身是有序的,可以高效地查找元素,也可以方便地指定大小范围的元 ...

  5. hihocoder1051 补提交卡(贪心)

    http://hihocoder.com/problemset/problem/1051 一开始dfs暴搜超时 这题关键在于理解到,肯定是补连续的几天.所以说写贪心之前要好好想想,怎么贪. //补题卡 ...

  6. 本机ip、127.0.0.1和0.0.0.0区别及内环流量

    本机ip.127.0.0.1和0.0.0.0区别及内环流量 所谓内环流量 简单的说是指 计算机内部,程序间通讯产生的流量,或者叫 本地流量,对应的是来自网络的流量. 比如,你安装了卡巴斯基,avast ...

  7. jQuery Distpicker插件 省市区三级联动 动态赋值修改地址

    在获取创建页面数据后需要在编辑页面调取之前提交的数据,在使用这个插件后发现无法动态赋值,查找资料后发现需要先销毁实例,$(’#target’).distpicker(‘destroy’); 第一步 引 ...

  8. 自定义UIPickView

    效果图 源码 https://github.com/YouXianMing/Animations 说明 1. 数据适配器PickerViewDataAdapter含有PickerViewCompone ...

  9. socket.io常用api

    1. 服务端 io.on('connection',function(socket)); 监听客户端连接,回调函数会传递本次连接的socket io.sockets.emit('String',dat ...

  10. AlexNet总结

    https://blog.csdn.net/Rasin_Wu/article/details/80017920 https://blog.csdn.net/chaipp0607/article/det ...