В недавнем проекте требовалось совместное использование WeChat и необходимость настройки контента для обмена WeChat. Поскольку я впервые столкнулся с обменом WeChat, я записал некоторые проблемы, возникшие в ходе этого процесса, а также весь процесс завершения. функция.
Ниже приведен общий процесс (детали размещены на каждом этапе):
npm install weixin-js-sdk --save-dev
Конкретные инструкции можно найти в официальной документации WeChat.
2. Инициализируйте обмен данными в WeChatПоскольку многие проекты, над которыми я работаю, требуют использования функции обмена WeChat, код, опубликованный в WeChat, будет инкапсулирован здесь.
API в приведенном ниже коде на самом деле является запросом axios.
import wx from 'weixin-js-sdk'import api from '@/api'const wxApi = { /** * [инициализация wxRegister WeChat Api] * @param {Function} callback [готовая функция обратного вызова] */ wxRegister (обратный вызов, url) { let query = { // URL-адрес здесь должен быть URL-адресом, который точно соответствует странице, которой вы хотите поделиться, а URL-адрес base64 необходимо преобразовать: url } api.getWxJsSdk(query).then(res => { let data = res.data wx.config({ debug: false, // Включаем режим отладки appId: data.appId, // Обязательно, уникальный идентификатор временная метка официального аккаунта: data.timestamp, // Обязательно, сгенерируйте временную метку подписи nonceStr: data.noceStr, // Обязательно, сгенерируйте случайную строку подписи: data.signature, // Обязательно, подпись, см. Приложение 1. jsApiList: data.jsApiList // Обязательно, список JS-интерфейсов, которые необходимо использовать, список всех JS-интерфейсов см. в Приложении 2 }) }) wx.ready((res) => { // При необходимости Настройте готовый метод обратного вызова if (callback) { callback() } }) },}Примечание. Если вам нужно преобразовать base64 выше, вы можете использовать js-base64.
3. Настройте WeChat для обмена персонализированным контентом (отправка друзьям, отправка в Moments).
Второй шаг — инициализировать конфигурацию упаковки для WeChat, но в ней по-прежнему отсутствуют соответствующие функции общего доступа и другие функции. Давайте улучшим ее здесь.
//Добавьте /*** после функции wxRegister [ShareTimeline пользовательская публикация WeChat в «Моментах»]* @param {[type]} option [поделиться информацией]* @param {[type]} Success [успешный обратный вызов]* @param {[ type]} error [обратный вызов сбоя]*/ShareTimeline (option) {wx.updateTimelineShareData({ title: option.title, // Ссылка на заголовок общего ресурса: option.link, // Поделиться ссылкой imgUrl: option.imgUrl, // Поделиться значком успешно () { // Установка успешна}, cancel () { // Настройка не удалась}})},/*** [ShareAppMessage Индивидуальный обмен WeChat с друзьями]* @ param {[тип]} опция [обмен информацией]* @param {[тип]} успех [успешный обратный вызов]* @param {[тип]} ошибка [обратный вызов при сбое]*/ShareAppMessage (опция) {wx.updateAppMessageShareData({ title: option.title, // Название общего ресурса desc: option.desc, // Ссылка на описание общего ресурса: option.link, // Ссылка на общий ресурс imgUrl: option.imgUrl, // Значок общего доступа, успех () { // Установка успешна}, cancel () { // Установка не удалась}})}4. При вызове страницы
// vue в качестве примера // Для следующих параметров функции обратитесь к приведенному выше методу. encode( window.location.href) wx.wxRegister(this.wxRegCallback,url)},methods:{ // Настраиваемый обратный вызов jdk wxRegCallback () {}, // Настраиваемая функция для обмена с друзьями wxShareAppMessage(){ let option = { title:'', // Описание заголовка общего ресурса: '', // Ссылка на описание общего ресурса: ' ', // Поделиться ссылкой imgUrl: '' // Значок общего доступа } // Внедрить общий метод wx.ShareAppMessage(option) }, // Настраиваемая функция общего доступа wxShareTimeline(){ let option = { title:'',// Название общего ресурса desc: '', // Ссылка на описание общего ресурса: '', // Ссылка общего доступа imgUrl: '' // Значок общего доступа} // Внедрить общий метод wx.ShareTimeline(опция) }}Выше описан процесс обмена информацией в WeChat. Если есть какие-либо недостатки, укажите на них.
Примечание:Совместное использование WeChat можно протестировать только на реальных устройствах.
Доменные имена, использующие формат localhost, не могут пройти проверку WeChat.
Подвести итогВыше представлена реализация совместного использования WeChat и пользовательского контента в HTML5, представленная редактором. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя.