Одностраничное приложение WeChat, пошаговое руководство по обмену

предисловие

Недавно во время разработки я столкнулся с ошибкой в обмене WeChat, то есть независимо от того, на какой странице вы находитесь, если вы отправите ее другу и нажмете, чтобы открыть, она перейдет только на домашнюю страницу проекта. Изначально обмен WeChat — это лишь небольшая функция, и ее легко решить, но из-за специфики проекта решить эту ошибку не так просто, поэтому я записываю ее для последующего чтения.

яма

Одностраничное приложение Vue, интерфейс управляет роутингом через Hash — iOS не может нормально изменить хеш-значение браузера в WeChat, а адрес общей страницы необъяснимым образом добавляется с параметрами.
Политика безопасности Wechat — из-за наличия ограничений доменного имени безопасности js отлаживать локально сложнее.
подпись конфигурации jssdk.

метод прыжков через яму

Адрес шаринга странно взят с параметрами

В традиционной разработке маршрутизация обычно выполняется в бэкэнде, но в одностраничном Vue переход между страницами контролируется управлением интерфейсом истории.В нашем проекте мы используем метод хеширования, но после того, как я поделился с друзьями, я обнаружил, что адрес обмена был добавлен с некоторыми параметрами, такими как:

Адрес, которым я поделился:market.lenkuntang.cn/#/home, после обмена становитсяmarket.lenkuntang.cn/?from=singlemessage#/home. Повлияет ли это на наши операции по обмену? Это для понимания принципа работы vue-router.Я просмотрел исходный код vue-router и нашел следующий код:

// this is delayed until the app mounts
  // to avoid the hashchange listener being fired too early
  setupListeners () {
    const router = this.router
    const expectScroll = router.options.scrollBehavior
    const supportsScroll = supportsPushState && expectScroll

    if (supportsScroll) {
      setupScroll()
    }

    window.addEventListener(supportsPushState ? 'popstate' : 'hashchange', () => {
      const current = this.current
      if (!ensureSlash()) {
        return
      }
      this.transitionTo(getHash(), route => {
        if (supportsScroll) {
          handleScroll(this.router, route, current, true)
        }
        if (!supportsPushState) {
          replaceHash(route.fullPath)
        }
      })
    })
  }

hash.js

Получается, что при инициализации vue-router будет слушатьwindowобъектhashchangeсвойства, если вы хотите узнатьhashКогда значение изменится, он будет вызванHistory.transitionToметод, ключ в том, что этот метод будет проходить вgetHashметод в качестве параметра, если по этому адресуmarket.lenkuntang.cn/?from=singlemessage#/homeтакже получить правильныйhashЕсли это так, то мы можем сделать вывод, что эта авария не влияет на наше совместное использование. как мы продолжаем видетьgetHashметод, вhash.jsПрокрутите вниз, чтобы найти реализацию этого метода:

export function getHash (): string {
  // We can't use window.location.hash here because it's not
  // consistent across browsers - Firefox will pre-decode it!
  const href = window.location.href
  const index = href.indexOf('#')
  return index === -1 ? '' : href.slice(index + 1)
}

Мы можем ясно знать, что когда этот адресmarket.lenkuntang.cn/?from=singlemessage#/homeпроходить черезgetHashвернется сразу после#Строка после числа, т.е./home, поэтому можно сделать вывод, что это не повлияет на наши общие функции.

Адрес браузера iOS остается неизменным в среде WeChat

Маршрутизация внешнего интерфейса в Vue-router управляется новым интерфейсом History Interface HTML5 для управления переходом между страницами.windowсерединаloactionизhashСвойство отражает адрес браузера, но неожиданно обнаружило это при обнаружении iOS.hashАтрибут не был изменен, поэтому адрес, который каждый раз расшаривается, является домашней страницей. После поиска в Интернете выясняется, что это распространенная проблема. Решение состоит в том, чтобы ввести JsSDK WeChat для ручного управления общим адресом. .

Проблемы, вызванные внедрением JsSDK

После введения JsSDK сначала необходимо его настроить.Соответствующие элементы конфигурации следующие:

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

Объясните, откуда здесь берутся параметры: appId берется из публичного аккаунта WeChat.timestampа такжеnonceStrа такжеsignatureвозвращается с сервера. jsApiList можно найти вСписок всех интерфейсов JSнайти в.

Примечание:timestampа такжеnonceStrНа самом деле его можно сгенерировать во внешнем интерфейсе, а затем передать на сервер для участия в вычислении подписи, но в целом с учетом соображений безопасности,timestamp, nonceStrЭти параметры должны быть возвращены с сервера (поскольку он участвует в расчете подписи).

Примечание: поле входящей случайной строки здесьnonceStrдаГорбовое именование! ! !

Затем возникает самая большая проблема, возникающая при внедрении JsSDK — проблема подписи.Чтобы правильно реализовать использование JsSDK, вы должны сначала собрать эти четыре элемента на стороне сервера:

