WeChatの共有に遭遇するたびに問題が発生します。現在のモールプロジェクトは、Vueを使用して開発され、履歴ルーティングモードを使用しています。WeChatの共有を構成すると、多くの問題が発生し、ようやく解決しました。次に、解決プロセスを共有します。
テクニカルポイント
Vue、履歴モード
一般的な問題と指示
デバッグモードではfalse
これは言うまでもありませんwx.configが、呼び出しメソッドの誤ったパラメーターが原因です。以下を確認してください。
- ドメイン名が正常にバインドされているかどうか（ドメイン名検証ファイルにアクセスできる必要があります）
- WeChatが一部のAPIを変更するため、最新のjs-sdkファイルを使用します
- configメソッドのパラメーターは正しく渡されていますか（スペルが間違っている、大文字になっているなど）。
- この方法は、中に書かれたかどうかを使用する必要があり
jsApiList - 署名付きURLを取得するために必要
decodeURIComponent - バックグラウンドで署名を生成するための暗号化方法は、公式文書と比較する必要があります
デバッグは正常に戻り、共有は失敗しました
- コードのスペルが正しいことを確認してください
- 共有リンクのドメイン名またはパスは、現在のページに対応するパブリックアカウントのJSセキュリティドメイン名と同じである必要があります
- インターフェイス呼び出しは
wx.readyメソッドに配置する必要があります
シングルページプロジェクト（SPA）のいくつかのポイント
JS-SDKを使用する必要があるすべてのページには、最初に構成情報を挿入する必要があります。そうしないと、呼び出すことができません（同じURLを一度だけ呼び出す必要があり、URLを変更するたびにSPA Webアプリを呼び出すことができます。現在はAndroid WeChatクライアントです。 pushStateの新しいH5機能はサポートされていないため、pushStateを使用してウェブアプリページを実装すると署名が失敗し、この問題はAndroid 6.2で修正されます。
開発者が注意しなければならないこと：
- androidとiosは別々に処理する必要があります
- ページのURLが変更された場合、
wx.configメソッドを再度呼び出す必要があります。Androidは署名付きURLを取得して渡しますwindow.location.href - Vueプロジェクトがページを切り替えても、IOSのブラウザーのURLは変更されず、ページに初めてアクセスしたときのアドレスのままです。
コード
router / index.js
|
……
|
|
|
「@ / common / wechatConfig.js」から {wechatAuth} をインポートし ます。
|
|
|
……
|
|
|
const router =
new Router（{
|
|
|
モード：「履歴」、
|
|
|
ベース：process.env.BASE_URL、
|
|
|
ルート：[
|
|
|
{
|
|
|
パス："/"、
|
|
|
名前："自宅"、
|
|
|
メタ：{
|
|
|
タイトル："ホーム"、
|
|
|
showTabbar：true、
|
|
|
allowShare：true
|
|
|
}、
|
|
|
}、
|
|
|
{
|
|
|
パス："/ cart"、
|
|
|
名前："カート"、
|
|
|
メタ：{
|
|
|
タイトル："ショッピングカート"、
|
|
|
showTabbar：true
|
|
|
}、
|
|
|
コンポーネント：（）=> import（"./views/cart/index.vue"）
|
|
|
}
|
|
|
……
|
|
|
]
|
|
|
}）;
|
|
|
router.afterEach（
（to、from）=> {
|
|
|
let authUrl = ` $ { window.location.origin} $ {to.fullPath}`;
|
|
|
letShare = !! to.meta.allowShare;
|
|
|
if（!! window .__ wxjs_is_wkwebview）{ // IOS
|
|
|
if（window.entryUrl == "" || window.entryUrl == undefined）{
|
|
|
window.entryUrl = authUrl; //次のパラメータを削除します
|
|
|
}
|
|
|
wechatAuth（authUrl、
"ios"、allowShare）;
|
|
|
}
その他{
|
|
|
// 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