Vue项目history模式下微信分享爬坑总结


Posted in Javascript onMarch 29, 2019

每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信分享又遇到了很多问题,最后终于解决了,现将解决的过程分享一下。

技术要点

Vue,history

常见问题及说明

debug模式下报false

这个没得说,就是调用wx.config方法的参数错误造成的,请确认以下事项:

  1. 是否成功绑定了域名(域名校验文件要能被访问到)
  2. 使用最新的js-sdk文件,因为微信会改部分api
  3. config方法的参数是否传正确了(拼写错误、大小写...)
  4. 需要使用的方法是否写在了jsApiList中
  5. 获取签名的url需要decodeURIComponent
  6. 后台的生成签名的加密方法需要对照官方文档

debug返回ok,分享不成功

  1. 确保代码拼写正确
  2. 分享链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  3. 接口调用需要放在wx.ready方法中

单页项目(SPA)中的一些要点

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

上面那段话摘自官方文档

开发者需要注意的事项:

  1. android和ios需要分开处理
  2. 需要在页面url变化的时候重新调用wx.config方法,android获取签名的url就传window.location.href
  3. Vue项目在切换页面时,IOS中浏览器的url并不会改变,依旧是第一次进入页面的地址,所以IOS获取签名的url需要传第一次进入的页面url

Code

router/index.js

......
import { wechatAuth } from "@/common/wechatConfig.js";
......

const router = new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      meta: {
        title: "首页",
        showTabbar: true,
        allowShare: true
      },
    },
    {
      path: "/cart",
      name: "cart",
      meta: {
        title: "购物车",
        showTabbar: true
      },
      component: () => import("./views/cart/index.vue")
    }
    ......
  ]
});


router.afterEach((to, from) => {
  let authUrl = `${window.location.origin}${to.fullPath}`;
  let allowShare = !!to.meta.allowShare;

  if (!!window.__wxjs_is_wkwebview) {// IOS
    if (window.entryUrl == "" || window.entryUrl == undefined) {
      window.entryUrl = authUrl; // 将后面的参数去除
    }
    wechatAuth(authUrl, "ios", allowShare);
  } else {
    // 安卓
    setTimeout(function () {
      wechatAuth(authUrl, "android", allowShare);
    }, 500);
  }
});

代码要点:

  1. meta中的allowShare用于判断页面是否可分享
  2. window.__wxjs_is_wkwebview可用来判断是否是微信IOS浏览器
  3. entryUrl是项目第一次进入的页面的地址,将其缓存在window对象上
  4. 为什么安卓的时候要增加一个延时器,因为安卓会存在一些情况,就是即便签名成功,但是还是会唤不起功能,这个貌似是一个比较稳妥的解决办法

wechatConfig.js

import http from "../api/http";
import store from "../store/store";

export const wechatAuth = async (authUrl, device, allowShare) => {
  let shareConfig = {
    title: "xx一站式服务平台",
    desc: "xxxx",
    link: allowShare ? authUrl : window.location.origin,
    imgUrl: window.location.origin + "/share.png"
  };

  let authRes = await http.get("/pfront/wxauth/jsconfig", {
    params: {
      url: decodeURIComponent(device == "ios" ? window.entryUrl : authUrl)
    }
  });

  if (authRes && authRes.code == 101) {
    wx.config({
      //debug: true,
      appId: authRes.data.appId,
      timestamp: authRes.data.timestamp,
      nonceStr: authRes.data.nonceStr,
      signature: authRes.data.signature,
      jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "onMenuShareAppMessage", "onMenuShareTimeline"]
    });

    wx.ready(() => {
      wx.updateAppMessageShareData({
        title: shareConfig.title,
        desc: shareConfig.desc,
        link: shareConfig.link,
        imgUrl: shareConfig.imgUrl,
        success: function () {//设置成功
          //shareSuccessCallback();
        }
      });
      wx.updateTimelineShareData({
        title: shareConfig.title,
        link: shareConfig.link,
        imgUrl: shareConfig.imgUrl,
        success: function () {//设置成功
          //shareSuccessCallback();
        }
      });
      wx.onMenuShareTimeline({
        title: shareConfig.title,
        link: shareConfig.link,
        imgUrl: shareConfig.imgUrl,
        success: function () {
          shareSuccessCallback();
        }
      });
      wx.onMenuShareAppMessage({
        title: shareConfig.title,
        desc: shareConfig.desc,
        link: shareConfig.link,
        imgUrl: shareConfig.imgUrl,
        success: function () {
          shareSuccessCallback();
        }
      });
    });
  }
};

function shareSuccessCallback() {
  if (!store.state.user.uid) {
    return false;
  }
  store.state.cs.stream({
    eid: "share",
    tpc: "all",
    data: {
      uid: store.state.user.uid,
      truename: store.state.user.truename || ""
    }
  });
  http.get("/pfront/member/share_score", {
    params: {
      uid: store.state.user.uid
    }
  });
}

总结

原先计划不能分享的页面就使用hideMenuItems方法隐藏掉相关按钮,在ios下试了一下,有些bug:显示按钮的页面切换的影藏按钮的页面,分享按钮有时依然存在,刷新就没问题,估计又是一个深坑,没精力在折腾了,就改为隐私页面分享到首页,公共页面分享原地址,如果有什么好的解决办法,请联系我!

一开始我有参考sf上的一篇博客https://3water.com/article/158685.htm,按照上面的代码,android手机都能成功,但是IOS有一个奇怪的问题,就是分享间歇性的失效,同一个页面,刚刚调起分享成功,再试一次就失败(没有图标、title,只能跳转到首页),经过“不断”努力的尝试,应该是解决了问题,说一下过程:

  1. 一开始以为是异步唤起没成功的问题,就和android一样给IOS调用wechatAuth方法也加了个定时器,测了一遍没效果,放弃
  2. 起始js-sdk是通过npm安装的,版本上带了个test,有点不放心,改为直接使用script标签引用官方的版本
  3. 重新读了一遍文档,发现onMenuShareTimeline等方法即将废弃,就把jsApiList改为jsApiList:['updateAppMessageShareData','updateTimelineShareData'],改后就变成了IOS可以成功,android分享失败
  4. 百度updateAppMessageShareData安卓失败原因,参考这个链接https://3water.com/article/158690.htm,把老的api也加到jsApiList中,仔细、反复试了试两种设备都ok,好像是成功了,说"好像"是因为心里没底啊,各种“魔法”代码!

最后,在这里希望腾讯官方能不能走点心,更新文档及时点,demo能不能提供完整点....

参考链接

https://3water.com/article/158685.htm
https://3water.com/article/158693.htm
https://3water.com/article/158690.htm
https://github.com/vuejs/vue-router/issues/481

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
小程序如何构建骨架屏
May 29 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 #Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 #Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 #Javascript
详解vue配置后台接口方式
Mar 29 #Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 #Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 #Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 #Javascript
You might like
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
php简单截取字符串代码示例
2016/10/19 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
JavaScript中URL编码函数代码
2011/01/11 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
Javascript Objects详解
2014/09/04 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
python实现文件的分割与合并
2019/08/29 Python
使用python模拟高斯分布例子
2019/12/09 Python
python类中super() 的使用解析
2019/12/19 Python
python3下pygame如何实现显示中文
2020/01/11 Python
如何高效率的查找一个月以内的数据
2012/04/15 面试题
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
师生聚会感言
2014/01/26 职场文书
励志演讲稿300字
2014/08/21 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server