Весь процесс создания апплета WeChat (внешний и внутренний) с нуля

предисловие

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

Следующее объяснение может быть не слишком подробным.В конце концов, то, что я хочу представить, это весь процесс.Очень подробный графический и текстовый учебник немного утомителен.Некоторые подробные рабочие процедуры требуют, чтобы читатели сами обращались к соответствующим документам, а некоторые ссылки на документы также будут даны. Хорошо, ты готов? Начнем это счастливое путешествие вместе.

Готов к работе

Если рабочий хочет хорошо работать, он должен сначала заточить свои инструменты. Что делать понятно, как это сделать? Что мне нужно подготовить? Ниже я перечисляю то, чем я занимаюсь в форме уравнения:

Мини-аккаунт программы + инструменты разработчика WeChat + интерфейсный код + серверные данные =Апплет WeChat
Публичный API Douban + параметр =Данные таблицы лидеров в реальном времени и подробные данные
PyCharm + Python + код сканера =Просканированы данные таблицы лидеров
Idea + Java + SpringBoot = Определение внутреннего интерфейса
Tencent Cloud Server + Tomcat + определение внутреннего интерфейса =Доступный интерфейс серверной службы
Доменное имя + IP + SSL-сертификат + регистрация =Юридический путь доступа к внутреннему интерфейсу

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

1. Зарегистрируйте учетную запись апплета WeChat

Входить:Публичная платформа микроканала, выберите тип учетной записи апплета и выполните процедуру регистрации. Обратите внимание, что на один адрес электронной почты может быть зарегистрирована только одна учетная запись.

2. Загрузите инструменты разработки

После того, как у нас будет учетная запись, мы можем использовать эту учетную запись для разработки.Среда разработки, используемая для разработки, — это инструмент разработчика WeChat, созданный Tencent.Введите:Инструменты разработки мини-программ, скачайте соответствующую версию и установите ее.

3. Начать заниматься фронтенд-разработкой небольших программ

Откройте инструмент разработчика WeChat, который вы только что загрузили, отсканируйте код, чтобы войти в систему, и создайте небольшой программный проект. Войдите на платформу официальной учетной записи WeChat, найдите AppID вашего апплета в Development->Development Settings->Developer ID и заполните его в настройках проекта.

Затем начните разработку реальной конкретной страницы, обратитесь к документации по разработке для процесса разработки:Руководство по доступу к мини-программе WeChat

4. Процесс фронтенд-разработки

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

Вызываемый внутренний интерфейс должен начинаться с https и должен быть настроен в разделе разработки общедоступной платформы WeChat -> параметры разработки -> доменное имя сервера.

5. Упаковать и запустить

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

резюме

На этом front-end работа завершена, по сути, если не задействована сложная обработка данных, то back-end не нужен, а все простые данные хранятся непосредственно во front-end. Если ваш апплет такой, то на этом можно закончить эту статью. После этого смотреть не нужно. Если вам нужно более гибкое взаимодействие и более сложная логика, то интерфейс бэкенда необходим. Как устроен более сложный внутренний интерфейс данных? Следуйте за мной, и вы узнаете.

задняя часть

Бэкэнд в основном предоставляется интерфейсу данных апплета, так что каждая страница апплета может отображать данные таблицы лидеров.Здесь я предоставляю интерфейс http и возвращаю строку в формате Json. Используемый язык — Java, а фреймворк — SpringBoot. Окончательный код Java упаковывается в военный пакет и развертывается на веб-сервере Tomcat на облачном хосте. Tomcat может автоматически распределять запрос через URL-адрес к моему программному коду. логика обработки, после обработки запроса возвращаются соответствующие данные в формате строки Json.

Основной процесс выглядит следующим образом:

Настройка сервера

1. Купить облачный сервер

