经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue项目history模式下微信分享爬坑总结
来源:jb51  时间:2019/3/29 14:07:28  对本文有异议

每回遇到微信分享都是一个坑,目前的商城项目使用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

  1. ......
  2. import { wechatAuth } from "@/common/wechatConfig.js";
  3. ......
  4.  
  5. const router = new Router({
  6. mode: "history",
  7. base: process.env.BASE_URL,
  8. routes: [
  9. {
  10. path: "/",
  11. name: "home",
  12. meta: {
  13. title: "首页",
  14. showTabbar: true,
  15. allowShare: true
  16. },
  17. },
  18. {
  19. path: "/cart",
  20. name: "cart",
  21. meta: {
  22. title: "购物车",
  23. showTabbar: true
  24. },
  25. component: () => import("./views/cart/index.vue")
  26. }
  27. ......
  28. ]
  29. });
  30.  
  31.  
  32. router.afterEach((to, from) => {
  33. let authUrl = `${window.location.origin}${to.fullPath}`;
  34. let allowShare = !!to.meta.allowShare;
  35.  
  36. if (!!window.__wxjs_is_wkwebview) {// IOS
  37. if (window.entryUrl == "" || window.entryUrl == undefined) {
  38. window.entryUrl = authUrl; // 将后面的参数去除
  39. }
  40. wechatAuth(authUrl, "ios", allowShare);
  41. } else {
  42. // 安卓
  43. setTimeout(function () {
  44. wechatAuth(authUrl, "android", allowShare);
  45. }, 500);
  46. }
  47. });
  48.  

代码要点:

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

wechatConfig.js

  1. import http from "../api/http";
  2. import store from "../store/store";
  3.  
  4. export const wechatAuth = async (authUrl, device, allowShare) => {
  5. let shareConfig = {
  6. title: "xx一站式服务平台",
  7. desc: "xxxx",
  8. link: allowShare ? authUrl : window.location.origin,
  9. imgUrl: window.location.origin + "/share.png"
  10. };
  11.  
  12. let authRes = await http.get("/pfront/wxauth/jsconfig", {
  13. params: {
  14. url: decodeURIComponent(device == "ios" ? window.entryUrl : authUrl)
  15. }
  16. });
  17.  
  18. if (authRes && authRes.code == 101) {
  19. wx.config({
  20. //debug: true,
  21. appId: authRes.data.appId,
  22. timestamp: authRes.data.timestamp,
  23. nonceStr: authRes.data.nonceStr,
  24. signature: authRes.data.signature,
  25. jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "onMenuShareAppMessage", "onMenuShareTimeline"]
  26. });
  27.  
  28. wx.ready(() => {
  29. wx.updateAppMessageShareData({
  30. title: shareConfig.title,
  31. desc: shareConfig.desc,
  32. link: shareConfig.link,
  33. imgUrl: shareConfig.imgUrl,
  34. success: function () {//设置成功
  35. //shareSuccessCallback();
  36. }
  37. });
  38. wx.updateTimelineShareData({
  39. title: shareConfig.title,
  40. link: shareConfig.link,
  41. imgUrl: shareConfig.imgUrl,
  42. success: function () {//设置成功
  43. //shareSuccessCallback();
  44. }
  45. });
  46. wx.onMenuShareTimeline({
  47. title: shareConfig.title,
  48. link: shareConfig.link,
  49. imgUrl: shareConfig.imgUrl,
  50. success: function () {
  51. shareSuccessCallback();
  52. }
  53. });
  54. wx.onMenuShareAppMessage({
  55. title: shareConfig.title,
  56. desc: shareConfig.desc,
  57. link: shareConfig.link,
  58. imgUrl: shareConfig.imgUrl,
  59. success: function () {
  60. shareSuccessCallback();
  61. }
  62. });
  63. });
  64. }
  65. };
  66.  
  67. function shareSuccessCallback() {
  68. if (!store.state.user.uid) {
  69. return false;
  70. }
  71. store.state.cs.stream({
  72. eid: "share",
  73. tpc: "all",
  74. data: {
  75. uid: store.state.user.uid,
  76. truename: store.state.user.truename || ""
  77. }
  78. });
  79. http.get("/pfront/member/share_score", {
  80. params: {
  81. uid: store.state.user.uid
  82. }
  83. });
  84. }

总结

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

一开始我有参考sf上的一篇博客https://www.jb51.net/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://www.jb51.net/article/158690.htm,把老的api也加到jsApiList中,仔细、反复试了试两种设备都ok,好像是成功了,说"好像"是因为心里没底啊,各种“魔法”代码!

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

参考链接

https://www.jb51.net/article/158685.htm
https://www.jb51.net/article/158693.htm
https://www.jb51.net/article/158690.htm
https://github.com/vuejs/vue-router/issues/481

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号