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 相关文章推荐
用javascript控制iframe滚动的代码
Apr 10 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 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
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
js动态引入的四种方法
2018/05/05 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
python里将list中元素依次向前移动一位
2014/09/12 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
python实现一个猜拳游戏
2020/04/05 Python
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
5.1手机促销活动
2014/01/17 职场文书
青春寄语大全
2014/04/09 职场文书
社区娱乐活动方案
2014/08/21 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
课外活动总结
2015/02/04 职场文书
医德医风学习心得体会
2016/01/25 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
python中tkinter复选框使用操作
2021/11/11 Python
浅谈Vue的computed计算属性
2022/03/21 Vue.js
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技