Во-первых, вам нужно хранить внутренний программный код, и вам нужна машина.Хотя ваш собственный компьютер может использоваться, ваш собственный компьютер не может быть гарантированно включен 24 часа в сутки и может быть доступен для внешних сети, поэтому вам необходимо купить облачный сервер; Доступ к сети означает, что требуется IP-адрес общедоступной сети, и приобретенный облачный сервер будет сопоставлен с соответствующим IP-адресом.
Здесь я использую облачный сервер Tencent, перейдите на официальный сайт, чтобы купить:Тенсент Облако, выберите конфигурацию сервера и оплатите.

Исходя из бюджета и реальных потребностей (на самом деле это потому, что я не хочу тратить деньги), я выбираю здесь относительно бюджетную машину:

ЦП: 1 ядро
Оперативная память: 1 ГБ
Пропускная способность общедоступной сети: 1 Мбит/с
Операционная система: CentOS 7.5 64-битная
Системный диск: высокопроизводительный облачный диск, всего 50 ГБ
Диск данных: высокопроизводительный облачный диск, всего 50 ГБ

2. Купить доменное имя

Доменное имя используется для сопоставления с IP-адресом, поэтому удобно напрямую использовать доменное имя для доступа к серверу, на котором находится связанный IP-адрес. Хотя к купленному нами облачному серверу можно получить доступ напрямую в виде IP-адреса и порта, IP-адрес нелегко запомнить, а WeChat не позволяет использовать URL-адрес в виде IP-адреса и порта. Таким образом, вы можете купить доменное имя только «щедро».

Доменные имена можно приобрести у любого поставщика услуг доменных имен. Для удобства я также купил их непосредственно в Tencent Cloud. Ссылка для покупки:регистрация домена

3. Разрешение доменного имени

После покупки доменного имени, как использовать это доменное имя?Доменное имя, которое не используется с IP, является бессмысленным доменным именем. Здесь нам нужно привязать это доменное имя или его поддомен к IP, соответствующему серверу, который нам нужен для предоставления внешних услуг, то есть IP только что купленного мной облачного сервера.

В облачном DNS в бэкэнде Tencent Cloud щелкните свое доменное имя, чтобы добавить запись.Как правило, это в основном для добавления записи A, то есть для привязки доменного имени к адресу IPv4.Вы можете добавить несколько записей, чтобы различать доменные имена на всех уровнях по записи хоста. @ означает прямое использование доменного имени второго уровня xxx.com, в то время как другие используют доменные имена третьего уровня или более высокого уровня. Многоуровневые доменные имена ниже вашего собственного второго уровня доменное имя все под вашим контролем.

4. Регистрация доменного имени

Зачем нужна регистрация доменного имени? Это,есть ли на свете король?Интернетом естественно владеет страна,и нельзя допускать к сервисам небрежно. Вскрыть пустырь на этой земле нельзя, но необходимо отчитаться перед государством и принять надзор.

Весь процесс создания мини-программы, регистрация доменного имени заняли больше всего времени, это заняло десять-двадцать дней. Войдите на страницу записи:Управление записямиНачинайте подавать, я не буду вдаваться в подробности. Для получения подробной информации о процедуре подачи см.:Регистрация веб-сайтаК основным процессам относятся следующие:
(1) Сфотографируйте с занавеской (2) Проверить информацию о подаче (3) Заполните информацию о предмете (4) Заполните информацию о веб-сайте (5) Загрузить материалы (6) Подтвердить информацию о подаче и отправить ее на предварительное рассмотрение. (7) Пройти проверку и завершить запись

5. Приобретите SSL-сертификат

Зачем нужен SSL-сертификат? Потому что после настройки SSL-сертификата наш URL-адрес может начинаться с https, что является методом доступа к доменному имени, требуемому в апплете WeChat, а метод зашифрованной передачи более безопасен.

Говорят, что это покупка.На самом деле вы можете «купить» бесплатный сертификат, который может достичь той же цели, но он не так надежен, как платная функция шифрования, и безопасность, естественно, слабее. Но это не мешает мне выбрать бесплатный, в конце концов, это плохое слово.

Перейти на страницу покупки:SSL-сертификат, Выберите конфигурацию сертификата, который вы хотите приобрести, разместите заказ и оплатите, загрузите сертификат и используйте его для последующей настройки веб-сервера.

резюме

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

