wechat spa

Краткое изложение распространенных проблем и решений одностраничного приложения WeChat (SPA)

• Очень важно???
• Схема последовательности авторизации WeChat
• Установите и используйте WeChat JS-SDK
• Обновление названия
• WeChat поделиться
• WeChat Pay
• белый экран

Очень важно:

Маршрутизатор включает режим хеширования, хэш должен быть # , например: https://example.com/#/home/index

В режиме истории измененный URL-адрес невозможно скопировать после изменения маршрута страницы.

Параметры получаются в виде ? , например: https://example.com/#/product/detail?id=1

Если вы не используете ? для получения параметров, вам необходимо настроить множество каталогов безопасности платежей.

Создайте новую страницу для получения wechat_openid, токена и других операций. Пользователям необходимо перейти на страницу auth.html после первого входа в проект SPA, например: создать новый auth.html в статической папке корневого каталога. , Схема последовательности авторизации WeChat

Решите проблему необходимости настройки множества каталогов безопасности платежей (во многих материалах в Интернете говорится о добавлении ? на странице оплаты, например: https://example.com/?#/payment/index?order_id=1 . Это позволит сделать маршрутизацию очень запутанной. Не рекомендуется использовать форму ? для решения проблем с оплатой)

Конфигурация Nginx

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

Решите проблему кэширования страницы перехода window.location.href браузером.

Страницы, которые требуют вызова JS-SDK, должны перенастроить wx.config().

Знаешь~

Схема авторизации WeChat:

is_auth: описание существования is_auth было перенаправлено через страницу auth.html.

Установите и используйте WeChat JS-SDK

Способ 1 (рекомендуется)

Добавьте файл JS-SDK WeChat в файл index.html записи, ссылка на конфигурацию веб-пакета: китайский/английский.

index.html

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

вебпак.config.js

externals: {
  wx : 'wx'
}

Как использовать:

 import wx from 'wx'

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

Способ 2

Как установить:

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

WeChat поделиться

1. Конфигурация общего доступа правильная, но после ввода ссылки страница отображается неправильно.

Решение. Добавьте случайную строку после общего адреса, например: 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 )
} ) 

WeChat Pay

1. Каталог безопасности платежей. iOS определяет правило пути к каталогу безопасности платежей как URL-адрес, соответствующий первой странице входа в приложение SPA.

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 .

Отзыв о проблеме

Если есть какие-либо ошибки в содержании, пожалуйста, дайте мне отзыв, спасибо.

Если у вас есть вопросы, вы можете добавить меня в друзья и мы сможем общаться вместе.

Вопрос: 465353876