vue微信分享总汇

本文通过自己开发过程遇到一些坑做一次总结:

一、首先交代一下基本过程和工具

1、肯定是先撸一波文档微信api接口文档

2、 配置 JS 接口安全域名:登录微信公众平台,配置安全域名

1514816668(1).jpg

假设你的前端项目访问的主域名是 abc.com,那就填 abc.com。

3、引入js文件
此处用的是vux内置的插件 其他方式正常引入script即可;

import { WechatPlugin} from 'vux'
Vue.use(WechatPlugin); //  微信
const wx = Vue.wechat;

我推荐直接写在index.html的head中要不引入问题可能会报错;要把sdk尽量往前放;

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title></title>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>

4、后端获取微信签名(传路径给后台返回参数用于配置wx.config)
这个步骤需要后端写代码和微信服务器进行交互,获得「网页授权access_token」,根据这个 「网页授权 access_token」 把关键的几个参数算出来,传给前端。这几个参数分别是:
appId , timestamp , nonceStr , signature
后端要算出这几个参数不仅仅需要 「网页授权 access_token」,还需要一个 URL 参数。这个 URL 是前端当前的 URL。
比如 www.abc.com/123 这个页面需要微信分享功能,那么就把这个 URL 传个后端,后端算出来参数再返回给前端。
注意,只要 URL 发生变化,都得需要重新获取微信分享参数。除非个别页面不需要微信分享功能。

1514816829(1).jpg

如果前端用的是 vue-router ,请尽量用 history 模式。如果你用的是 hash 模式,那么你给后端传递 URL 是有坑的,具体可以看这篇文章

