kingdex

[Мини-программа WeChat] Иллюстрированная Книга Царей

Источником вдохновения послужила популярная в этом году мобильная игра — Honor of Kings. Иногда не очень удобно использовать мобильный телефон для поиска игровых данных в Интернете, поэтому мне пришла в голову идея разработать «Иллюстрированную книгу King of Kings». "апплет. Сканируйте данные с официального сайта, интегрируйте героев, снаряжение, надписи и другую информацию в апплет WeChat, а также запрашивайте игровую информацию в любое время и в любом месте.

Предварительный просмотр

Отображение эффектов

Онлайн-опыт

Отсканируйте приведенный ниже мини-код программы в WeChat, чтобы сразу же опробовать его:

стек технологий

• Дизайн прототипа: эскиз
• Фоновое сканирование данных: node.js + Leancloud (адрес с открытым исходным кодом)
• Интерфейс: экология мини-программ (WXML/WXSS/JavaScript...)

использовать

Сначала нажмите Fork или зеленую кнопку Clone or download в правом верхнем углу, чтобы загрузить исходный код, и используйте инструменты разработчика WeChat для отладки и разработки. WeChat также предоставляет документы по разработке мини-программ, предоставляя полный набор решений от регистрации мини-программ, инструментов разработки, разработки и отладки до выпуска, создавая собственную экосистему, аналогичную Apple.

Всего проект состоит из 9 страниц, включая отображение списка, подробную информацию о героях, классификацию оборудования, фильтрацию условий записи и другие функции. Поскольку служба хранения данных Leancloud используется в фоновом режиме, ajax API мини-программы не используется и не используется. Представлено Leancloud. SDK должен опираться на файл с именем leancloud.config.js , который находится в папке utils . Поскольку сторонние сервисы, такие как Leancloud, обычно оплачиваются гибко, а «Иллюстрированная книга короля» официально выпущена на WeChat, я нажал. код leancloud.config.js был проигнорирован, пожалуйста, поймите.

leancloud.config.js содержит информацию AppID и AppKey приложения Leancloud:

 module . exports = {
  appId : '你的AppID' ,
  appKey : '你的AppKey'
}

Прежде чем использовать проект, вам необходимо создать собственное приложение Leancloud и создать王者荣耀官网爬虫я написал ранее, чтобы получить данные. Им обоим требуется файл leancloud.config.js .

Подвести итог

Давайте вкратце поговорим о разработке мини-программ WeChat. Какое-то время в Интернете было много шума, а потом я нашел время просмотреть документы по разработке. Черт побери, разве это не Vue.js? ! Просто посмотрите на пример ниже.

Мини программа:

 Page ( {
	data : {
		list : [ ]
	} ,
	onload : function ( ) {
		this . setData ( {
			list : [ 1 , 2 , 3 ]
		} )
	}
} ) 

 < view wx:for =" {{ list }} " > {{ item }} </ view >

Vue.js:

 new Vue ( {
	data : {
		list : [ ]
	} ,
	mounted : function ( ) {
		this . list = [ 1 , 2 , 3 ]
	}
} ) 

 < view v-for =" item in list " > {{ item }} </ view >

Хотя API выглядят одинаково, все же есть очевидные различия:

• Апплет представляет собой одностороннюю привязку данных и не предоставляет инструкций v-модели, аналогичных vue.
• Выражения привязки данных поддерживают только двойные фигурные скобки. Если вы напишете wx:for="item in list" будет сообщено об ошибке.
• Чтобы управлять объектом данных, вам нужно вызвать метод setData, чтобы инициировать обновление, вместо того, чтобы назначать его напрямую, как в vue.
• Для событий привязки требуются директивы шаблона, чтобы объявить, всплывать или нет.

Апплет имеет два потока, соответствующие двум независимым модулям: View (представление) и AppService (логика). Представление используется для визуализации шаблонов и стилей, а AppService используется для обработки бизнес-логики, запросов данных, вызовов API и т. д. Заинтересованные студенты могут обратиться к: «Анализ архитектуры мини-программ WeChat». Кроме того, хороши также мини-программные статьи Minion Food Delivery Team.

Говоря об «Иллюстрированной книге Кинга», это моя первая небольшая программа. Опытные пользователи интерфейса могут начать работу за один день, следуя официальной документации. По сравнению с кодированием для меня было непросто завершить разработку прототипа пользовательского интерфейса всего продукта, включая макет, подбор цветов и взаимодействие. Я ссылался на многие продукты более чем за десять дней и до сих пор достиг более глубокого понимания дизайна. имеют окончательный эффект. Вполне удовлетворительный.

Открытый исходный код этого проекта предназначен только для ознакомления, коммерческое использование запрещено.

Разрешение авторских прав

лицензия GPL