日本福冈天气,彼岸花开之夜,喜乐递
每回遇到微信分享都是一个坑,目前的商城项目使用vue开发,采用history的路由模式,配置微信分享又遇到了很多问题,最后终于解决了,现将解决的过程分享一下。
技术要点
vue,history
常见问题及说明
debug模式下报false
这个没得说,就是调用wx.config方法的参数错误造成的,请确认以下事项:
debug返回ok,分享不成功
单页项目(spa)中的一些要点
所有需要使用js-sdk的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的spa的web app可在每次url变化时进行调用,目前android微信客户端不支持pushstate的h5新特性,所以使用pushstate来实现web app的页面会导致签名失败,此问题会在android6.2中修复)。
上面那段话摘自
开发者需要注意的事项:
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); } });
代码要点:
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上的一篇博客,按照上面的代码,android手机都能成功,但是ios有一个奇怪的问题,就是分享间歇性的失效,同一个页面,刚刚调起分享成功,再试一次就失败(没有图标、title,只能跳转到首页),经过“不断”努力的尝试,应该是解决了问题,说一下过程:
最后,在这里希望腾讯官方能不能走点心,更新文档及时点,demo能不能提供完整点....
参考链接
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论