Как внедрить wechat sdk в проект vue и использовать интерфейс обмена wechat

внешний интерфейс WeChat JavaScript Vue.js

Пишите впереди:

Чтобы сделать веб-страницы WeChat, мы в основном должны получить доступ к WeChat sdk, Когда я это делал, я тоже потратил много усилий, а затем я хотел записать это для себя, чтобы читать в будущем, и для друзей, которым нужно сделайте ссылку.Если вам это нравится, вы можете поставить лайк или подписаться на него, я надеюсь, что это поможет всем.

Эта статья была впервые опубликована в моем личном блоге:obkoro1.com

установить SDK

    npm install weixin-js-sdk --save

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

Общие шаги:

  1. Если vue вводит sdk, то он находится в компоненте маршрутизации, жизненном цикле компонента: поместите код в creatd() и Mount().

  2. Псевдокод, ознакомьтесь со всем процессом, что делать:

     //wx是引入的微信sdk
 wx.config('这里有一些参数');//通过config接口注入权限验证配置
 
 wx.ready(function() { //通过ready接口处理成功验证
 // config信息验证成功后会执行ready方法
     wx.onMenuShareAppMessage({ // 分享给朋友  ,在config里面填写需要使用的JS接口列表，然后这个方法才可以用 
         title: '这里是标题', // 分享标题
         desc: 'This is a test!', // 分享描述
         link: '链接', // 分享链接
         imgUrl: '图片', // 分享图标
         type: '', // 分享类型,music、video或link，不填默认为link
         dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
         success: function() {
             // 用户确认分享后执行的回调函数
         },
         cancel: function() {
             // 用户取消分享后执行的回调函数
         }
          });
         wx.onMenuShareTimeline({ //分享朋友圈
         title: '标题', // 分享标题
         link: '链接',
         imgUrl: '图片', // 分享图标
         success: function() {
             // 用户确认分享后执行的回调函数
         },
         cancel: function() {
             // 用户取消分享后执行的回调函数
         }
     });
 });
  wxx.error(function(res){//通过error接口处理失败验证
     // config信息验证失败会执行error函数
 });

Прочтите приведенный выше процесс несколько раз и получите представление о нем в целом. Самый важный шаг — внедрить разрешения в следующий интерфейс.

разрешения на инъекцию интерфейса конфигурации

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

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

Получить информацию о конфигурации конфигурации:

Чтобы получить вышеуказанную информацию, фронтенду не нужно делать слишком много, достаточно настроить интерфейс бэкенда. Серверная часть обработает эту информацию и вернет вам эти параметры через интерфейс. Вы должны пройти бэкэндПолный URL-адрес текущей перенаправленной страницы, серверная часть вернет вам указанную выше информацию, а затем вы сможете вызвать соответствующий интерфейс в соответствии с вашими потребностями для настройки содержимого.

Яма: URL

На что здесь следует обратить внимание, так это на проблему с url: если url будет передан неправильно, бэкенд тоже вернет информацию, но информация о подписи будет неверной.

Полный URL-адрес, упомянутый выше, относится к части «http(s)://» и «? ', за которой следует часть параметра GET, но не часть после хэша "#". в состоянии пройтиlocation.hrefчтобы получить.

Уведомление: Если в вашем проекте vue не включен режим истории на роуте, то есть ваш url содержит "#", в это время для корректного получения подписи от бэкенда вам необходимоУдалите символы после # на URL. （url去掉'#'hash部分，可用location.href.split('#')[0])

Пакет вызывает внедрение sdk:

Поскольку SDK необходимо внедрять в каждую страницу маршрутизации, его необходимо использовать повторно, иначе такой объем кода будет слишком большим, чтобы на него можно было смотреть.

Вот как я это делаю:

  1. потому что я поставил аксиосзавернутый в слойЗатем интерфейсы AXIOIOS, которые устанавливаются в Exmain.js vuue экземпляра.
  2. затем вглобальная функцияЭтот интерфейс вызывается внутри, а затем эта функция вызывается в соответствующем компоненте каждой страницы маршрутизации, и передается URL-адрес текущей страницы и другие заголовки, изображения и т. д.

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

Проверка подписи:

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

позже

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

наконец: Если вам нужно перепечатать, пожалуйста, поставьте ссылку на оригинальный текст и подпишите его. Кодировать не просто,благодарныйслужба поддержки! Я пишу статью с менталитетом биржевых записей, и не хочу ее рвать, но приветствую подсказки. Тогда я надеюсь, что друзья, которые прочитают это, кликнутподобно, также можноСфокусируйся наПроверить меня.личный блог and Персональная домашняя страница Nuggets

Выше 2017.12.16

Категории