wechat spa

Summary of common problems and solutions for WeChat Single Page Application (SPA)

• Very important???
• WeChat authorization sequence diagram
• Install and use WeChat JS-SDK
• Title update
• WeChat share
• WeChat Pay
• white screen

Very important:

Router enables hash mode, hash must be # , such as: https://example.com/#/home/index

Using history mode, the changed URL address cannot be copied after the page route is changed.

The parameters are obtained in the form of ? , such as: https://example.com/#/product/detail?id=1

If you do not use ? to obtain parameters, you need to configure many payment security directories.

Create a new page to obtain wechat_openid, token and other operations. Users need to jump to the auth.html page after entering the SPA project for the first time, such as: create a new auth.html in the static folder of the root directory, WeChat authorization sequence diagram

Solve the problem of needing to configure many payment security directories (many materials on the Internet say to add ? on the payment page, such as: https://example.com/?#/payment/index?order_id=1 . This will make the routing very confusing. I It is not recommended that you use the form of adding ? to solve payment problems)

Nginx configuration

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

Solve the problem of window.location.href jump page being cached by the browser

Pages that involve calling JS-SDK must reconfigure wx.config()

You know~

WeChat authorization sequence diagram:

is_auth: is_auth existence description has been redirected through the auth.html page

Install and use WeChat JS-SDK

Method 1 (recommended)

Introduce WeChat's JS-SDK file in the entry index.html file, webpack configuration reference: Chinese/English

index.html

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

webpack.config.js

externals: {
  wx : 'wx'
}

How to use:

 import wx from 'wx'

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

Method 2

How to install:

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

How to use:

 import wx from 'weixin-js-sdk'

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

Title update

After switching page routing, you need to add an iframe to the body, and then remove the iframe. The code is as follows

 // 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 share

1. The sharing configuration is correct, but the page does not display correctly after entering the link.

Solution: Add a random string after the shared address, such as: https://example.com/#/product/detail?id=1&share_at=${Date.now()}

WeChat sharing reference code:

 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 Pay

1. Payment security directory, iOS identifies the payment security directory path rule as the URL corresponding to the first page entering the SPA application

URL entered for the first time	Security directory obtained by 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

In this way, we need to configure a lot of security directory paths, but the WeChat platform only allows the setting of 3 security directory paths. Directly entering the SPA application page will not work.

Solution: Users must first enter the root directory of the SPA application https://example.com/ , and then redirect to the page they want to access through the hook provided by the SPA application routing, WeChat authorization sequence diagram

white screen

There is a certain chance that a white screen will appear when jumping to other pages immediately after WeChat payment (long press the screen to copy the text or picture address), solution:

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

WeChat built-in browser bug, pictures cannot be uploaded in batches, which can also be solved through the setTimeout method

Problem feedback

If there is any error in the content, please give me feedback, thank you

If you have any questions, you can add me as a friend and we can communicate together.

QQ: 465353876