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결제/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 페이지를 통해 리디렉션되었습니다.
항목 index.html 파일에 WeChat의 JS-SDK 파일을 소개합니다. webpack 구성 참조: 중국어/영어
index.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