// 此处我是定义在vue原型中 这样方便以后的调用 通过 this.wxShare()调用
const imgUrl = 'http://xxx.xxxx.xxxx'; // 测试地址
Vue.prototype.wxShare = function (title, desc, link) {
  const url = document.location.href;// 当前url
  http.get(getConfig(), {//请求配置
    params: {
      url: url
    }
  }).then(res => {// 获得签名配置
    var Data = res.data.data;
    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作
    wx.config({
      debug: false, // 开启调试模式,开发时可以开启  
      appId: Data.appid,   // 必填,公众号的唯一标识   由接口返回
      timestamp: Data.timestamp, // 必填,生成签名的时间戳 由接口返回
      nonceStr: Data.nonceStr,    // 必填,生成签名的随机串 由接口返回
      signature: Data.signature,   // 必填,签名 由接口返回
      jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 此处填你所用到的方法 
    });
  });
wx.ready(() =>{
// ..... code 
}
};

这步很重要,具体看下边vue在微信中的坑;
5、定义方法(可以将该方法放在mounted中,并在其中放入‘分享给朋友’,‘分享至朋友圈’的js接口)

Vue.prototype.wxShare = function (title, desc, link) {
wx.config()
wx.ready(() => {
    // 所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,
    // 则可以直接调用,不需要放在ready函数中。
    wx.onMenuShareAppMessage({ // 分享给朋友
      title: title,       // 分享标题
      desc: desc,   // 分享描述
      link: link,       // 分享链接 默认以当前链接
      imgUrl: imgUrl + '/static/images/share.png',// 分享图标
      // 用户确认分享后执行的回调函数
      success: function () {
        var params = new URLSearchParams();
        params.append('token', window.localStorage.getItem('token'));
        params.append('type', 'share');
        http.post(shareCallback(), params).then(res => { // 请求后端分享成功之后获取一票的接口
          if (res.data.error == 0) { // 表示当天分享成功
            store.commit('shareChange', {// vuex弹出分享成功获取一票
              isShare: true
            });
          } else {
            return;
          }
        })
      },
      // 用户取消分享后执行的回调函数
      cancel: function () {
        console.log('分享到朋友取消');
      }
    });
    //分享到朋友圈
    wx.onMenuShareTimeline({});
  });
};

然后在需要的钩子里面调用即可,以上的流程都可以在文档中查看;
6、到此处如果顺利就可以成功分享。如果有坑接着往下看;

二、vue在微信中的坑;

1,在hash模式下:
定义一下: A = http://vigor.dev.yaoguo.cn/#/
B = http://vigor.dev.yaoguo.cn/#/plan
index = 首页路径;
plan = 计划页路径;
shareA = http://vigor.dev.yaoguo.cn/?from=singlemessage&isappinstalled=0#/
shareB = http://vigor.dev.yaoguo.cn/?from=singlemessage&isappinstalled=0#/plan;
(1)在安卓和浏览器下(包括ios)都是正常显示:从index 进入项目,跳转到plan显示: index = A,plan = B;
(2)分享出去页面:从index进入项目,分享出去路径:shareA ;点击跳转到plan,分享出去路径:shareB ;
从plan进入一样,分享出去页面为加from参数的当前页;
(3)通过window.location.href alert出的路径:index = A,plan = B;为正常能拿到;

然后说下不同的地方:
在ios微信打开:从index 进入项目,跳转到plan显示:
(1)通过微信右上角打开按钮在其他浏览器打开:通过index进入项目,在浏览器打开index页面。点击跳转到plan页面再通过其他浏览器打开依然是index页面; 从plan进入项目,在浏览器打开plan页面,点击跳转到index页面再通过其他浏览器打开依然是plan页面;
(2) ios: 从index进入项目,在本页分享,分享出去路径:shareA;点击到plan,分享出去路径:shareA 此时分享出去的路径是一样的; 从plan进入项目,分享出去页面路径一样为:shareB ;

造成问题:(1)wx.config签名使用的url认证错误;
解决办法:wx.config签名使用的url,通过window.location.href.split('#')[0]获取;
(2)如果分享当前页,需要做不同的处理;

那么在分享认证用路径就有问题:

拿 URL 换取微信分享 config 时,最好这么写:
const url = window.location.href.split('#')[0];以下所有子页面也就认证成功;
注意这个url需要 encodeURIComponent(url);
或者直接写主域名。例如:http://wwww.baidu.com/
如果:

image.png

报这个错误:1、url不对;2,、后台给你的数据算法不对(找接口改);3、清除缓存;

  • ios上二次分享会出现签名错误, 并且莫名被拼接上了一串标识 此问题只有在ios上有

ios会在#号中间添加一串标识 如下

http://test.aaa.bbbb.com/?from=singlemessage&isappinstalled=0#/details?id=2
// 原本链接 http://test.aaa.bbbb.com/#/details?id=2

这个问题解决了两天,建议在一开始就开启debug模式,这样能及时知道问题所在

解决办法:

一开始以为是 ‘#’ 的问题 于是乎开启vue HTML5 History 模式 去除掉# 结果发现 在进入其他页面的时候 复制连接还是首页的链接 本质上是 vue-router切换的时候 都是操作的浏览器历史记录 (此时你可以复制url 都是一样的)真实URL为第一次刚进入时的URL

  • 导致错误是 当浏览者从分享窗口进入后,他从分享页按着正常路由跳转到其他页面,其他页面的逻辑中如果有需要获取当前页面url的需要,会发现这个url和正常路由跳转的不一样,导致签名不一致,所以获取不到正确的文案。

  • 解决: 每次路由变化时都重新请求下签名,签名的URL 用第一次进入时的URL就可以解决了.

但是我们需求不是所有页面都是一样的分享怎么办?

在main.js验证成功config后,在需要的页面把微信分享提供的代码写入钩子函数中就好了;
隐藏按钮也一样;

我们也可以禁止掉微信默认分享;(具体看文档)

wx.hideMenuItems({
menuList: [] // 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3
});

使用方式,直接将项隐藏的菜单项
发送给朋友: "menuItem:share:appMessage"
分享到朋友圈: "menuItem:share:timeline"
分享到QQ: "menuItem:share:qq"
分享到Weibo: "menuItem:share:weiboApp"
收藏: "menuItem:favorite"
分享到FB: "menuItem:share:facebook"
分享到 QQ 空间/menuItem:share:QZone
放入到menuList:[]括号中,具体拼接方式,大概是","

三、开发的时候,一定要下载一个微信开发者工具,在那里面进行微信分享测试。代码开启 debug 模式后,如果签名错误,微信开发者工具会直接提醒你的。判断签名是否正确非常重要。传送门

四、iOS下微信分享成功后不执行success中的方法:

1、更新引入新的sdk:https://res.wx.qq.com/open/js/jweixin-1.3.2.js
2、在success中加入
 setTimeout(function(){ 
  // 执行函数
}, 500);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,519评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,842评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,544评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,742评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,646评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,027评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,513评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,169评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,324评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,268评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,299评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,996评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,591评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,911评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,288评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,871评论 2 341

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,263评论 25 707
  • 1、下载weixin-js-sdk 的依赖 cnpm install weixin-js-sdk --save 2...
    fangzy0723阅读 943评论 0 1
  • 网上非常多的微信分享例子和教程,但是都不全面,甚至不少错误。自己根据微信官方文档踩了好几个坑才撸成功。痛定思痛,写...
    Yi罐可乐阅读 15,191评论 7 30
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,561评论 18 139
  • 今天跟杨静一起回家,路上聊了很多,我发现她最近状态不错,成长挺快的。 她也是刚开始做店长,也没有经验,现在好像慢慢...
    杨荣鹏阅读 202评论 0 4