柳峰 2019-07-01
Vue,history
debug模式下报false
这个没得说,就是调用wx.config
方法的参数错误造成的,请确认以下事项:
jsApiList
中decodeURIComponent
debug返回ok,分享不成功
wx.ready
方法中上面那段话摘自官方文档
开发者需要注意的事项:
wx.config
方法,android获取签名的url就传window.location.href
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); } });
代码要点:
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:显示按钮的页面切换的影藏按钮的页面,分享按钮有时依然存在,刷新就没问题,估计又是一个深坑,没精力在折腾了,就改为隐私页面分享到首页,公共页面分享原地址,如果有什么好的解决办法,请联系我!
jsApiList:['updateAppMessageShareData','updateTimelineShareData']
,改后就变成了IOS可以成功,android分享失败最后,在这里希望腾讯官方能不能走点心,更新文档及时点,demo能不能提供完整点....
参考链接
https://segmentfault.com/a/1190000014455713
https://www.jianshu.com/p/1b6e04c2944a
https://segmentfault.com/a/1190000012339148
https://github.com/vuejs/vue-router/issues/481