189 8069 5689

Vue项目history模式下微信分享爬坑总结-创新互联

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

创新互联主要从事网站建设、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务吉利,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

技术要点

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);
  }
});

网站名称：Vue项目history模式下微信分享爬坑总结-创新互联
分享地址：http://www.cdxtjz.cn/article/poicc.html

其他资讯