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

时间 2019-11-16

标签 vue 项目 history 模式微信分享总结繁體版

原文原文链接

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

原文justyeh.top/post/39android

技术要点

Vue，historyios

常见问题及说明

debug模式下报falsegit

这个没得说，就是调用wx.config方法的参数错误形成的，请确认如下事项：github

是否成功绑定了域名（域名校验文件要能被访问到）
使用最新的js-sdk文件，由于微信会改部分api
config方法的参数是否传正确了（拼写错误、大小写...）
须要使用的方法是否写在了jsApiList中
获取签名的url须要decodeURIComponent
后台的生成签名的加密方法须要对照官方文档

debug返回ok，分享不成功web

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

单页项目（SPA）中的一些要点

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

上面那段话摘自官方文档npm

开发者须要注意的事项：segmentfault

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

Code

router/index.jsapi

......
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);
    }
});
复制代码

代码要点：

meta中的allowShare用于判断页面是否可分享
window.__wxjs_is_wkwebview可用来判断是不是微信IOS浏览器
entryUrl是项目第一次进入的页面的地址，将其缓存在window对象上
为何安卓的时候要增长一个延时器，由于安卓会存在一些状况，就是即使签名成功，可是仍是会唤不起功能，这个貌似是一个比较稳妥的解决办法

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上的一篇博客segmentfault.com/a/119000001…，按照上面的代码，android手机都能成功，可是IOS有一个奇怪的问题，就是分享间歇性的失效，同一个页面，刚刚调起分享成功，再试一次就失败（没有图标、title，只能跳转到首页），通过“不断”努力的尝试，应该是解决了问题，说一下过程：

一开始觉得是异步唤起没成功的问题，就和android同样给IOS调用wechatAuth方法也加了个定时器，测了一遍没效果，放弃
起始js-sdk是经过npm安装的，版本上带了个test，有点不放心，改成直接使用script标签引用官方的版本
从新读了一遍文档，发现onMenuShareTimeline等方法即将废弃，就把jsApiList改成jsApiList:['updateAppMessageShareData','updateTimelineShareData']，改后就变成了IOS能够成功，android分享失败
百度updateAppMessageShareData安卓失败缘由，参考这个连接www.jianshu.com/p/1b6e04c29…，把老的api也加到jsApiList中，仔细、反复试了试两种设备都ok，好像是成功了，说"好像"是由于内心没底啊，各类“魔法”代码！

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

参考连接

segmentfault.com/a/119000001… www.jianshu.com/p/1b6e04c29… segmentfault.com/a/119000001… github.com/vuejs/vue-r…