wechat spa

Ringkasan masalah umum dan solusi untuk Aplikasi Satu Halaman WeChat (SPA)

• Sangat penting???
• Diagram urutan otorisasi WeChat
• Instal dan gunakan WeChat JS-SDK
• Pembaruan judul
• Bagikan WeChat
• Pembayaran WeChat
• layar putih

Sangat penting:

Router mengaktifkan mode hash, hash harus # , seperti: https://example.com/#/home/index

Menggunakan mode riwayat, alamat URL yang diubah tidak dapat disalin setelah rute halaman diubah.

Parameter yang didapat berupa ? , seperti: https://example.com/#/product/detail?id=1

Jika Anda tidak menggunakan ? untuk mendapatkan parameter, Anda perlu mengkonfigurasi banyak direktori keamanan pembayaran.

Buat halaman baru untuk mendapatkan wechat_openid, token, dan operasi lainnya. Pengguna harus melompat ke halaman auth.html setelah memasuki proyek SPA untuk pertama kalinya, seperti: membuat auth.html baru di folder statis direktori root , diagram urutan otorisasi WeChat

Selesaikan masalah perlunya mengkonfigurasi banyak direktori keamanan pembayaran (banyak materi di Internet mengatakan untuk menambahkan ? pada halaman pembayaran, seperti: https://example.com/?#/payment/index?order_id=1 . Ini akan membuat peruteannya sangat membingungkan. I Tidak disarankan Anda menggunakan formulir ? untuk menyelesaikan masalah pembayaran)

Konfigurasi Nginx

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

Selesaikan masalah halaman lompat window.location.href yang di-cache oleh browser

Halaman yang melibatkan pemanggilan JS-SDK harus mengkonfigurasi ulang wx.config()

Kamu tahu~

Diagram urutan otorisasi WeChat:

is_auth: deskripsi keberadaan is_auth telah dialihkan melalui halaman auth.html

Instal dan gunakan WeChat JS-SDK

Metode 1 (disarankan)

Perkenalkan file JS-SDK WeChat di file entry index.html, referensi konfigurasi webpack: Mandarin/Inggris

indeks.html

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

webpack.config.js

externals: {
  wx : 'wx'
}

Cara menggunakan:

 import wx from 'wx'

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

Metode 2

Cara menginstal:

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

Cara menggunakan:

 import wx from 'weixin-js-sdk'

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

Pembaruan judul

Setelah berpindah perutean halaman, Anda perlu menambahkan iframe ke isi, lalu menghapus iframe. Kodenya adalah sebagai berikut

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

Bagikan WeChat

1. Konfigurasi berbagi sudah benar, tetapi halaman tidak ditampilkan dengan benar setelah memasukkan link.

Solusi: Tambahkan string acak setelah alamat bersama, seperti: https://example.com/#/product/detail?id=1&share_at=${Date.now()}

Kode referensi berbagi 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 )
} ) 

Pembayaran WeChat

1. Direktori keamanan pembayaran, iOS mengidentifikasi aturan jalur direktori keamanan pembayaran sebagai URL yang sesuai dengan halaman pertama yang masuk ke aplikasi SPA

URL dimasukkan untuk pertama kalinya	Direktori keamanan diperoleh 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

Dengan cara ini, kita perlu mengkonfigurasi banyak jalur direktori keamanan, tetapi platform WeChat hanya mengizinkan pengaturan 3 jalur direktori keamanan secara langsung memasuki halaman aplikasi SPA tidak akan berfungsi.

Solusi: Pengguna harus terlebih dahulu masuk ke direktori root aplikasi SPA https://example.com/ , lalu mengarahkan ulang ke halaman yang ingin mereka akses melalui hook yang disediakan oleh perutean aplikasi SPA, diagram urutan otorisasi WeChat

layar putih

Ada kemungkinan layar putih akan muncul ketika melompat ke halaman lain segera setelah pembayaran WeChat (tekan lama layar untuk menyalin teks atau alamat gambar), solusinya:

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

Bug browser bawaan WeChat, gambar tidak dapat diunggah secara berkelompok, yang juga dapat diselesaikan melalui metode setTimeout

Umpan balik masalah

Jika ada kesalahan pada konten, mohon berikan masukan kepada saya, terima kasih

Jika Anda memiliki pertanyaan, Anda dapat menambahkan saya sebagai teman dan kita dapat berkomunikasi bersama.

QQ: 465353876