wechat spa Télécharger - wechat spa Téléchargement du code source

wechat spa

Code Source AI

1.0.0

Télécharger

Résumé des problèmes courants et des solutions pour l'application WeChat à page unique (SPA)

Très important ???
Diagramme de séquence d'autorisation WeChat
Installer et utiliser WeChat JS-SDK
Mise à jour du titre
Partage WeChat
Paiement WeChat
écran blanc

Très important :

Le routeur active le mode hachage, le hachage doit être # , tel que : https://example.com/#/home/index

En utilisant le mode historique, l'adresse URL modifiée ne peut pas être copiée une fois l'itinéraire de la page modifié.

Les paramètres sont obtenus sous la forme ? , tels que : https://example.com/#/product/detail?id=1

Si vous n'utilisez pas ? pour obtenir les paramètres, vous devez configurer de nombreux répertoires de sécurité des paiements.

Créez une nouvelle page pour obtenir wechat_openid, token et d'autres opérations. Les utilisateurs doivent accéder à la page auth.html après avoir entré le projet SPA pour la première fois, par exemple : créer un nouveau auth.html dans le dossier statique du répertoire racine. , Diagramme de séquence d'autorisation WeChat

Résolvez le problème de la nécessité de configurer de nombreux répertoires de sécurité des paiements (de nombreux documents sur Internet demandent d'ajouter ? sur la page de paiement, tels que : https://example.com/?#/payment/index?order_id=1 . Cela permettra rendre le routage très confus. I Il n'est pas recommandé d'utiliser le formulaire d' ? pour résoudre des problèmes de paiement)

Configuration de Nginx

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

Résoudre le problème de la page de saut window.location.href mise en cache par le navigateur

Les pages qui impliquent l'appel de JS-SDK doivent reconfigurer wx.config()

Tu sais ~

Diagramme de séquence d'autorisation WeChat :

is_auth : la description de l'existence d'is_auth a été redirigée via la page auth.html

Installer et utiliser WeChat JS-SDK

Méthode 1 (recommandée)

Introduisez le fichier JS-SDK de WeChat dans le fichier index.html d'entrée, référence de configuration du webpack : chinois/anglais

index.html

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

webpack.config.js

externals: {
  wx : 'wx'
}

Comment utiliser :

 import wx from 'wx'

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

Méthode 2

Comment installer :

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

Comment utiliser :

 import wx from 'weixin-js-sdk'

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

Mise à jour du titre

Après avoir changé de routage de page, vous devez ajouter une iframe au corps, puis supprimer l'iframe. Le code est le suivant.

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

Partage WeChat

La configuration du partage est correcte, mais la page ne s'affiche pas correctement après la saisie du lien.

Solution : ajoutez une chaîne aléatoire après l'adresse partagée, par exemple : https://example.com/#/product/detail?id=1&share_at=${Date.now()}

Code de référence de partage 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 )
} )

Paiement WeChat

Annuaire de sécurité des paiements, iOS identifie la règle de chemin de l'annuaire de sécurité des paiements comme l'URL correspondant à la première page entrant dans l'application SPA

URL saisie pour la première fois	Répertoire de sécurité obtenu par iOS
https://exemple.com/#/home/index	https://exemple.com/#/home/index
https://exemple.com/#/me/index	https://exemple.com/#/me/index
https://exemple.com/#/product/index	https://exemple.com/#/product/index

De cette façon, nous devons configurer de nombreux chemins de répertoire de sécurité, mais la plate-forme WeChat n'autorise que la définition de 3 chemins de répertoire de sécurité. L'accès direct à la page de l'application SPA ne fonctionnera pas.

Solution : les utilisateurs doivent d'abord entrer dans le répertoire racine de l'application SPA https://example.com/ , puis rediriger vers la page à laquelle ils souhaitent accéder via le hook fourni par le routage de l'application SPA, diagramme de séquence d'autorisation WeChat.

écran blanc

Il y a une certaine chance qu'un écran blanc apparaisse lorsque vous passez à d'autres pages immédiatement après le paiement WeChat (appuyez longuement sur l'écran pour copier l'adresse du texte ou de l'image), solution :

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

Il existe un bug dans le navigateur intégré de WeChat. Les images ne peuvent pas être téléchargées par lots, ce qui peut également être résolu via la méthode setTimeout .