Во время разработки публичных аккаунтов WeChat у меня раньше не было опыта разработки, связанной с WeChat, поэтому я попадал в ловушки и лез в ловушки. Однако это также значительно расширило моё знакомство с публичными и официальными документами WeChat.
Дорога к ямеОшибка 1. Проблемы с одностраничным SPA и внутренней маршрутизацией.
Подводный камень 2: существует высокая вероятность того, что Android не сможет активировать оплату WeChat (не удалось внедрить пакет WeChat js-sdk).
В официальной документации WeChat: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6.
Есть такая ДЕМО:
function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { appId:wx2421b1c4370ec43b, //Имя официального аккаунта, переданное продавцом timeStamp:1395712654, //Отметка времени, количество секунд с 1970 года nonceStr:e61463f8efa94090b1f366cccfbbb444, //Случайная строка package:prepay_id=u802345jgfjsdfgsdg888, SignType:MD5, //Метод подписи WeChat: paySign:70EA570631E4BB79628FBCA90534C63FF7FADD89 //Подпись WeChat}, function(res){ if(res.err_msg == get_brand_wcpay_request:ok ){ //Используйте описанный выше метод для определения возврата от внешнего интерфейса. Команда WeChat торжественно напоминает: //res. err_msg будет использоваться, когда пользователь успешно оплатит. Возвращает ОК, но его абсолютная надежность не гарантируется. } }): onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady }}else { onBridgeReady();});После того, как внутренний коллега успешно авторизовал код, он с радостью разместил этот код на странице активности и отправил сборку на тестирование. Что ж, у Apple нет проблем, и у Android, похоже, нет проблем. Однако Android иногда не может адаптироваться. платеж, и сначала я подумал, что это версия WeChat. Есть и другие причины, но вероятность успеха слишком мала. Это можно сделать только один раз в 10 раз. Должно быть, из-за кода. Измените это.
Решение:Откройте инструменты разработчика WeChat, зарегистрируйтесь и, наконец, на этом этапе обнаружите, что if (typeof WeixinJSBridge == undefined)
1.ios может активировать js-sdk браузера WeChat.
2. Большинство Андроидов перешли в неопределённый режим.
На самом деле, я не знаю здесь причину. Лично я считаю, что это проблема встроенной браузерной версии WeChat Android и метода WeixinJSBridge. (Надеюсь, кто-нибудь сможет мне ответить)
Поскольку js-sdk нельзя настроить, давайте введем конфигурацию вручную // Так что иногда лениться хлопотнее, извлеките урок
if (typeof WeixinJSBridge == undefined) { console.log( WeixinJSBridge); if( document.addEventListener ) { document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); }else if (document.attachEvent){ document.attachEvent(' WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady }}else { onBridgeReady();}); Vue представляет пакет WeChat js-sdk npm я -S weixin-js-sdk
Импортируйте модуль на страницу, которую необходимо представить.
импортировать wx из «weixin-js-sdk»
Конфигурация (см. официальную документацию WeChat: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115):
wx.config({ debug: true, // Включаем режим отладки. Возвращаемые значения всех вызовов API будут оповещены на стороне клиента. Если вы хотите просмотреть входящие параметры, вы можете открыть его на стороне ПК . Информация о параметрах будет выведена через журнал. Она будет распечатана только на стороне ПК. appId: '', // Обязательно, уникальный идентификатор официальной метки времени: , // Обязательно, метка времени сгенерированной подписи. noceStr: '', // Обязательно, временная метка сгенерированной подписи. Случайная строковая подпись: '', // Обязательно, подпись jsApiList: [] // Обязательно, список JS-интерфейсов, которые нужно использовать. Например, если я хочу вызвать платежный интерфейс, это [chooseWXPay]});Здесь временная метка — строчная, s — строчная, а тип данных — int.
Теперь, когда настройка прошла успешно, продолжайте читать официальную документацию.
В официальной документации написано, что есть готовый метод. После успешной проверки конфига в него помещается интерфейс для обеспечения выполнения.
wx.ready(function(){ // Готовый метод будет выполнен после проверки информации о конфигурации. Все вызовы интерфейса должны выполняться после того, как интерфейс конфигурации получит результат. config — это асинхронная операция на стороне клиента, поэтому, если вы необходимо вызвать соответствующий интерфейс при загрузке страницы, соответствующий интерфейс должен быть вызван в функции готовности, чтобы обеспечить правильное выполнение. Для интерфейсов, которые вызываются только при запуске пользователем, их можно вызывать напрямую, и в этом нет необходимости. помещен в готовую функцию });Готовые параметры импорта (обратите внимание на тип данных и хорошо сотрудничайте с коллегами по серверной части - -)
wx.chooseWXPay({timestamp: 0, // Временная метка подписи платежа. Обратите внимание, что все поля временной метки, используемые в WeChat jssdk, написаны строчными буквами. Однако имя поля timeStamp, используемое последней версией фонового платежа для создания подписей, должно быть с заглавной буквы S символ nonceStr: '', // Случайная строка платежной подписи длиной не более 32 бит package: '', // Значение параметра prepay_id, возвращаемое единым платежным интерфейсом, формат отправки: prepay_id=/*/*/*) SignType: '', // Метод подписи, по умолчанию - 'SHA1', необходимо передать ' MD5' при использовании новой версии платежа paySign: ' ', // Успешная подпись платежа: функция (res) {// Функция обратного вызова после успешной оплаты}}); Прикреплено мое демоПри использовании данных в готовом виде Vue я случайно попал в яму, на которую указывает это. Если привязка не добавлена, параметры в wx.chooseWXPay не могут получить данные, запрошенные из бэкэнда. Это, естественно, не указывает на VueComponent. получить данные, которые я присвоил объекту массива this.wx_config после запроса.
getConfig(){ wx.config({ debug: this.wx_config.debug, // Включаем режим отладки. Возвращаемые значения всех вызываемых API будут оповещены на стороне клиента. Если вы хотите просмотреть входящие параметры , вы можете открыть его на стороне ПК, информация о параметрах будет распечатана через журнал и будет распечатана только на стороне ПК appId: this.wx_config.appId, // Обязательно, уникальный идентификатор официальной метки времени учетной записи. : this.wx_config.timestamp, // Обязательно, сгенерируйте временную метку подписи nonceStr: this.wx_config.nonceStr, // Обязательно сгенерируйте случайную строку подписи подписи: this.wx_config.signature, // Обязательно, подпись jsApiList: this.wx_config.jsApiList // Обязательно Заполните список JS-интерфейсы, которые необходимо использовать}); // Оплата WeChat wx.ready(function() { // console.log(this.jsApiCall()); wx.chooseWXPay({ timestamp: this.wechat_code.timestamp, nonceStr:this.wechat_code.nonceStr, package: this.wechat_code.package, SignType: this.wechat_code.signType, paySign: this.wechat_code.paySign, успех: функция () { // Функция обратного вызова после успешного платежа (платеж успешен); window.location.href = /hd/becomevip; }, отмена: function() { alert(ошибка платежа } }); }.bind(this)); Подведите итог:Подводя итог, не поступайте правильно только потому, что боитесь неприятностей~
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.