2019-07-02
Cada vez que nos encontramos con WeChat compartir es un pozo. El proyecto del centro comercial actual se desarrolla utilizando Vue, utilizando el modo de enrutamiento histórico, y la configuración de WeChat Sharing ha encontrado muchos problemas y finalmente lo resolvió. Ahora compartiremos el proceso de solución.
Puntos técnicos
Vue, modo historial
Problemas comunes e instrucciones
Falso en modo de depuración
Esto no tiene nada que decir, es wx.configcausado por el parámetro incorrecto del método de llamada , confirme lo siguiente:
- Si el nombre de dominio se ha enlazado correctamente (el archivo de verificación del nombre de dominio debe ser accesible)
- Use el último archivo js-sdk, porque WeChat cambiará algunas API
- Son los parámetros del método de configuración pasados correctamente (mal escritos, en mayúscula ...)
- El método requiere el uso de ya sea escrito en
jsApiListel - Requerido para obtener la URL firmada
decodeURIComponent - El método de cifrado para generar firmas en segundo plano debe compararse con los documentos oficiales.
la depuración devuelve ok, el intercambio no tuvo éxito
- Asegúrese de que el código esté escrito correctamente
- El nombre de dominio o la ruta del enlace compartido debe ser el mismo que el nombre de dominio de seguridad JS de la cuenta pública correspondiente a la página actual
- Las llamadas de interfaz deben colocarse en
wx.readymétodos
Algunos puntos en el proyecto de página única (SPA)
Todas las páginas que necesitan usar el JS-SDK primero deben inyectarse con información de configuración, de lo contrario no se podrá llamar (la misma url solo se debe llamar una vez, y la aplicación web SPA para cambiar la url se puede llamar cada vez que la url cambia, actualmente el cliente Android WeChat La nueva función H5 de pushState no es compatible, por lo que usar pushState para implementar una página de aplicación web hará que la firma falle, y este problema se solucionará en Android 6.2).
El párrafo anterior está tomado de la documentación oficial.
Cosas a las que los desarrolladores deben prestar atención:
- Android e iOS deben manejarse por separado
- Debe volver a llamar al
wx.configmétodo cuando cambie la URL de la página . Android obtiene la URL firmada y la pasawindow.location.href - Cuando el proyecto Vue cambia de página, la url del navegador en IOS no cambiará. Todavía es la dirección de la primera vez que ingresa a la página, por lo que IOS necesita pasar la url de la primera página ingresada para obtener la url firmada
Código
router / index.js
|
......
|
|
|
importar {wechatAuth}
desde "@ / common / wechatConfig.js";
|
|
|
......
|
|
|
const router =
nuevo enrutador ({
|
|
|
modo: "historia",
|
|
|
base: process.env.BASE_URL,
|
|
|
rutas: [
|
|
|
{
|
|
|
ruta: "/",
|
|
|
nombre: "hogar",
|
|
|
meta: {
|
|
|
título: "Inicio",
|
|
|
showTabbar: verdadero,
|
|
|
allowShare: true
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
ruta: "/ cart",
|
|
|
nombre: "carro",
|
|
|
meta: {
|
|
|
título: "Carrito de compras",
|
|
|
showTabbar: verdadero
|
|
|
},
|
|
|
componente: () => importar ( "./views/cart/index.vue")
|
|
|
}
|
|
|
......
|
|
|
]
|
|
|
});
|
|
|
router.afterEach (
( to, from) => {
|
|
|
let authUrl = ` $ { window.location.origin} $ {to.fullPath}`;
|
|
|
deje allowShare = !! to.meta.allowShare;
|
|
|
if (!! window .__ wxjs_is_wkwebview) { // IOS
|
|
|
if ( window.entryUrl == "" || window.entryUrl == undefined) {
|
|
|
window.entryUrl = authUrl; // Elimina los siguientes parámetros
|
|
|
}
|
|
|
wechatAuth (authUrl,
"ios", allowShare);
|
|
|
}
más {
|
|
|
// Android
|
|
|
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