Научит вас, как создать публичный аккаунт WeChat

Многие люди должны задаться вопросом, почему люди не имеют документа, вы смотрите на это не? Не имела намерения написать эту статью, есть день для копания друзей послал кипящую точку в Денвере, сказала, что общественность, как правило, означает количество разработчиков можно считать техническими (потому что бедная публичная документация по разработке веб-разработчика). Иногда много людей видят технологию Group также задавать вопросы; они все еще пишут о微信授权登录а также微信分享так же как微信支付.

Подготовка перед разработкой

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

Зарегистрировать аккаунт

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

Привязать аккаунт разработчика

1. Войдите на платформу разработчика WeChat и найдите ее в левой строке меню.开发-->开发者工具, нажмите, чтобы войти.
2. Нажмитеweb开发者工具, это для привязки нашего аккаунта разработчика в WeChat, что удобно для последующей отладки.

Скачать инструменты разработки и отладки

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

Авторизованный вход в WeChat

После того, как подготовка завершена, мы можем приступить к разработке, и необходимо выполнить разработку общедоступного аккаунта.微信网页授权,分享给好友,分享到朋友圈, часть подойдет微信支付Функция. Поделитесь этим ниже微信网页授权Процесс развития.

Безопасные настройки домена

1. Авторизуйтесь на фоне официального аккаунта, и в левой строке меню найдите следующее:设置-->公众号设置, после входа на страницу выберите功能设置, настроить егоИмя домена безопасности интерфейса JSа такжеАвторизованное доменное имя веб-страницы, правила настройки следующие:

имя конфигурации	правило	использовать
Имя домена безопасности интерфейса JS	Доменное имя должно пройти проверку записи ICP и должно быть загружено`MP_verify_jhf9FhUVRNDnBE96.txt`Поместите его в корневой каталог, на который указывает настроенное доменное имя.	При доступе к странице под этим доменным именем в WeChat она не будет переставлена. Когда пользователи вводят это доменное имя, не появляется запрос безопасности
Авторизованное доменное имя веб-страницы	нужно это`MP_verify_jhf9FhUVRNDnBE96.txt`Поместите его в корневой каталог доменного имени	Должна быть настроена авторизация на веб-странице WeChat.

Процесс входа

Процесс входа в WeChat:

Код ключа фронтенда следующий (для удобства написания предлагается использоватьjqueryиз$ajax):

<script>
     //获取地址栏参数
    function GetURL(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    };

    //获取url中code参数
    let code = GetURL('code');

    //如果没有code，转跳到授权页进行授权
    if(!code){
         let url = window.location.href;
         let appid = 'abckdeh129292'; //公众号appid，在微信公众号后台中可以查看
        window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri=' + url + '&response_type=code&scope=snsapi_base&state=123#wechat_redirect';
    }

    //如果有code
    $.ajax({
        url: "https://test.abcd.com/api/WXUserInfo",
        data: { code,},
        type: "get",
        dataType: "json",
        success: function (res) {
            //code可用，拿到用户信息
            if (res.status) {  
                userInfo = res.data;
            }else{
                //code过期，需要重新授权
                 window.location.href = 'http://test.abcd.com/juejin/index.html'
            }
        });  
    });

</script>

Описание параметра: При переходе на страницу авторизации про параметры сплайсинга много говорить не буду, если интересно, можете глянуть 👉официальная документация
Распространенные коды ошибок возврата:
- 10003 Проверьте правильность конфигурации имени домена фонового обратного вызова.
- 10005 В официальном аккаунте не включена эта возможность
- 10009 Частые операции, это мало связано с фронтендом, проверьте логику на бэкенде

Информация о пользователе

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

имя параметра	описывать
openid	Уникальный идентификатор пользователя
nickname	Ник пользователя
sex	Пол пользователя, значение 1 — мужской, значение 2 — женский, а значение 0 неизвестно.
province	Провинция, в которой заполняется личная информация
city	Город, заполненный общим профилем пользователя
country	Страна, такая как Китай, это CN
headimgurl	изображение профиля
privilege	Информация о правах пользователя
unionid	ID пользователя

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

Вы, должно быть, видели веб-страницы, отправленные вашим друзьям WeChat.标题,介绍так же как缩略图, что полезно для пользователей, чтобы понять некоторую информацию о странице перед входом на страницу. Пишите сюда, чтобы поделиться с друзьями WeChat и поделиться с Моментами, других можно увидеть 👉официальная документация.js-sdkПримеры доступны в WeChat 👉пример демо.

Процесс развития

1. Настройте имя домена безопасности js (конкретный метод настройки был объяснен выше)
2. Представьтеjs-sdk

    //页面中引入js-sdk
     <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

    //vue或者react 也可以插件安装
    npm install weixin-js-sdk 或 yarn add weixin-js-sdk

3. Введите конфигурацию проверки разрешений через интерфейс конфигурации и обработайте успешно или неудачно.

    //拿到config接口注入权限验证参数，这些参数都由后端返回
    $.ajax({
        url: "https://test.abcd.com/api/wxconfig",
        data: { url:window.location.href},
        type: "get",
        dataType: "json",
        success: function (data) {
            //
            wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appId, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature,// 必填，签名
                jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData',] // 必填，需要使用的JS接口列表 如果要做分享给好友和分享到朋友圈就写这两个
            });

            //配置验校成功处理函数
            wx.ready(function(){
                  const link = "www.test.com/index.html",
                        title = '掘金邀请你参加打卡活动',
                        desc = '掘金邀请你参加打卡活动，奖品丰富，快来看看吧！',
                        imgUrl = 'http://www.test.com/images/share.jpg';

                //分享给好友
                wx.updateAppMessageShareData({ 
                    title, // 分享标题
                    desc, // 分享描述
                    link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl, // 分享图标
                    success: function () {
                      // 设置成功处理函数
                    }
                });
                //分享到朋友圈
                wx.updateTimelineShareData({ 
                    title, // 分享标题
                    link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl, // 分享图标
                    success: function () {
                      // 设置成功处理函数
                    }
                })
            });
            //配置失败函数
            wx.error(function(res){
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            });
           
        });  
    });

⚠️ Меры предосторожности

Чтобы открыть во время отладкиdebug, в противном случае возвращаемая информация не будет отображаться после сбоя.Большинство распространенных ошибок связано с проблемой расчета подписи на бэкэнде.Если есть проблема, просто скопируйте информацию об ошибке в поисковую систему и посмотрите метод обработки.
WeChatjs-sdkОн не имеет ничего общего с авторизацией веб-страницы WeChat и может использоваться без авторизации.js-sdk.
Функция обработки успеха обмена WeChatЭто означает только то, что пользователь нажимает кнопку «Поделиться», это не означает, что им действительно делятся с друзьями, пока вы нажимаете в правом верхнем углу, чтобы поделиться,successфункция выполнится. Как правило, поощрительный обмен заключается в том, чтобы передавать параметры после обмена.После того, как пользователь поделится, друзья входят и обрабатывают соответствующие услуги.

конец

я собирался написать微信支付, но статья будет длиннее, приберегите на следующий раз. Если у вас есть какие-либо вопросы, вы можете связаться со мной в разделе комментариев. Добро пожаловать, чтобы подписаться 👉Обратите внимание на интерфейс 365: Поделитесь советами по интерфейсу и некоторыми проблемами в процессе разработки. После прочтения не забудьте подписаться + добавить в избранное + лайк, скоро будет здесьLV3Да, спасибо за поддержку~