noncestr (случайная строка)
jsapi_ticket (билет, полученный через интерфейс WeChat)
отметка времени (отметка времени)
URL-адрес (URL-адрес текущей веб-страницы, за исключением # и его следующих частей)

Затем поместите эти элементы в лексикографическом порядке (код ASCII от меньшего к большему), а затем используйте формат пары ключ-значение URL (т.е. ключ1=значение1&ключ2=значение2...) для соединения в строку, а затем зашифруйте строку с помощью sha1, имя поля и значение поля Оба используют исходное значение без экранирования URL, чтобы получить так называемую подпись.

Примечание: поле входящей случайной строки здесьnoncestrда全小写！ ! !

Наконец, прикрепите адрес средства проверки подписи:Tickets.WeChat.QQ.com/debug/CGI-no…

Также пример кода:demo.open.WeChat.QQ.com/Быстрые вычисления/Сэм побежал…

После получения подписиtimestamp,nonceStrа такжеsignatureОн отправляется обратно во внешний интерфейс для первоначальной настройки JsSDK.

Поговорим о вычислении подписанного URL

Давайте поговорим об url, участвующем в подписи здесь, потому что здесь передается URL текущей встречи и не включает # и его следующие части, что является хорошей новостью для одностраничных приложений, использующих режим Hash, а значит, нам нужно только для использования страницы Его можно использовать на всех страницах после того, как он будет инициализирован один раз во время загрузки (для традиционной навигации по маршруту, поскольку URL-адрес изменился, его необходимо повторно инициализировать, то есть фоновый интерфейс должен быть повторно запрашивается получение подписи на странице, которая использует функцию JsSDK инициализация!!). Так что, как правило, мыApp.vueЭтот файл используется для инициализации JsSDK.При правильной инициализации функции интерфейса JsSDK можно использовать непосредственно на других страницах.

Кроме того, поскольку использование JsSDK в WeChat ограничено областью действия имени домена безопасности интерфейса JS, установленного в общедоступной учетной записи WeChat,localhostДоменное имя невозможно, прямая подсказкаinvalid url domain, есть два способа решить эту проблему, один из них - изменитьhostметод для достижения локальной отладки, метод заключается в следующем:

система окон:

Войдите в каталог системного диска (обычно это диск C):C:\Windows\System32\drivers\etc,оказатьсяhostsфайл, добавить запись в конец файла после открытия127.0.0.1 market.lenkuntang.cn, эта запись означает, что при посещенииmarket.lenkuntang.cnЭтот адрес будет перенаправлен на127.0.0.1Этот IP-адрес для достижения цели локальной отладки.

система Mac

Откройте Finder, затем нажмите комбинацию клавиш + Shift + G, введитеprivate/etc/hostsПосле нажатия Enter вы можете найти соответствующий файл hosts.Из-за проблемы с правами вы не можете напрямую изменять файл hosts в этом каталоге, поэтому вам нужно скопировать файл на рабочий стол или в другой каталог с разрешениями на изменение, а затем открыть его. , аналогично window.добавить запись в конец файла127.0.0.1 market.lenkuntang.cn, после сохранения перетащите его обратно в исходный каталог, чтобы подтвердить перезапись.

Другой состоит в том, чтобы использовать онлайн-веб-идею лаборатории Tencent Cloud's Glouder, чтобы войти в тестовый сервер, а затем непосредственно изменять сервер и проверять его онлайн. Однако, поскольку в данный момент эта веб IDE не поддерживает логин клавиш SSH, вы можете войти только с номером учетной записи и паролем. Так что есть определенные ограничения.

Прикрепите адрес веб-IDE Инструменты:cloud.Tencent.com/developer/com…

Нажмите на одно из руководств, затем выберите «Начать».использовать существующиеВкладка «Облачный хостинг», правильно введите IP-адрес и пароль учетной записи вашего сервера во всплывающем интерфейсе входа в систему, вы можете напрямую войти на сервер для выполнения соответствующих операций.

интерфейс входа

Интерфейс после успешного входа

Используйте инструменты разработчика WeChat для локальной отладки

После того, как мы все настроили, откройте браузер, и мы увидим соответствующую информацию JsSDK в выводе консоли, но мы не знаем, сможем ли мы поделиться ею правильно, нужно ли нам использовать мобильный телефон для доступа к локальному сервис каждый раз Верифицировать? Более того, при использовании мобильного телефона для доступа к локальному сервису используется IP-адрес локального компьютера, поэтому получать подпись таким способом однозначно неправильно, и об этом будет сообщено.invalid url domainНеправильно, конечно можно сменить телефонhosts, но это не так просто изменить, если Android требует рута, если это Apple... забудьте об этом. Или по-другому, в настоящее время мы должны использовать инструмент разработчика WeChat для отладки.Инструмент разработчика WeChat может имитировать среду WeChat и выполнять операции, которые думает WeChat, поэтому с помощью этого инструмента мы можем успешно отлаживать локально.

Более того, при обнаружении страницы, требующей входа в WeChat, способ открытия ее в обычном браузере приведет к переходу на страницу входа в систему авторизации WeChat, а при использовании инструмента разработчика для ее открытия откроется страница авторизации, как на мобильном телефоне:

Открыть в обычном браузере

Инструменты разработчика WeChat

Суммировать

Благодаря исследованию обмена WeChat за последние несколько дней у меня есть общее понимание и понимание использования JsSDK WeChat, Хотя есть много ям и проблем, поскольку проблема возникает, мы можем только попытаться максимально упростить ее. , проблему, а затем решить ее.