Бэкэнд разработка программы

окрестности:

Язык разработки: Java 8
Интегрированная среда разработки: IntelliJ IDEA Ultimate 2017
веб-фреймворк: Springboot
Инструмент сборки: Maven

Не буду вдаваться в подробности установки этих инструментов, в интернете полно туториалов, и если вы не разбираетесь в back-end разработке, ставить этот набор окружений бесполезно, будем считать, что читатель тоже знает определенный объем знаний по back-end разработке.

Основная часть кода Java приведена ниже, чтобы проиллюстрировать, как серверная программа предоставляет интерфейс http:

@RestController
@RequestMapping(value = "/movie")
public class MovieListController extends MovieBaseController{
    private static final Logger log = org.slf4j.LoggerFactory.getLogger(MovieListController.class);

    /**
     * 豆瓣top250电影
     * test: http://localhost:8080/movie/top250?start=0&limit=10
     */
    @RequestMapping(value = "/top250")
    public CommonRespVo<List<ListCommonVo>> getMovieTop250() {
        try {
            HttpServletRequest request = this.getHttpServletRequest();
            String start = request.getParameter("start");
            String limit = request.getParameter("limit");
            String url = String.format("https://api.douban.com/v2/movie/top250?start=%s&count=%s",start,limit);
            JSONObject jsonObject = HttpUtil.getInfoFromHttpApi(url);
            List<ListCommonVo> listCommonVos = this.movieListDataTrans(jsonObject);

            if (CollectionUtils.isNotEmpty(listCommonVos)) {
                return new CommonRespVo(listCommonVos, CommonRespVoCode.SUCCESS);
            }
        } catch (Exception e) {
            log.error("获取豆瓣top250电影信息异常",e);
        }
        return new CommonRespVo(CommonRespVoCode.FAILED.code, "未获取到数据");
    }
    
    /**
     * 华语top100电影
     * test: http://localhost:8080/movie/chinaTopMovie?start=0&limit=10
     */
    @RequestMapping(value = "/chinaTopMovie")
    public CommonRespVo<List<JSONObject>> getChinaTopMovie() {
        try {
            List<JSONObject> result = this.getSubList(Lists.newArrayList(ChinaTopMovieData.chinaTopMovieData));
            if (CollectionUtils.isNotEmpty(result)) {
                return new CommonRespVo(result, CommonRespVoCode.SUCCESS);
            }
        } catch (Exception e) {
            log.error("获取华语Top电影信息异常",e);
        }
        return new CommonRespVo(CommonRespVoCode.FAILED.code, "未获取到数据");
    }
    //省略后续代码
}

Приведенный выше код является одним из двух интерфейсов: один предназначен для получения информации о фильмах Douban top250 через общедоступный API, а другой — информация о китайских фильмах top100, полученная с помощью данных поискового робота. Вы можете видеть, что SpringBoot использует аннотацию RestController, чтобы указать, что этот класс обрабатывает HTTP-запросы и возвращает данные в формате json для метода, соответствующего каждому RequestMapping.

Роль аннотации RequestMapping заключается в сопоставлении URL-адреса для каждого метода. Аннотация @RequestMapping может воздействовать на класс контроллера или на его метод. При добавлении аннотации @RequestMapping на уровне класса эта аннотация применяется ко всем методам контроллера. Аннотация @RequestMapping к методу дополняет объявление @RequestMapping на уровне класса. Вот почему окончательный URL-адрес выше — это путь к методу класса плюс, который передается в браузере при локальном тестировании:http://localhost:8080/movie/chinaTopMovie?start=0&limit=10Вы можете получить возвращенные данные.

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

Источники данных

Данные ранжирования должны быть авторитетными и объективными, поэтому, конечно, я не могу просто взять некоторые данные и ранжировать их.У меня нет возможности подсчитать релевантные рейтинги этих типов информации, поэтому я подумал, что происхождение: взять данные который уже имеет определенный авторитет от других. У Douban есть несколько общедоступных API с открытым исходным кодом, которые могут получить некоторые данные, которые мне нужны, а некоторые другие данные доступны на других крупных рейтинговых сайтах, но нет готового API, чтобы предоставить мне их данные. дай, то я могу получить только сам.

