wechat spa
1.0.0
ルーターはハッシュ モードを有効にします。ハッシュは#である必要があります (例: https://example.com/#/home/index
履歴モードを使用すると、ページルートが変更された後、変更された URL アドレスをコピーできません。
パラメータは、 https://example.com/#/product/detail?id=1のような?の形式で取得されます。
?を使用してパラメータを取得しない場合は、多くの支払いセキュリティ ディレクトリを設定する必要があります。
wechat_openid、トークン、その他の操作を取得するための新しいページを作成します。ユーザーは、初めて SPA プロジェクトに入った後、次のように auth.html ページに移動する必要があります。ルート ディレクトリの静的フォルダーに新しい auth.html を作成します。 、WeChat認証シーケンス図
多くの支払いセキュリティ ディレクトリを設定する必要があるという問題を解決します (インターネット上の多くの資料では、
https://example.com/?#/payment/index?order_id=1など、支払いページに?を追加するよう記載されています。これにより、ルーティングが非常にわかりにくくなります。支払いの問題を解決するために?を追加する形式を使用することはお勧めできません)。
Nginxの設定
add_header "Cache-Control" "no-cache, private";
window.location.href ジャンプ ページがブラウザによってキャッシュされる問題を解決
JS-SDKの呼び出しを伴うページでは、wx.config()を再構成する必要があります。
ご存知ですか～
is_auth: is_auth の存在の説明が auth.html ページを通じてリダイレクトされました
WeChat の JS-SDK ファイルをインデックス.html ファイルのエントリに導入します。Webpack 設定リファレンス: 中国語/英語
インデックス.html
< script src =" //res.wx.qq.com/open/js/jweixin-1.2.2.js " > </ script >webpack.config.js
externals: {
wx : 'wx'
}使用方法:
import wx from 'wx'
wx . ready ( ( ) => {
console . log ( 'Hello Wechat!' )
} )インストール方法:
yarn add weixin-js-sdk
# 或
npm install weixin-js-sdk --save使用方法:
import wx from 'weixin-js-sdk'
wx . ready ( ( ) => {
console . log ( 'Hello Wechat!' )
} ) ページルーティングを切り替えた後、本文に iframe を追加してから、iframe を削除する必要があります。コードは次のとおりです。
// iPhone，iPod，iPad 下无法更新标题
if ( / ip(hone|od|ad) / i . test ( window . navigator . userAgent ) ) {
let iframe = document . createElement ( 'iframe' )
iframe . style . display = 'none'
iframe . src = '/favicon.ico'
iframe . onload = ( ) => {
setTimeout ( ( ) => {
iframe . remove ( )
} , 10 )
}
document . body . appendChild ( iframe )
} 解決策: https://example.com/#/product/detail?id=1&share_at=${Date.now()}のように、共有アドレスの後にランダムな文字列を追加します。
WeChat 共有参照コード:
import wx from 'wx'
import axios from 'axios'
const share = ( {
title ,
desc ,
fullPath ,
imgUrl
} ) => {
let link = fullPath . indexOf ( '?' ) > - 1
? `https://example.com/# ${ fullPath } &share_at= ${ Date . now ( ) } `
: `https://example.com/# ${ fullPath } ?share_at= ${ Date . now ( ) } `
wx . showAllNonBaseMenuItem ( )
wx . onMenuShareTimeline ( {
title ,
link ,
imgUrl
} )
wx . onMenuShareAppMessage ( {
title ,
desc ,
link ,
imgUrl
} )
}
const $_wechat = ( ) => {
return new Promise ( ( resolve , reject ) => {
// 获取服务端微信配置信息
axios . get ( 'https://api.example.com/v1/wechat/config' , {
params : {
url : window . location . href . split ( '#' ) [ 0 ]
}
} ) . then ( res => {
wx . config ( {
debug : false ,
appId : res . data . appId ,
timestamp : res . data . timestamp ,
nonceStr : res . data . nonceStr ,
signature : res . data . signature ,
jsApiList : [
'onMenuShareTimeline' ,
'onMenuShareAppMessage'
]
} )
wx . ready ( ( ) => { // 配置 wx.config 成功
resolve ( {
wx ,
share
} )
} )
} ) . catch ( ( ) => {
reject ( new Error ( '微信签名接口异常' ) )
} )
} )
}
// 调用分享
$_wechat ( ) . then ( res => {
res . share ( { // 配置分享
title : 'wechat-spa' ,
desc : 'Wechat SPA' ,
fullPath : '/home/index' ,
imgUrl : 'https://www.baidu.com/img/bd_logo1.png'
} )
} ) . catch ( _ => {
console . warn ( _ . message )
} ) | 初めて入力したURL | iOSが取得したセキュリティディレクトリ |
|---|---|
| https://example.com/#/home/index | https://example.com/#/home/index |
| https://example.com/#/me/index | https://example.com/#/me/index |
| https://example.com/#/product/index | https://example.com/#/product/index |
このように、多くのセキュリティ ディレクトリ パスを設定する必要がありますが、WeChat プラットフォームでは 3 つのセキュリティ ディレクトリ パスしか設定できません。SPA アプリケーション ページに直接入力しても機能しません。
解決策:ユーザーは、まず SPA アプリケーションのルート ディレクトリhttps://example.com/に入り、SPA アプリケーションのルーティング、WeChat 認証シーケンス図によって提供されるフックを通じて、アクセスするページにリダイレクトする必要があります。
WeChat 支払い直後に他のページにジャンプすると、一定の確率で白い画面が表示されることがあります (画面を長押ししてテキストまたは画像のアドレスをコピーします)。解決策:
// 延迟跳转即可解决
setTimeout ( ( ) => {
window . location . replace ( '/payment/success' ) // 跳转逻辑
} , 500 )WeChat の組み込みブラウザにはバグがあり、写真をバッチでアップロードすることはできません。これも
setTimeoutメソッドで解決できます。
内容に誤りがございましたら、フィードバックをお願いいたします、よろしくお願いいたします
ご質問がございましたら、私を友達として追加していただければ、一緒にコミュニケーションをとることができます。
QQ: 465353876
