Научите вас, как реализовать обмен H5 WeChat

внешний интерфейс WeChat

Введение

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

поделиться здесьwechat красный конвертНапример, я научу вас, как реализовать авторизацию и совместное использование WeChat.

Шаг 1. Сбор информации о пользователе

1. Зарегистрируйте тестовый официальный аккаунт

мы вhttps://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/loginВы можете подать заявку на тестовую учетную запись, и вы можете увидеть наш appId и другую информацию на странице управления тестовой учетной записью.Есть возможность изменить информацию о конфигурации интерфейса, которую нам необходимо заполнить.

avatar

Здесь мы должны побеспокоить внутренних студентов, чтобы они предоставили нам URL-адрес и токен (URL-адрес — это URL-адрес интерфейса, который разработчики используют для получения сообщений и событий WeChat. Токен может быть заполнен разработчиками и использоваться для создания подписей) Токен будет сравниваться с токеном, содержащимся в URL-адресе интерфейса, для проверки безопасности.

2. Авторизация на веб-странице WeChat

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

avatar

Нажмите, чтобы изменить, чтобы ввести:

avatar

Добавьте доменное имя вашей веб-страницы.После завершения настройки мы получим доступ к этому пути.https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirectможет получитьcodeзначение, чтобы получить личную информацию, такую ​​как openid.

3. Измените путь после настройки

① .appidдля нас в тестовом номереappid

② .redirect_uri为我们页面路径，访问微信提供的路径会获取code值重定向到我们页面路径（这里的url需要进行обработка urlEncode`)

③ .scopeЕсть два значения:

  • snsapi_baseПри тихой авторизации пользователь не воспринимает, а может только получитьopenid, другой информации нет.
  • snsapi_userinfoЭто всплывающее окно с запросом на авторизацию, и вы можете получить его после подтверждения авторизации.openidА потом получить никнейм, аватарку и прочую информацию

Таким образом, мы можем авторизовать информацию о пользователе:

avatar

возможные проблемы

  • scopeпараметр неправильный или нетscopeразрешения, проверьтеscopeназначение параметровsnsapi_baseилиsnsapi_userinfo
  • redirect_uriЕсли параметр неверный, проверьте проблему с конфигурацией доменного имени на странице авторизации веб-страницы и обратите внимание на пробел при копировании
  • response_typeНеверный параметр, проверьте, выполняется ли URL-адресurlEncodeиметь дело с

Шаг 2. Использование WeChat JS-SDK

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

1. Настройка безопасного доменного имени js

Используйте JS-SDK, чтобы сначала найти имя домена безопасности интерфейса JS тестового номера и настроить доменное имя, используемое на странице.

avatar

2. Представьте JS-SDK

В проекте мы вводим ресурсы JS-SDk, доступ к которым можно получить черезhttp://res.wx.qq.com/open/js/jweixin-1.4.0.js(поддержка https) Или импортировать по модульной загрузкеimport wx from 'weixin-js-sdk'

3. Получите конфигурацию конфигурации подписи

На этом этапе нам также нужна поддержка со стороны студентов RD, чтобы предоставить интерфейс подписи WeChat.Подробности см. На рисунке ниже.

avatar

После получения подписи устанавливаем конфиг.После завершения настройки конфига будет вызван метод ready и мы сможем выполнять обработку бизнес логики в методе ready.

Шаг 3. Общий доступ к интерфейсу

getSignature (){ //获取微信签名
  return new Promise((resolve, reject)=>{
    Axios.get(API.getWechatSign,{
    params:{
      appid: appId,
      url: window.location.href.split('#')[0]
    } 
    }).then( res => {
      resolve(res.data)
    }).catch((err)=>{
      reject(err)
    })
  })
},
async setWx(){
  let res = await this.getSignature()
  let {timestamp, nonceStr, appId, signature} = res
  wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: appId, // 必填，公众号的唯一标识
    timestamp: timestamp, // 必填，生成签名的时间戳
    nonceStr: nonceStr, // 必填，生成签名的随机串
    signature: signature, // 必填，签名
    jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表
  });
  wx.ready(() => {
    wx.onMenuShareTimeline({
      title: '测试分享', // 分享标题
      link: window.location.href,// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: 'http://icon.mobanwang.com/UploadFiles_8971/200910/20091011134333685.png',// 分享图标
      success: function() {
        // 用户点击了分享后执行的回调函数
      }
    });
    wx.onMenuShareAppMessage({
      title: '测试分享', // 分享标题
      desc: '一个测试的分享!!!', // 分享描述
      link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: 'http://icon.mobanwang.com/UploadFiles_8971/200910/20091011134333685.png', // 分享图标
      type: "", // 分享类型,music、video或link，不填默认为link
      dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
      success: function() {
        // 用户点击了分享后执行的回调函数
      }
    })
  })
}

Таким образом, мы реализуем обмен WeChat, эффект следующий: Поделиться с друзьями

avatar

Поделиться с друзьями

avatar

Общая проблема

  1. invalid url domainПроверьте правильность имени домена безопасности js.
  2. invalid signatureПроблема довольно обширная:
    • Проверьте правильность интерфейса подписи, WeChat предоставляет инструменты проверкиhttp://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
    • configПроблема с китайской орфографией, обратите внимание на заглавные буквыnonceStr
    • При входеurlПуть не может содержать'#'hashчасть
    • Имя домена общей ссылки должно совпадать с именем домена безопасности общедоступной учетной записи js.
    • debugпоказыватьconfig：okНо обмен не имеет никакого эффекта, проверьте метод обмена иjs-sdkВерсия

напиши в конце

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

еще хочу сказать

Разработка всего проекта включает в себя большую часть конечной поддержки.В качестве примера возьмем Kuaigou Taxi, есть сторона водителя, сторона пользователя, оплата и т. д. Функция обмена WeChat выделена в независимую службу для достижения унификации и стандартизации для поддержки использования различных направлений бизнеса.

Категории