Недавно я научился писать небольшие программы, а затем использовал свободное время, чтобы сделать одну из них. Мне всегда нравилось приложение Netease Snail Reading, и я не могу удержаться от того, что мне нравится, поэтому я просто сделал эту небольшую программу, имитирующую приложение Netease Snail Reading.
адрес проекта:яояофейхуа/чтение
Предварительный просмотр проекта:
Подготовка проекта:
Если вам интересно, вы можете подписаться на меня, чтобы сделать это вместе ^_^
☟ Нажмите на синее тело, чтобы перейти на соответствующую страницу для загрузки или просмотра руководства.
1,Инструменты разработчика WeChatОн может помочь нам быстро разработать небольшие программы. Конечно, нам также нужно иметь небольшую учетную запись программы перед разработкой (Руководство по регистрации), через учетную запись мы можем управлять собственным апплетом. Следует отметить, что зарегистрировать можно только детскую обувь старше 18 лет.
2,vs code(Пароль: g2g5) Для 64-битных систем можно поискать установочный пакет для других версий. Хотя его можно написать непосредственно в инструменте разработчика WeChat, мне все же нравится кодировать в сравнении с кодом. Это можно свободно выбирать в соответствии с вашими предпочтениями.
3.Библиотека векторных иконок Iconfont-AlibabaБиблиотека с открытым исходным кодом, созданная Али Дадом, содержит не только библиотеки значков с открытым исходным кодом от сотен компаний, но и различные маленькие значки. Наличие этой библиотеки значков значительно повысило нашу эффективность.Мы можем искать значки в соответствии с нашими потребностями, а также можем устанавливать цвет, размер и формат изображения. В общем, у тебя есть все, что ты хочешь~
4.EasyMock простые и эффективные поддельные данныеОн используется для моделирования данных в фоновом режиме для получения данных JSON, что удобно для разработки.
5.Документация по разработке программы WeChat MiniЭтот документ W3C очень подробен, здесь мы можем найти API, компоненты и некоторые фреймворки апплета WeChat.
Кроме того, для измерения используется MarkMan, но если вы стремитесь к точной реставрации, PS более деликатный.
Процесс разработки проекта:
Любое развитие есть процесс роста. В процессе разработки мы столкнемся с различными проблемами, что дает нам пространство для самостоятельного мышления и может использовать нашу способность решать проблемы и запрашивать документы. Конечно, обдумав вопрос, вы также можете попросить других обсудить и обсудить, что часто помогает нам быстро найти белые пятна и даже узнать больше о моментах, которые мы игнорируем. Общение с другими также является очень важной частью обучения, поэтому здесь я делюсь своим опытом Добро пожаловать на общение и обучение вместе.
1. Запустите проект
В начале проекта мы сначала настраиваем основной интерфейс в файле app.json и устанавливаем tabBar. Здесь мы задаем общий тон для установки апплета.
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "网易蜗牛读书",
"navigationBarTextStyle":"black"
},
"tabBar":{
"color":"#999999",
"selectedColor":"#444444",
"backgroungColor":"#ffffff",
"borderStyle":"#e0e0e0",
"list": [
{
"pagePath":"pages/leader/leader",
"iconPath": "assets/icons/lingdu.png",
"selectedIconPath": "assets/icons/lingdu_sel.png",
"text":"领读"
},
{
"pagePath":"pages/stack/stack",
"iconPath": "assets/icons/stack.png",
"selectedIconPath": "assets/icons/stack_sel.png",
"text":"分类"
},
{
"pagePath": "pages/bookdesk/bookdesk",
"iconPath": "assets/icons/bookdesk.png",
"selectedIconPath": "assets/icons/bookdesk_sel.png",
"text":"书桌"
},
{
"pagePath":"pages/mine/mine",
"iconPath": "assets/icons/mine.png",
"selectedIconPath": "assets/icons/mine_sel.png",
"text":"我的"
}
]
}
Для страницы страниц в процессе разработки было внесено множество корректировок. Пока он кажется чистым и простым в управлении. Сначала, будь то страница первого уровня или страница второго уровня, я помещал их в каталог pages. Сначала я не думал, что есть что-то, но потом, страниц стало больше и больше.Когда я хотел изменить и настроить написанные ранее страницы, я вдруг обнаружил кучу папок.Сопряжение, очень раздражает. Поэтому для разных уровней страницы были внесены соответствующие коррективы. Основные папки определяются по разным tabBars, а затем страницы всех уровней находятся в директориях соответствующих им уровней. Кроме того, наименование страниц должно быть максимально простым и понятным, чтобы вам было удобно просматривать и управлять каждой страницей.
"pages":[
"pages/index/index",
"pages/leader/leader", // 领读人
"pages/leader/stories/stories",
"pages/leader/authors/authors",
"pages/stack/stack", // 分类
"pages/stack/booklist/booklist",
"pages/stack/booklist/bookdetail/bookdetail",
"pages/bookdesk/bookdesk", // 书桌
"pages/mine/mine", // 我的
"pages/mine/news/news",
"pages/logs/logs"
],
Создайте отображение на странице с несколькими уровнями ниже страницы категории:
Поэтому первое, о чем нужно подумать в начале проекта, это макет файла.Разумная структура может повысить читабельность проекта, и в дальнейшем будет удобнее работать и поддерживать, что может сэкономить определенное количество времени.
Советы: При создании страниц, если мы создадим их в файле app.json программы разработчика WeChat, соответствующие папки будут сгенерированы автоматически, поэтому нам не нужно создавать их одну за другой.
2. Макет страницы и стиль
Апплет представляет собой легковесное приложение, поэтому на некоторых страницах были внесены некоторые коррективы на основе соответствия исходному приложению. Кроме того, все страницы здесь вырезаны мной, кто-то может сказать, что многие страницы могут ссылаться на сторонние фреймворки, и нет необходимости писать нативный код. На самом деле в этом нет ничего страшного, это зависит от того, для чего вы пишете апплет. Я сделал этот апплет, чтобы изучить разработку апплета, а мое путешествие по интерфейсу только началось, поэтому, чтобы проявить свою чувствительность к различным структурам в кодировании и углубить свое понимание атрибутов стиля, я выбрал Пишите собственный код самостоятельно.
На самом деле, сторонние фреймворки — это очень хорошие колеса, как и фреймворк weui, разработанный командой WeChat, он очень полезен, предоставляет множество компонентов, которые позволяют избавиться от утомительного вырезания страниц и сократить время разработки. . Я не очень хорошо разбираюсь в использовании weui, поэтому в дальнейшем исследовании я продолжу модифицировать этот апплет и реализовывать страницу по-разному. Кроме того, при нейминге я использовал спецификацию БЭМ, что облегчает понимание структуры страницы и облегчает чтение кода. Номенклатура БЭМ дает нам хороший шаблон, который может отражать взаимосвязь между различными элементами в именовании.Именование CSS более семантично, и элементы легче читаются. А уникальный метод именования делает код более удобным для повторного использования.
stack.wxml
3. Используйте easy-mock для создания данных
После написания базового стиля следует подумать о проблеме с данными. Страницы, которые мы разрабатываем, редко бывают статичными. Для нас нет никакого смысла записывать данные на страницу, и это только увеличивает нагрузку. На этом этапе нам нужно смоделировать фоновые данные, чтобы данные можно было отобразить на странице через запрос. easy-mock предоставляет нам хорошую платформу для подделки данных, а затем генерирует URL-адрес для получения данных с помощью метода wx.request() для реализации данных загрузки страницы.
Также возможна локальная запись поддельных данных. Читая сегодня чужие статьи, я увидел, что для запроса данных используется метод require(). Я не очень хорошо в этом разбираюсь После запроса я узнал, что это реализация модуля в CommonJS. Есть много способов реализовать функцию, я думаю, что мы не должны довольствоваться одним методом, а должны широко баловаться, и, изучая разные методы, пусть наш запас знаний будет больше.
Основные функции проекта:
1. Реализация стартовой страницы апплета
Здесь я использую методы setInterval() и clearInterval() для реализации, а затем switchTab для реализации перехода.
Page({
data: {
time:3
},
onLoad: function () {
var count = setInterval(()=>{
this.setData({
time : this.data.time -1
});
if(this.data.time == 0) {
wx.switchTab({
url:'../leader/leader',
complete:function(res) {
}
})
clearInterval(count);
}
},1000);
}
})
2. Получить идентификатор при переходе на страницу, получить разные данные
Вначале я не очень хорошо разбирался в сборе данных, поэтому мог выполнять только простой одностраничный рендеринг. Позже, проверяя документы и исследуя, я постепенно смог получить более сложные данные. Кроме того, при настройке Data, если структура неясна, можно использовать метод console.log(); для просмотра структуры данных во времени, и отслаивать слой за слоем, чтобы найти нужный нам слой данных. Для того, чтобы было проще понять, прикрепляю две движущиеся картинки.Можно обнаружить, что при переходе по разным статьям данные, полученные с перескакивающих страниц, тоже отличаются.
Свинец
Классификация
Данные на странице классификации здесь более аккуратные.Возьмите это в качестве примера, чтобы рассказать о том, как я динамически выбираю данные по идентификатору. Первое, что нужно прояснить, — это страница классификации стека и переход на страницу сведений о списке книг. Здесь мы прыгаем по навигатору, задаем выражение в url для динамического получения id, url="booklist/booklist?id={{index}}", а затем в booklist.js через полученный id выбираем данные.
stack:
stack.wxml
<view>
<view class="page-search"></view>
<scroll-view wx:for="{{stack}}" wx:key="{{index}}" scroll-y="true">
<navigator class="stack-view " url="booklist/booklist?id={{index}}">
<image src="{{item.typeCover}}" class="stack-image"></image>
<text class="stack-name">{{item.bookTypes}}</text>
<text class="stack-numb">{{item.bookNumb}} ></text>
</navigator>
<view class="line"></view>
</scroll-view>
</view>
</view>
stack.js
Page({
data: {
stack:[],
id: ""
},
onLoad: function () {
var that = this;
wx.request({
url:"https://www.easy-mock.com/mock/5a23a9a2ff38a436c591b6fa/getArticInfo",
success: function(res) {
console.log(res.data.data.stack);
console.log(res.data.data.List);
that.setData({
stack: res.data.data.stack,
id: res.data.data.List
})
}
})
},
})
booklist:
список книг.wxml
<view>
<view>
<view wx:for="{{bookList}}" wx:key="{{index}}">
<view class="book-list-root" bindtap="bindViewTap">
<view class="book-list-child">
<view>
<text class="book-list-name">{{item.bookName}}</text>
</view>
<view>
<text class="book-list-autor">{{item.authorName}}</text>
</view>
<view class="book-list-des">
<text>{{item.bookDes}}</text>
</view>
</view>
</view>
<view class="line"></view>
</view>
</view>
</view>
booklist.js
Page({
data: {
bookList:[],
stack:[]
},
onLoad: function (params) {
var that = this;
wx.request({
url:"https://www.easy-mock.com/mock/5a23a9a2ff38a436c591b6fa/getArticInfo",
success: function(res) {
that.setData({
bookList: res.data.data.stack[params.id].List.bookList,
})
}
})
},
})
3. Динамическая модификация navigationBarTitleText
В файле JSON каждой страницы мы можем установить заголовок страницы, но когда мы заходим на разные страницы и нам нужно получить разные заголовки, нам нужно их динамически изменять. На самом деле это очень просто реализовать, мы знаем, что заголовок страницы можно изменить с помощью метода wx.setNavigationBarTitle(), а затем использовать id для достижения эффекта динамического сбора, как описано во втором пункте.
Еще нужно отметить, что нам нужно установить navigationBarTitleText в JSON пустым, чтобы в процессе перехода не было эффекта перехода между исходным заголовком и измененным заголовком, но отображался требуемый заголовок напрямую.
.json
{
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": " ",
"navigationBarTextStyle": "black"
}
.js
onLoad: function (params) {
var that = this;
wx.request({
url:"https://www.easy-mock.com/mock/5a23a9a2ff38a436c591b6fa/getArticInfo",
success: function(res) {
var bTypes = res.data.data.stack[params.id].bookTypes;
wx.setNavigationBarTitle({
title: bTypes,
},1);
}
})
},
4. Два метода перехода по страницам
(1) Использование метода навигатора
Прыжок навигатора может сохранить текущую страницу и может вернуться
<navigator class="stack-view " url="booklist/booklist?id={{index}}">
// 点击部位，触发即可跳转
</navigator>
<view class="page__bd-items page-flex" bindtap="tomyNews">
<view class="page-items-lt">
<image src="../../assets/images/mines/news.png" />
</view>
<view class="page-items-md">我的消息</view>
<view class="page-items-others"></view>
<view class="page-items-ft">></view>
</view>
tomyNews:function(e) {
wx.navigateTo({
url:'news/news'
})
},
Следует отметить, что уровень страниц, необходимых в программе, может быть только до пяти уровней, потому что таким образом, чтобы сохранить текущую страницу, то есть перейти на страницу таким образом, можно открыть только пять страниц. в большинстве.
(2) Используйте метод switchTab
Этот метод переходит на страницу tabBar и закрывает все остальные страницы без tabBar.
wx.switchTab({
url:'../leader/leader',
complete:function(res) {
}
})
5. Swiper реализует карусель
Эффект поворота страницы рабочего стола реализуется с помощью swiper и swiper-item.
Соответствующие свойства здесь напрямую используют картинки из Интернета:
<swiper class="swiper" indicator-dots="true"
interval="5000" duration="1000">
<swiper-item>
<view class="page__bd">
<view class="page__bd-books center">
<image
src="../../assets/images/book1.png" />
</view>
<view class="page__bt">
<view class="page__bt-readings">
南风知我意</view>
<view class="page__bt-items center">
<view>1186人在读</view>
<image
src="../../assets/images/rg.png" />
</view>
</view>
</view>
</swiper-item>
</swiper>
Среди них swiper-item можно зациклить через wx:for.
Суммировать:
Эта небольшая разработка программы многому меня научила. Мы разрабатываем проекты для обучения. Поэтому при кодировании следует быть спокойным, не проявлять нетерпения, а при возникновении проблем вовремя проверять документацию или спрашивать у других, а потом больше думать о том, как этого добиться, можно ли этого добиться другими методами. . Таким образом, в постоянном мышлении и решении проблем, а также в постоянном наступании на яму вы можете быстро вырасти.
Кроме того, на самом деле есть еще много функций и деталей, которые не были обработаны должным образом. Это совместное использование времени не означает конец. Благодаря непрерывному обучению мы продолжим улучшать функции проекта и разбираться с различными деталями.
Гитхаб:яояофейхуа/чтение
☝想要一个star哦☺