Недавно компания создала страницу H5 для голосования студентов. Она в основном используется в WeChat, и ей необходимо добавить функцию обмена WeChat;
В этой статье в основном описаны вопросы, требующие внимания при вызове интерфейса обмена WeChat;
1. Для платформы angular1, используемой во внешнем интерфейсе, сначала необходимо представить файл интерфейса WeChat на индексной странице;
<script src=http://res.wx.qq.com/open/js/jweixin-1.2.0.js></script>
2. Напишите функцию обмена WeChat в файле myApp.run. Обратите внимание, что этой функции необходимо получить и проанализировать URL-адрес текущей страницы, а затем отправить его на серверную часть для создания соответствующей подписи и прямой загрузки кода;
// Функция общего доступа WeChat function wxShare() { var url = $location.absUrl().split('#')[0]; wxServices.postWxShare(url).then(function (res) { if (res.data. код == 0) { var respanse = res.data.data; wx.config({ debug: false, // Когда режим отладки включен, возвращаемые значения всех вызовов API будут оповещены на стороне клиента. Если вы хотите просмотреть входящие параметры, вы можете открыть их на стороне ПК. Информация о параметрах будет распечатана через файл. log и appId будут печататься только на стороне ПК respanse.appId, timestamp: respanse.timestamp, // Обязательно, сгенерируйте временную метку подписи nonceStr: respanse.noceStr, // Обязательно, сгенерируйте случайную строковую подпись. подпись: respanse.signature,//Обязательно, подпись jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']//Обязательно, список JS-интерфейсов, которые необходимо использовать}); ) }После анализа текущего URL-адреса отправьте его на внутренний интерфейс. Серверному интерфейсу необходимо вернуть идентификатор приложения, метку времени, случайную строку и подпись, а затем при необходимости добавить список интерфейсов (jsApiList). форма массива. Я использую ее только здесь. Нужно вызвать интерфейс общего доступа;
При отладке вы можете изменить параметр debug на true, чтобы каждый раз при вызове интерфейса WeChat отображалась информация об интерфейсе, что позволяет легко проверить, является ли вызов интерфейса нормальным;
3. После этой функции настройте обмен контентом, код выглядит следующим образом;
wx.ready(function () { var obj = { title: 'Командное соревнование SPBCN начало голосовать!', // Поделиться title desc: 'Командное соревнование SPBCN начало голосовать, приходите поболеть за нас!', // Поделиться Описание ссылка: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // Поделиться ссылкой, доменное имя или путь ссылки должны соответствовать имени домена безопасности JS общедоступной учетной записи, соответствующему текущему страница // Эта ссылка является ссылкой перенаправления, поскольку необходимо получить код пользователя, но эта ссылка не может напрямую записать ссылку в WeChat для получения кода // Поэтому вам необходимо щелкнуть и перезагрузить новую страницу, чтобы реализовать перенаправление и снова открыть ее. Ссылка WeChat для получения кода, для реализации функции получения информации о пользователе: 'http://cdn.spbcn.org/img/logo-image.png', // Поделиться значком не удалось: function (res) { предупреждение(JSON.stringify(res)) }; } // 2.1 Отслеживание обмена с друзьями, нажатия кнопок, настраиваемый интерфейс обмена контентом и результатами обмена wx.onMenuShareAppMessage(obj) // 2.2 Мониторинг обмена с друзьями нажатиями кнопок, настраиваемый интерфейс обмена контентом и результатом wx.onMenuShareTimeline (obj); ; // 2.3 Отслеживание щелчков кнопок «Поделиться» и «QQ», настройка обмена контентом и интерфейса обмена результатами wx.onMenuShareQQ(obj); // 2.4 Отслеживание нажатия кнопки «Поделиться» на Weibo, настройка контента для обмена и интерфейса результатов обмена wx.onMenuShareWeibo(obj); // 2.5 Отслеживание нажатия кнопки «Поделиться» в QZone, настройка контента для обмена и интерфейса обмена wx; onMenuShareQZone (объект});wx.ready автоматически запускается после wx.config. Я определяю общий объект для обмена контентом, а затем вызываю его напрямую. Вы также можете определить другой контент для обмена с друзьями, кругом друзей, Weibo и т. д. При необходимости проверьте. Подробности в документации по интерфейсу WeChat;
Основное внимание уделяется ссылке для совместного использования. Ссылка должна находиться под безопасным доменным именем JS, установленным вашей официальной учетной записью, иначе обмен не будет успешным;
Признаками сбоя совместного доступа являются то, что изображение ссылки для общего доступа не может загрузить ваше настроенное изображение, а заголовок общего доступа неверен;
5. Мой проект предназначен для голосования, поэтому мне нужно получать код пользователя каждый раз, когда я нажимаю на него. Если вы просто делитесь статьей и вам не нужна информация о пользователе, просто измените ссылку на ссылку на вашу статью;
6. Для категории голосования я сделал здесь специальную обработку, то есть перенаправил ссылку. Все знают, что у H5 есть два способа получить информацию о пользователе WeChat: один — подписаться на официальную учетную запись WeChat, другой — запросить ссылку. user для получения общедоступной информации пользователя. Пользователь нажимает кнопку ОК. Однако оба они должны быть объединены в специальную ссылку WeChat в соответствии с требованиями WeChat. Таким образом, доменное имя поставляется с WeChat и не является безопасным для JS доменным именем нашей собственной официальной учетной записи;
7. Поэтому для общей ссылки, если вам все еще нужно получить пользовательский код, вы должны использовать другие методы для этого. Я использовал пустую страницу и после загрузки страницы перешел в WeChat для ее получения. ссылка на код: http://dev.spbcn.org/wechat-vote-phone/redirect.html Эта ссылка представляет собой пустую страницу. Код этой страницы следующий;
window.onload = функция () { // Ссылка перенаправления, аналогичная ссылке для получения кода пользователя в официальной учетной записи WeChat window.location.href=https://open.weixin.qq.com/connect/oauth2/authorize?appid=public account appid&redirect_uri =http%3A%2F%2Fdev.spbcn.org%2Fwechat-vote-phone?type=weixin&scope=snsapi_userinfo&response_type=code&state=STATE#wechat_redirect }8. У этого метода есть недостатки, то есть добавляет лишнюю пустую страницу. Хороший способ пока не придумал. Каждый может оставить сообщение;
9. Если этот шаг не добавлен, общая ссылка будет отображаться нормально, но код невозможно получить, а серверная часть не сможет определить пользователя, что приведет к невозможности ограничить пользователей от голосования;
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.