wechat spa Download - wechat spa Quellcode herunterladen

wechat spa

AI-Quellcode

1.0.0

Herunterladen

Zusammenfassung häufiger Probleme und Lösungen für die WeChat Single Page Application (SPA)

Sehr wichtig???
Diagramm der WeChat-Autorisierungssequenz
Installieren und verwenden Sie WeChat JS-SDK
Titelaktualisierung
WeChat-Freigabe
WeChat-Bezahlung
weißer Bildschirm

Ganz wichtig:

Der Router aktiviert den Hash-Modus, Hash muss # sein, wie zum Beispiel: https://example.com/#/home/index

Im Verlaufsmodus kann die geänderte URL-Adresse nicht kopiert werden, nachdem die Seitenroute geändert wurde.

Die Parameter werden in der Form ? abgerufen, z. B.: https://example.com/#/product/detail?id=1

Wenn Sie ? nicht zum Abrufen von Parametern verwenden, müssen Sie viele Zahlungssicherheitsverzeichnisse konfigurieren.

Erstellen Sie eine neue Seite, um wechat_openid, Token und andere Vorgänge zu erhalten. Benutzer müssen nach dem ersten Aufrufen des SPA-Projekts zur Seite auth.html springen, z. B.: Erstellen Sie eine neue auth.html im statischen Ordner des Stammverzeichnisses , WeChat-Autorisierungssequenzdiagramm

Lösen Sie das Problem, dass viele Zahlungssicherheitsverzeichnisse konfiguriert werden müssen (viele Materialien im Internet empfehlen, ? auf der Zahlungsseite hinzuzufügen, z. B.: https://example.com/?#/payment/index?order_id=1 ). Dies wird Machen Sie die Weiterleitung sehr unübersichtlich. Es wird nicht empfohlen, das Formular zum Hinzufügen von ? zu verwenden.

Nginx-Konfiguration

 add_header "Cache-Control" "no-cache, private";

Lösen Sie das Problem, dass die Sprungseite „window.location.href“ vom Browser zwischengespeichert wird

Seiten, die den Aufruf von JS-SDK beinhalten, müssen wx.config() neu konfigurieren

Du weißt schon

Diagramm der WeChat-Autorisierungssequenz:

is_auth: Die Existenzbeschreibung von is_auth wurde über die Seite auth.html umgeleitet

Installieren und verwenden Sie WeChat JS-SDK

Methode 1 (empfohlen)

Führen Sie die JS-SDK-Datei von WeChat in die Datei index.html ein, Webpack-Konfigurationsreferenz: Chinesisch/Englisch

index.html

 < script src =" //res.wx.qq.com/open/js/jweixin-1.2.2.js " > </ script >

webpack.config.js

externals: {
  wx : 'wx'
}

Anwendung:

 import wx from 'wx'

wx . ready ( ( ) => {
  console . log ( 'Hello Wechat!' )
} )

Methode 2

So installieren Sie:

yarn add weixin-js-sdk
# 或
npm install weixin-js-sdk --save

Anwendung:

 import wx from 'weixin-js-sdk'

wx . ready ( ( ) => {
  console . log ( 'Hello Wechat!' )
} )

Titelaktualisierung

Nach dem Wechseln der Seitenweiterleitung müssen Sie dem Text einen Iframe hinzufügen und ihn dann entfernen. Der Code lautet wie folgt

 // 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 )
}

WeChat-Freigabe

Die Freigabekonfiguration ist korrekt, aber die Seite wird nach Eingabe des Links nicht richtig angezeigt.

Lösung: Fügen Sie nach der freigegebenen Adresse eine zufällige Zeichenfolge hinzu, z. B.: https://example.com/#/product/detail?id=1&share_at=${Date.now()}

Referenzcode für die WeChat-Freigabe:

 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 )
} )

WeChat-Bezahlung

Zahlungssicherheitsverzeichnis: iOS identifiziert die Pfadregel für das Zahlungssicherheitsverzeichnis als die URL, die der ersten Seite entspricht, die in die SPA-Anwendung gelangt

Zum ersten Mal eingegebene URL	Von iOS erhaltenes Sicherheitsverzeichnis
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

Auf diese Weise müssen wir viele Sicherheitsverzeichnispfade konfigurieren, aber die WeChat-Plattform ermöglicht nur die Einstellung von 3 Sicherheitsverzeichnispfaden. Das direkte Aufrufen der SPA-Anwendungsseite funktioniert nicht.

Lösung: Benutzer müssen zuerst das Stammverzeichnis der SPA-Anwendung https://example.com/ eingeben und dann über den vom Spa-Anwendungsrouting bereitgestellten Hook auf die Seite umleiten, auf die sie zugreifen möchten, WeChat-Autorisierungssequenzdiagramm

weißer Bildschirm

Es besteht eine gewisse Wahrscheinlichkeit, dass ein weißer Bildschirm erscheint, wenn Sie unmittelbar nach der WeChat-Zahlung zu anderen Seiten springen (drücken Sie lange auf den Bildschirm, um den Text oder die Bildadresse zu kopieren). Lösung:

 // 延迟跳转即可解决
setTimeout ( ( ) => {
  window . location . replace ( '/payment/success' ) // 跳转逻辑
} , 500 )

WeChat integrierter Browserfehler, Bilder können nicht stapelweise hochgeladen werden, was auch durch die setTimeout -Methode behoben werden kann