Раньше я не разрабатывал непосредственно небольшие программы в своей работе, поэтому мне приходится изучать это, когда у меня есть свободное время в последнее время. Поскольку я начинал с нуля, я не использовал никакой фреймворк и UI-библиотеку.
Отображение результатов(界面样式设计与交互来自iOS 4.8.0版本知乎App):
Для динамических эффектов перейдите кGitHubПроверить.
1. Подготовка перед стартом
- Подать заявку на учетную запись: согласноМини-регистрация программыДокументы, заполнить информацию и представить соответствующие материалы, вы можете иметь свой собственный счет в мини-программе.
- Инструменты разработки:Инструменты разработчика WeChat
- Источники данных:
- Easy Mock: Артефакт моделирования данных, вы можете записывать и возвращать данные в соответствии с нужным вам форматом, и все данные генерируются случайным образом.
- Mock.js: Easy Mock представляет Mock.js, но в документе представлена только часть грамматики.Mock.jsСм. более конкретный синтаксис в .
- icon: Библиотека векторных иконок Alibaba
2. Инициализируйте небольшую программу
- Создать новую пустую папку
- Откройте Инструменты разработчика WeChat, следуйте"Ваш первый апплет"Следуйте инструкциям в документации, чтобы создать собственный апплет.
- Структура каталогов
weChatApp
|___client
| |___assets // 存储图片
| |___pages // 页面
| | |___index // 首页
| | |___index.wxml // 页面结构文件
| | |___index.wxss // 样式表文件
| | |___index.js // js文件
| |___utils // 全局公共函数
| |___app.js // 系统的方法处理文件
| |___app.json // 系统全局配置文件
| |___app.wxss // 全局的样式表
| |___config.json // 域名等配置文件
|___project.config.json
|___README
- файл конфигурации апплета
app.jsonсодержание
{
// 页面路由
"pages": [
"pages/index/index", // 首页
"pages/findMore/findMore", // 想法页（开始起名为发现页面，后来没改/(ㄒoㄒ)/~~）
"pages/userCenter/userCenter", // 更多（同上，原来起名为个人中心o(╯□╰)o）
"pages/market/market", // 市场
"pages/searchResult/searchResult",// 搜索结果页
"pages/message/message", // 消息列表页
"pages/titleDetail/titleDetail", // 点击标题进入的问题详情页
"pages/contentDetail/contentDetail"// 点击内容进入的回答详情页
],
// 窗口
"window": {
"backgroundColor": "#FFF", // 窗口的背景色
"backgroundTextStyle": "dark", // 下拉背景字体、loading 图的样式，仅支持 dark/light
"navigationBarBackgroundColor": "#FFF",// 顶部tab背景颜色
"navigationBarTitleText": "知小乎", //顶部显示标题
"navigationBarTextStyle": "black", // 导航栏标题颜色，仅支持 black/white
"enablePullDownRefresh": true // 是否开启下拉刷新
},
// tab导航条
"tabBar": {
"backgroundColor": "#fff", // 背景颜色
"color": "#999", // 默认文字颜色
"selectedColor": "#1E8AE8", // 选中时文字颜色
"borderStyle": "white", // tabbar上边框的颜色， 仅支持 black/white
/**
* tab列表，最少2个，最多5个
* selectedIconPath: 选中时图片
* iconPath: 默认图片
* pagePath: 对应页面路由
* text: 对应文案
**/
"list": [{
"selectedIconPath": "assets/home-light.png",
"iconPath": "assets/home.png",
"pagePath": "pages/index/index",
"text": "首页"
}, {
"selectedIconPath": "assets/find-light.png",
"iconPath": "assets/find.png",
"pagePath": "pages/findMore/findMore",
"text": "想法"
},
{
"selectedIconPath": "assets/market-light.png",
"iconPath": "assets/market.png",
"pagePath": "pages/market/market",
"text": "市场"
},
{
"selectedIconPath": "assets/msg-light.png",
"iconPath": "assets/msg.png",
"pagePath": "pages/message/message",
"text": "消息"
}, {
"selectedIconPath": "assets/more-light.png",
"iconPath": "assets/more.png",
"pagePath": "pages/userCenter/userCenter",
"text": "更多"
}]
}
}
- Настройте имя домена интерфейса: поскольку Easy Mock используется для имитации данных интерфейса, вы можетеФон управления мини-программой - Настройки разработки - Имя домена серверагенерал-лейтенант
request合法域名Настроен как `
3. Проблемы, возникающие при разработке, и решения
1. Апплет отображает фрагменты HTML
После прочтения веб-версии Zhihu данные ответа, возвращаемые интерфейсом, представляют собой фрагмент HTML-кода, поэтому изображения можно вставлять в любое место ответа.对，没错，就是下面酱紫的(╯°□°）╯︵┻━┻
После неоднократных попыток я обнаружил, что нативный метод написания не поддерживает отрисовку фрагмента HTML-кода, поэтому я отказался от практики возврата фрагментов HTML-кода, поэтому в моем списке ответов нет картинок (ಥ_ಥ).
Но при расследовании нашел нестандартный компонент:Компонент парсинга форматированного текста апплета wxParse-Wechat, еще не пробовали, готовы попробовать в следующий раз, когда вы оптимизируете свой проект.
2. Переключите верхнюю вкладку на главной странице
Реализовать идеи
Каждая кликабельная вкладка привязана отдельно
data-index, в самом внешнем слоеbindtapПолучить нажатую вкладку в связанном методеindexзначение, а затем в соответствии сindexЗначения , соответственно, показывают соответствующиеtab-content
<view class="tab-wrapper" bindtap="setActive">
<view class="tab-item {{isActive == 0 ? 'tab-item-active' : ''}}" data-index="0">关注</view>
<view class="tab-item {{isActive == 1 ? 'tab-item-active' : ''}}" data-index="1">推荐</view>
<view class="tab-item {{isActive == 2 ? 'tab-item-active' : ''}}" data-index="2">热榜</view>
<view class="tab-item-line" animation="{{animationData}}"></view>
</view>
<view class="tab-content {{isActive == 0 ? 'show' : 'hide'}}">
// ...
</view>
<view class="tab-content {{isActive == 1 ? 'show' : 'hide'}}">
// ...
</view>
<view class="tab-content {{isActive == 2 ? 'show' : 'hide'}}">
// ...
</view>
3. Подтягивающая загрузка и выпадающее обновление
Реализовать идеи
Подтягивающая нагрузка: эммммммм... Я имею в виду, что подтягивающая нагрузка больше нагружается после достижения дна, я боюсь, что это будет отличаться от понимания каждого о (╯□╰)о.
- Собственный метод: onReachBottom, после получения новых данных
concatк исходному списку данных.
Потяните вниз, чтобы обновить:
- Собственный метод: onPullDownRefresh, исходный список данных
concatПосле получения новых данных.
要注意的是，每次对数组进行操作后，都要使用setData对原数组重新赋值，否则数据不会更新的啊( ⊙ o ⊙ )！
4. Хранение истории поиска
Реализовать идеи
wx.setStorage, wx.getStorage и wx.removeStorage
- Хранить историю поиска:
> - 使用wx.setStorage，触发搜索时，检查搜索历史列表中是否含有该字段，如果有则忽略，如果没有则将该字段压入数组中。
- Показать историю поиска:
> - 使用wx.getStorage，在显示搜索蒙层时，获取到搜索历史列表，循环显示，当搜索历史列表长度大于1时，显示清空搜索历史的按钮。
- Удалить историю поиска:
- Одиночное удаление: Каждая история поиска привязывается к удалению события, получает ключевое слово для изменения ключевого слова, удаляет ключевое слово, соответствующее ИНДЕКСу, из списка истории поиска канала и повторно сохраняет его через wx.setStorage.
- Удалить все: используйте wx.removeStorage, чтобы напрямую удалить ключевые слова, соответствующие истории поиска.
5. Компонент карусели swiper
В компоненте карусели на странице идеи в приложении Yuanzhihu.xxxx人正在讨论Это вертикальная текстовая карусель, встроенная в модуль карусели, но компоненты swiper-карусели в апплете не поддерживают взаимную вложенность, поэтому эта часть не была реализована, поэтому пришлось писать в другом стиле /(ㄒoㄒ) /~ ~.
6. Натяжной потолок
Когда строка заголовка на странице прокручивается вверх, она отображается вверху.
добиться эффекта
План реализации
- Использовать всю страницу
<scroll-view></scroll-view>завернуть и связатьbindscrollсобытие, прослушивание расстояния прокрутки. - настраивать
<scroll-view>Когда он вертикальный, необходимо установить<scroll-view>высота. - Дублируйте идентичную строку заголовка и добавьте класс стиля в потолке
fixed. - использовать
wx:ifОпределите, соответствует ли расстояние прокрутки текущей страницы требованиям, и, если необходимое расстояние достигнуто, отобразите потолочную строку заголовка.
<view class="find-hot-header fixed" wx:if="{{scrollTop >= 430}}">
<view class="find-hot-title">最近热门</view>
</view>
<view class="find-hot-header">
<view class="find-hot-title">最近热门</view>
</view>
7. Разверните и сверните полный текст
Отображение результатов
Текстовая часть по умолчанию добавляется с классом, а за двумя строками текста отображается многоточие.
.text-overflow{
height: 85rpx;
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
}
Когда вы щелкаете, чтобы развернуть полный текст и закрыть полный текст, значение showIndex[index] меняется на противоположное, и класс соответственно добавляется или удаляется.
<view class="find-hot-content {{!showIndex[index] ? 'text-overflow' : ''}}">
{{item.content}}
</view>
<view wx:if="{{!showIndex[index]}}" class="find-show-all" data-index="{{index}}" bindtap="toggleShow">展开全文</view>
<view wx:if="{{showIndex[index]}}" class="find-show-all" data-index="{{index}}" bindtap="toggleShow">收起全文</view>
8. Измените стиль переключателя
switch类名如下，一定要加上父类，不然全局的都会被改掉_(:з」∠)_。
父类 .wx-switch-input{
display: inline-block;
position: absolute;
top: 20rpx;
right: 20rpx;
width: 84rpx;
height: 44rpx;
}
父类 .wx-switch-input::before{
width: 80rpx;
height: 40rpx;
}
父类 .wx-switch-input::after{
width: 40rpx;
height: 40rpx;
}
4. Резюме
Благодаря разработке этой небольшой программы я многому научился.Хотя я столкнулся со многими проблемами, процесс решения проблем позволил мне получить больше.Практическая практика - лучший способ учиться.
Кроме того, в этом проекте еще много несовершенных функций, а некоторые детали еще можно оптимизировать.Впереди долгий путь (๑•̀ㅂ•́)و✧.
Если в статье есть ошибки и неточности, критика и исправления приветствуются.
адрес проекта:GitHub
(づ｡◕‿‿◕｡)づ★ 想要个star
Прилагаю информацию о приеме на работу, (╹▽╹) Нажмите, чтобы увидеть