Vue项目history模式下微信分享总结
每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信分享又遇到了很多问题,最后终于解决了,现将解决的过程分享一下。
技术要点
Vue,history模式
常见问题及说明
debug模式下报false
这个没得说,就是调用wx.config
方法的参数错误造成的,请确认以下事项:
- 是否成功绑定了域名(域名校验文件要能被访问到)
- 使用最新的js-sdk文件,因为微信会改部分api
- config方法的参数是否传正确了(拼写错误、大小写...)
- 需要使用的方法是否写在了
jsApiList
中 - 获取签名的url需要
decodeURIComponent
- 后台的生成签名的加密方法需要对照官方文档
debug返回ok,分享不成功
- 确保代码拼写正确
- 分享链接域名或路径必须与当前页面对应的公众号JS安全域名一致
- 接口调用需要放在
wx.ready
方法中
单页项目(SPA)中的一些要点
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
上面那段话摘自官方文档
开发者需要注意的事项:
- android和ios需要分开处理
- 需要在页面url变化的时候重新调用
wx.config
方法,android获取签名的url就传window.location.href
- 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);
|
|
}
|
|
});
|
代码要点:
- 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上的一篇博客https://segmentfault.com/a/1190000014455713,按照上面的代码,android手机都能成功,但是IOS有一个奇怪的问题,就是分享间歇性的失效,同一个页面,刚刚调起分享成功,再试一次就失败(没有图标、title,只能跳转到首页),经过“不断”努力的尝试,应该是解决了问题,说一下过程:
- 一开始以为是异步唤起没成功的问题,就和android一样给IOS调用wechatAuth方法也加了个定时器,测了一遍没效果,放弃
- 起始js-sdk是通过npm安装的,版本上带了个test,有点不放心,改为直接使用script标签引用官方的版本
- 重新读了一遍文档,发现onMenuShareTimeline等方法即将废弃,就把jsApiList改为
jsApiList:['updateAppMessageShareData','updateTimelineShareData']
,改后就变成了IOS可以成功,android分享失败
- 百度updateAppMessageShareData安卓失败原因,参考这个链接https://www.jianshu.com/p/1b6e04c2944a,把老的api也加到jsApiList中,仔细、反复试了试两种设备都ok,好像是成功了,说"好像"是因为心里没底啊,各种“魔法”代码!
最后,在这里希望腾讯官方能不能走点心,更新文档及时点,demo能不能提供完整点....
参考链接
https://segmentfault.com/a/1190000014455713
https://www.jianshu.com/p/1b6e04c2944a
Vue项目history模式下微信分享总结的更多相关文章
- vue项目history模式下微信分享相关问题
import wx from '@/utils/wx' import { shareApi } from '@/api' // 微信验证 export function requireConfig() ...
- vue history模式 ios微信分享坑
vue history模式 ios微信分享坑 问题分析:因为苹果分享会是调取签名失败是因为:苹果在微信中浏览器机制和安卓不同,有IOS缓存问题,和IOS对单页面的优化问题,通俗点说安卓进行页面跳转分享 ...
- 在nginx上部署vue项目(history模式);
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- 在nginx上部署vue项目(history模式)--demo实列;
在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...
- vue history模式 ios微信分享 踩过的坑
背景:教育项目,整体依赖于微信环境,涉及到微信分享.微信二次分享 问题:vue使用history模式在iso微信下分享设置出错(签名认证错误.分享设置失败) 问题发现路径 1.按照微信公众号官方文档设 ...
- nginx反向代理部署vue项目(history模式)的方法
前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理 问题1思考: vue-route ...
- vue hash模式下微信分享后打开首页,三种完美解决方案
微信分享功能给我们带来了很大的便利,使得基于微信开发出来的 H5 页面可以很好的通过微信平台进行传播.所以呢,基本上每个基于微信开发的 H5 都会集成微信分享功能.但是,前几天在对接微信分享 API ...
- Vue项目History模式404问题解决
本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题.(由于每个项目的情况都不尽相同,本方案已经完美解决本在所使用项目,具体情况可能还需要修改.) 1.项目背景分析 ...
- vue路由history模式下打包node服务器配置
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
随机推荐
- 为什么操作dom会消耗性能
因为对DOM的修改为影响网页的用户界面,重绘页面是一项昂贵的操作.太多的JavaScript DOM操作会导致一系列的重绘操作,为了确保执行结果的准确性,所有的修改操作是按顺序同步执行的.我们称这个过 ...
- 编写Java程序,在硬盘中选取一个 txt 文件,读取该文档的内容后,追加一段文字“[ 来自新华社 ]”,保存到一个新的 txt 文件内
查看本章节 查看作业目录 需求说明: 在硬盘中选取一个 txt 文件,读取该文档的内容后,追加一段文字"[ 来自新华社 ]",保存到一个新的 txt 文件内 实现思路: 创建 Sa ...
- Storm集群安装Version1.0.1
Storm集群安装,基于版本1.0.1, 使用apache-storm-1.0.1.tar.gz安装包. 1.安装规划 角色规划 IP/机器名 安装软件 运行进程 nimbus zdh-237 sto ...
- MongoDB 变更流(Change Stream)介绍
1. 什么是Change Stream Change Stream 是MongoDB用于实现变更追踪的解决方案,类似于关系数据库的触发器,但原理不完全相同: | | Change Stream | 触 ...
- Golang 简洁架构实战
文中项目代码位置:https://github.com/devYun/go-clean-architecture 转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.l ...
- Selenium_浏览器窗口大小(6)
import time from selenium import webdriver driver = webdriver.Chrome() driver.maximize_window() driv ...
- CentOS6.9部署Redis3.2.9+FastDFS_4.06+Nginx1.5.0
CentOS6.9部署Redis3.2.9+FastDFS_4.06+Nginx1.5.0 原文链接:https://www.toutiao.com/i6481931577499582990/ 一.上 ...
- vue使用npm安装sass
npm install --save-dev sass-loader style-loader css-loader npm install --save-dev extract-text-webpa ...
- python驱动SAP完成数据导出(一)
写在前面 我们使用Python驱动SAP时,经常会需要导出一些SAP报表数据至本地Excel文件.这个看似简单的问题背后,其实暗藏玄机,今天小爬就带各位同学好好捋捋. 以事务代码FB03(凭证清单)为 ...
- Keil MDK STM32系列(七) STM32F4基于HAL的PWM和定时器
Keil MDK STM32系列 Keil MDK STM32系列(一) 基于标准外设库SPL的STM32F103开发 Keil MDK STM32系列(二) 基于标准外设库SPL的STM32F401 ...