Апплет | Демонстрация микроканала на уровне апплета Notes, чтобы помочь вам быстро сократить разработку

Апплет WeChat

написать впереди

  • Обобщить опыт — написание статей может подтолкнуть к размышлениям и подготовить к последующему развитию
  • Делюсь опытом - информации в интернете действительно слишком много, надеюсь эта статья может быть полезной

Некоторые проблемы

  1. Для чего читатели?

Эта статья подойдет тем, кто интересуется небольшими программами и уже читал их.Официальный сайт: Учебное пособие по разработке мини-программы WeChat, читатели, познакомившиеся с официальной демо-версией и желающие узнать больше о разработке 2. Какие технические моменты включены? В основном включают: общий синтаксис апплета WeChat, межстраничную передачу параметров, использование кеша, моделирование локальных данных, сторонниеUI库использование,富文本Побег, дизайн структуры данных, внутренний запрос данных, переадресация прокси-сервера службы nodejs 3. Каковы характеристики? идеи, заметки,исходный код

текст

Введение

Он получил очень скромное название «Национальное продвинутое чтение», что означает иммерсивное чтение.rssАпплет для чтения источников, основные функции которого включают в себя: отслеживаемые источники, список источников, сведения об исходных статьях, центр источников. Вы можете напрямую читать ежедневную подборку Чжиху, неделю и другие высококачественные китайские и английские источники.

Это работает следующим образом:使用效果

Это может быть непосредственно код сканирования микроканала. Опыт:全民精进阅读-小程序码

источник вдохновения

In the era of information explosion, there are so many things to watch every day, headlines, official accounts, Zhihu, various vertical platforms, big bloggers... I just want to find a "quiet" place to read some selections conveniently. s вещи.于是乎就想起了RSS，想着将其与小程序结合，抱着试一试的心态写了一下，顺便当做练习。

С целью, следующим шагом является конкретно задуматься.

  • RSS-канал
  • RSS-канал следует за дисплеем
  • Отображение списка содержимого RSS-канала
  • Отображение подробного содержания статьи RSS-канала
  • Отписаться от RSS-канала

Между тем, чтобы иметь возможность выбрать интерес RSS-каналы, и хотелось бы иметь эффективные каналы и операторы обратной связи, нуждаются в двух функциях:

  • Рекомендуемый список RSS-каналов
  • Введение в RSS-каналы
  • Канал обратной связи RSS-канала, отображение выписки

Для вышеперечисленных функций выполняется модульное проектирование, и здесь рекомендуется приложение онлайн-редактирования UE.чернильный ножпопытаться закончить. По принципу «Не заставляйте меня думать» его можно оформить в виде следующих 5 модулей (страниц):

  1. Отображение отслеживаемого источника
    • RSS-канал следует за дисплеем
    • Отписаться от RSS-канала
  2. исходный центр
    • Рекомендуемый список RSS-каналов
    • Введение в RSS-каналы
    • RSS-канал Подписаться
  3. отображение исходного контента
    • Отображение списка содержимого RSS-канала
  4. Подробнее об источнике
    • Отображение подробного содержания статьи RSS-канала
  5. Более
    • Введение в RSS-каналы
    • Канал обратной связи RSS-канала, отображение выписки

Инжирное взаимодействие между различными модулями выглядит следующим образом (не возврат):全民精进阅读UE

Что касается дизайна пользовательского интерфейса, первое, что приходит на ум разработчику интерфейса, — это лаконичность и точность, очень соответствующие ожиданиям. Поэтому особого дизайна UI и «адаптации» в процессе разработки нет.

Сказав так много, пришло время показать код. . .

Код

Технические приготовления