Я использовал Python для написания некоторого программного обеспечения для поисковых роботов, которое регулярно сканирует данные на определенном рейтинговом веб-сайте и использует эти данные для обновления моих локальных статических данных, чтобы моя программа на Java могла получать относительно новые данные. На самом деле, здесь я могу добиться большего, но для того, чтобы быстро выйти в интернет, у меня нет времени использовать базу данных для загрузки просканированных данных. Это плохой результат. Каждый раз, когда служба перезапускается, данные за период времени не самый новый. Это в пределах моего допустимого диапазона, и у меня будет время решить эту проблему позже.

Пример API Дубана:API.Douban.com/V2/movie/to…, по этому URL-адресу вы можете получить данные списка лучших фильмов в пакетном пейджинге.

Искатель python использует urlopen, а функция urllib.request.urlopen() используется для доступа к целевому URL-адресу и возврата данных веб-страницы, соответствующих URL-адресу. Затем используйте BeautifulSoup для синтаксического анализа данных веб-страницы, в основном путем обхода дерева документа поиска, чтобы получить часть данных, которые вы хотите.

Развертывание серверных программ

Подготовить:

Хост облачного сервиса: Tencent Cloud Server
Сервер веб-приложений: Tomcat 8
JRE: Java 8
SSL-сертификат: SSL-сертификат, соответствующий Tomcat
Инструмент передачи по FTP: FileZilla

Сначала войдите на приобретенный вами облачный сервер и установите среду перед развертыванием, в основном устанавливая JRE и Tomcat.После установки вам необходимо настроить Tomcat.

1. Среда установки

Установить JRE Нажмите, чтобы загрузить среду выполнения Java:Java SE Runtime Environment 8u201, Загрузить и установить.
Установить Томкэт Tomcat должен быть установлен заранее. Перейдите на официальный сайт Tomcat, чтобы загрузить соответствующую версию сжатого пакета Tomcat:Apache TomcatСкачанный архив скопировать в указанную директорию и распаковать, у меня вот копия в/usr/local.

2. Настройте Tomcat

Настройте переменные среды Tomcat.Информацию о процессе настройки см. в:Apache Tomcat User Guide
Настройте сертификат SSL, который мы приобрели и загрузили ранее, в Tomcat. Для конкретного процесса настройки см.:Развертывание сертификата Tomcat, или обратитесь к официальной документации веб-сайта:SSL/TLS Configuration HOW-TO

3. Разверните приложение

Скопируйте пакет war, который мы ранее упаковали с помощью Maven, в каталог webapps, где установлен Tomcat, как показано на следующем рисунке:

[root@VM_0_12_centos webapps]# pwd
/usr/local/tomcat8/webapps
[root@VM_0_12_centos webapps]# ls
docs  examples  host-manager  manager  ROOT  wxrank  wxrank.war

Вот файл wxrank.war на картинке выше, а затем перейдите в папку bin Tomcat, чтобы запустить startup.bat, чтобы запустить tomcat, и пакет war может быть автоматически распакован и развернут.

резюме

Для удобства некоторые из вышеперечисленных файлов загружаются на мой собственный компьютер, а затем загружаются на облачный сервер через FileZilla.Этот инструмент также используется для передачи других файлов между моим собственным компьютером и облачным сервером.

При успешной настройке и развертывании Tomcat к нашему серверному интерфейсу можно получить доступ через URL-адрес.

Суммировать

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

Ниже приведен готовый продукт апплета, отсканируйте его и посмотрите:

Есть еще много данных, которые не готовы, и есть время их оптимизировать позже. Кроме того, поскольку я купил все облачные серверы, мне нужно в полной мере использовать их, поэтому я создал на нем личный блог.Нажмите на ссылку моего блога ниже, чтобы увидеть эффект:www.jackielee.cn

Оригинальная ссылка:Suiyuanji - Весь процесс создания мини-программ WeChat (front-end и back-end) с 0