Рост апплета mpvue «Alumni Footprint» (1)

Node.js внешний интерфейс ECharts mpvue
Рост апплета mpvue «Alumni Footprint» (1)

Опыт мини-программы


вдохновение

Разработка мини-программы идет полным ходом. Прошло некоторое время с тех пор, как я подал заявку на учетную запись в мини-программе, но я ничего не изменил. У меня нет хорошей идеи, я не знаю, что делать. , и в основном все это сделали, что мне делать? !

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

Прототипирование

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




Технический отбор

внешний интерфейс:Апплет предоставляет свой собственный язык описания слоев представления, но я не хочу использовать его, если хочу подбросить.Хотя он быстро учится, его можно использовать в разработке апплета только после изучения, что делает меня очень неудобным (не жалуйтесь 😂); раз родные не нужны, тоmpvueЭто только что пришло в мои глаза. Просто произошло, что я еще некоторое время не сделал Vuue Project. На этот раз я могу просто попрактиковаться в руках. Не только могу ли я пересмотреть знание Vue, но я также могу использовать Vue Небольшие программы, которые убивают две птицы одним камнем (хотя Mpvue есть много ям, но не может остановить мое сердце, чтобы использовать его);

Сервер:Выбор front-end разработки закончен, а теперь пора выбирать сервер.Ява явно тяжеловата для сервиса.Конечно, как нода, которая может использовать js для написания сервера, это конечно мой основной Выбор Далее, чтобы позволить себе вернуться к mysql Curd, конечно, выбрать mysql в качестве базы данных для хранения данных;

Плагин:Кроме того, нужно использовать отображение диаграмм.Так как в работе часто используется echarts, то первая мысль - использовать его.Однако в начале не был уверен, есть ли подходящая версия, но когда увидел статью" Использование компонентов апплета echarts в mpvue». Я был очень взволнован, когда покинул область комментариев (захочет ли этот автор ударить меня,echarts-for-weixin, но я побежал в область комментариев и нашел егоmpvue-echarts😂), так что здесь я использую EChartsВерсия апплета mpvue, спасибо автору этого плагина F-loat

Ok! Выбор технологии завершен

сборка проекта

Теперь, когда прототип и технология выбраны, приступаем к подготовке проекта;

Структура каталогов внешнего интерфейса

из-заmpvueБазовая структура каталогов была построена за нас, поэтому нет необходимости делать слишком много модификаций, а какие страницы нужно только добавлять в соответствии с правилами;


Структура каталогов на стороне сервера

Серверная служба разделяет глобальную конфигурацию, маршрутизатор, управление и конфигурации, связанные с sql.Поскольку перед выходом в сеть требуется протокол https, здесь добавляется конфигурация https, и она будет настроена в nginx после выхода в сеть; я не буду объяснить здесь слишком много; Здесь вы можете видеть, что я использовалpm2,pm2Это инструмент управления процессами узла, который можно использовать для упрощения многих утомительных задач управления приложениями узла, таких как мониторинг производительности, автоматический перезапуск, балансировка нагрузки и т. д., и он очень прост в использовании. Вот учебник по использованию pm2blog.CSDN.net/sun обходит ЕС, что/…


подготовка данных

1. Поскольку для этого апплета требуются различные провинции и регионы в Китае, необходимо установить связь между провинциями и регионами, и его должно быть легко сохранить, где провинции и регионы можно легко найти в Интернете, а апплет также предоставляет готовыйкомпонентывыбрать городские районы;

2. Так как это выпускник, необходимо систематизировать и агрегировать информацию всех колледжей и университетов.В начале были найдены только данные некоторых колледжей и университетов, и данные были не такими полными, поэтому это было сложно обеспечить целостность данных;Сайт Министерства образования КНР., и, наконец, нашел последнюю информацию о колледже;

(По состоянию на 31 мая 2017 г. всего в стране насчитывалось 2 914 высших учебных заведений, в том числе 2 631 общеобразовательное высшее учебное заведение (в том числе 265 самостоятельных колледжей) и 283 высших учебных заведения для взрослых.) Позже, по другим каналам, Я нашел Гонконг, Тайвань и Макао, там 34 колледжа и университета, всего 2941;

Данные найдены, но самая кропотливая работа - очистка данных.После проверки и очистки перебираются следующие формы, а затем импортируются в базу данных по этой форме;

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


функциональные точки

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

2. После того, как пользователь определит город, поиск колледжей и университетов, а поиск колледжей и факультетов поддерживает функцию нечеткого поиска;

3. После выбора колледжа перейдите к распределению выпускников этого колледжа и отобразите 5 лучших городов;

4. Поделитесь распределением ваших выпускников;

Пит-Пойнт

1. Поскольку онлайн-апплету не разрешено вызывать интерфейс, отличный от имени авторизованного домена, его необходимо вызывать на стороне сервера.Службы определения местоположения Tencentинтерфейс API для возврата информации о местоположении пользователя;

2. Из-за настройки интерфейса wx.getUserInfo() всплывающее окно авторизации больше не будет появляться при использовании этого интерфейса.Используйте для управления пользователь должен взять на себя инициативу авторизовать операцию, поэтому получить ее сейчас базовую информацию о пользователе не так просто, поэтому пользователю необходимо привести пользователя для авторизации в следующей операции; (здесь только для получения псевдонима пользователя и информация об аватаре, без какой-либо информации о конфиденциальности)

3. Потому чтоmpvue-echartsЕсть еще небольшие проблемы, поэтому, когда на странице два экземпляра, моя таблица карт не может щелкнуть, чтобы просмотреть количество людей в текущем городе;

Устаревшие функции

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

Онлайн-версия

1. Поскольку массовых пользователей нет, сгенерированные графики выглядят не так красиво (надеюсь, друзья Nuggets могут присоединиться, ха-ха! Исходником поделюсь позже), я сделал только фейковые данные для ссылку, пожалуйста Не удивляйтесь!



Отправить страницу


следовать за

В следующей статье я поделюсь исходным кодом для вашей справки, и я также надеюсь, что вы сделаете больше предложений;

опыт

Вы также можете выполнить поиск «След выпускников» в строке поиска апплета. Ваше использование принесет мне несравненную честь. Я с нетерпением жду вашего прибытия, спасибо