По разбору вышеприведенной части все функции апплета были перечислены, а теперь делаем технический анализ:

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

  2. Для каждой функциональной точки

  • Внимание RSS-канал: переход на страницу с параметрами, всплывающее окно (в всплывающем окне WeChat отображается слишком мало информации, нужно использовать zanui)
  • RSS-канал уделил внимание отображению: макет сетки, дизайн структуры данных.
  • Отображение списка содержимого RSS-канала: анализ структуры данных RSS, макет
  • Отображение подробного содержания статьи RSS-канала: передача параметров между страницами, отображение расширенного текста (WeChat не имеет
    标签，需第三方库来实现）
  • Отмена подписки на RSS-канал: длительное нажатие для отмены, обновление кеша данных
  • Список рекомендаций RSS-канала: макет сетки, дизайн структуры данных
  • Введение в RSS-канал: отображение текста (обратите внимание, что можно выбрать и скопировать только те, что указаны в ярлыке в WeChat)
  • Канал обратной связи RSS-канала, отображение выписки: простой текстовый дисплей

Реализация

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

├── app.js
├── app.json
├── app.wxss
├── data 本地数据
|  └── rss.js
├── pages 页面
|  ├── detail 源文章详细展示
|  |  ├── detail.js
|  |  ├── detail.json
|  |  ├── detail.wxml
|  |  └── detail.wxss
|  ├── index 源内容展示
|  |  ├── index.js
|  |  ├── index.json
|  |  ├── index.wxml
|  |  └── index.wxss
|  ├── more 更多
|  |  ├── more.js
|  |  ├── more.json
|  |  ├── more.wxml
|  |  └── more.wxss
|  ├── rsscenter 源中心
|  |  ├── rsscenter.js
|  |  ├── rsscenter.json
|  |  ├── rsscenter.wxml
|  |  └── rsscenter.wxss
|  └── rssed 已关注源展示
|     ├── rssed.js
|     ├── rssed.json
|     ├── rssed.wxml
|     └── rssed.wxss
├── project.config.json
├── utils 通用资源
|  └── util.js
└── wxParse 富文本转义库
Страница 1: rssed обратил внимание на исходный дисплей

  1. Используйте Palace gingham Bureau со сторонними библиотеками пользовательского интерфейса

Для источников, за которыми следили, ключевой информацией является название источника, логотип источника. Поэтому на основе освежающего дизайна принята планировка дворца, аzanuiсистема сетки. Из исходного кода zanui (в этой статье используетсяv1.9.91версия) найти компонент системы сеткиdist/col/index.wxss, скопируйте содержимое в app.wxss проекта, как общий стиль, wxml ссылайтесь на исходный код zanui/pages/layout/index.wxml.

Сетчатая система для контроля высоты не нуждается в достижении собственного квадрата, добавьте следующий код wxss:

.zan-col {
  background-color: #39a9ed;
  height: 25vw;
  text-align: center;
  padding-top: 60rpx;
  color: #fff;
  position: relative;
}

.zan-col:nth-child(odd) {
  background-color: #66c6f2;
}

Стоит отметить, что помимо этого частичного введения стороннюю UI-библиотеку также можно импортировать целиком, метод такой: взять в качестве примера zanui и напрямую импортировать его файлы ресурсов в app.wxss через @import.

@import "dist/index.wxss";
  1. проектирование структуры данных

Для этой коллекции отслеживаемых источников мы помещаем необходимые метаданные в массив для рендеринга сетки.

    const rssedData = [
      {
        title: '知乎每日精选', // 源名称
        favicon: 'https://www.zhihu.com/favicon.ico', // 源logo
        rssUrl: 'https://www.zhihu.com/rss', // 源链接
      },
      {
        title: 'the weak',
        favicon: 'https://theweek.com/favicon.ico',
        rssUrl: 'https://theweek.com/rss.xml',
      },
    ];

Эти данные после загрузки страницы принимают значение rssedData из Storage, а rssedData записывается в кеш при отслеживании. 3. Рендеринг и отписка В соответствии со структурой данных и дизайном пользовательского интерфейса используйтеwx:forВизуализируйте сетку в цикле. Поскольку вам нужно просмотреть и отписаться от источника, вам нужно добавить элементdata-rss-idЭквивалент, для события, связанного с跨页面传参. Для удаления используется обычное решение: длительное нажатие на кнопку удаления и нажатие на кнопку для удаления. 4. Схожий дизайн других страниц В качестве главной страницы должен быть вход для доступа к другим функциям.Здесь промышленный вход размещен в конце сетки как ассоциация.宫格与关联设计.png

Страница 2: центр источников rsscenter

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

  1. Рекомендуемый список RSS-каналов показывает дизайн структуры данных

  {
    title: '知乎每日精选', // 源名称
    link: 'https://www.zhihu.com', // 源官网链接
    description: '中文互联网最大的知识平台，帮助人们便捷地分享彼此的知识、经验和见解。', // 源简介
    favicon: 'https://www.zhihu.com/favicon.ico', // 源logo
    rssUrl: 'https://www.zhihu.com/rss', // 源链接
  }

Данные здесь поступают из сетевой коллекции, и временно фиксируются в апплете, поэтому я поместил их в проект/data/rss.jsФайл.后续版本，这个放到服务端管理，可以做到动态增删改。 2. RSS源简介 采用弹出框的形式，展示基本信息，提供关注按钮。这里使用了zanui的popup源简介与关注.png3. Подписка на RSS-канал Обновите хранилище и используйте wx.reLaunch, чтобы перейти на следующую страницу.

wx.reLaunch({
  url: `../rssed/rssed`,
});
Страница 3: Отображение исходного контента

С классическим дизайном, как показано ниже.源内容列表展示.png

  1. Обработка исходных данных и обслуживание узлов

rss — это данные, основанные на стандарте XML, которые не могут быть проанализированы напрямую в апплете, а легитимные запросы доменного имени апплета ограничены, здесь они могут обрабатываться в виде прокси-сервера. Здесь я использую фреймворк thinkjs, основанный на nodejs, и в фреймворк введен плагин для преобразования данных rss в данные json. За этим сервисом может последовать отдельная статья, которая здесь не будет расширяться, идея такова. Кроме того, существует множество форматов данных RSS, которые должны быть совместимы. Формат ответа:

{
	"errno": 0,
	"errmsg": "",
	"data": {
		"rss": {
			"$": {
				"version": "2.0",
				"xmlns:atom": "http://www.w3.org/2005/Atom"
			},
			"channel": {
				"title": "知乎每日精选",
				"link": "http://www.zhihu.com",
				"description": "中文互联网最大的知识平台，帮助人们便捷地分享彼此的知识、经验和见解。",
				"atom:link": {
					"$": {
						"href": "http://www.zhihu.com/rss",
						"rel": "self"
					}
				},
				"language": "zh-cn",
				"copyright": "© 2018 知乎(http://www.zhihu.com)",
				"lastBuildDate": "Fri, 03 Aug 2018 16:30:25 +0800",
				"ttl": "180",
				"item": [{
					"title": "如何评价 2018 年菲尔兹奖（fields medal 2018）结果与四位得主的工作？",
					"link": "http://www.zhihu.com/question/287977241/answer/458776271?utm_campaign=rss&utm_medium=rss&utm_source=rss&utm_content=title",
					"description": "<p></p><br>\n ",
					"dc:creator": {
						"_": "知识分子",
						"$": {
							"xmlns:dc": "http://purl.org/dc/elements/1.1/"
						}
					},
					"pubDate": "Fri, 03 Aug 2018 16:30:25 +0800",
					"guid": "http://www.zhihu.com/question/287977241/answer/458776271"
				},]
			}
		}
	}
}

один из нихdescriptionПоле представляет собой hmtl-документ вводного содержания статьи. Некоторые источники помещают в него все содержимое, поэтому оно может загружаться медленно. 2. Список рендеринга и прыжков с параметрами Получив вышеуказанные данные, кэшируйте данные и поместите их в хранилище. затем используйтеwx:forСписок рендеринга. Когда страница переходит на страницу сведений, введите значение индекса массива статьи:

    wx.navigateTo({
      url: `../detail/detail?id=${rssItemData}&favicon=${favicon}`,
    });

существуетdetail.jsстоимость в

  onLoad: function (options) {
    this.showDetail(options.id, options.favicon);
  },
  1. Почему одноразовое кэширование?
  • Возвращаются исходные данные rss.
  • Это выгодно для пользовательского опыта, и не нужно ждать, чтобы выключить страницу сведений после загрузки страницы списка.
Страница 4: Подробное отображение исходных статей

Ядром является чтение данных в хранилище и преобразование форматированного HTML-текста в wxml. используется здесьwxParseбиблиотека. После загрузки исходного кода wxParse скопируйте его в корневой каталог проекта, а затем/pages/detail/detail.jsПознакомьтесь и позвоните.

const WxParse = require('../../wxParse/wxParse.js');
...
WxParse.wxParse('article', 'html', rssDataItem.description, that, 5);
...

ps: Преимущество введения сторонней библиотеки отдельно в том, что отображение некоторых ярлыков можно настроить, что зависит от реальных потребностей.

наконец

Категории