предисловие
В последнее время я изучаю разработку апплета WeChat, и я также сотрудничал с двумя одноклассниками, чтобы имитировать апплет WeChat APP. Здесь я в основном делюсь своим процессом обучения и некоторыми ямами, на которые я наступил, надеюсь, это поможет вам.
подготовка к разработке
- Инструменты разработчика WeChat
- Редактор кода VScode
- Апплет Dewu APP WeChat
- Вам нравится библиотека компонентов Vant
- Библиотека векторных иконок Alibaba
- markman(цветовое расстояние)
Общая архитектура
- Проект разработан на основе облака апплетов, и используется шаблонШаблон быстрого запуска облачной разработкиПоскольку это проект с полным стеком, интерфейс использует режим разработки wxml + wxss + js, поддерживаемый апплетом, а название принимаетBEMСоглашения об именах. Серверная часть использует облачную базу данных для управления данными.
Части, за которые я отвечаю в проекте, в основном следующие (некоторые данные записываются как фиксированные данные вconfig, файл js передается черезmodule.exportsВыставляйте, импортируйте его в соответствующий заголовок js страницы, когда на него нужно ссылаться, напримерconst {} = require('../../../../config/buys')). Я использую больше в проектеvantкомпонент, который необходимо построитьnpmимпортировать, когда пакетvant, смотрите подробностиЕсть npm-установки ванта. Когда на странице используется сторонний компонент, он должен быть объявлен в соответствующем json файле, чтобы не повторять работу, его можно напрямуюapp.jsonзаявление в. пример:("usingComponents": "van-search": "@vant/weapp/search/index"})
|-config 对应数据
|-assem.js
|-buys.js
|-detail.js
|-kind.js
|-search.js
|-pages
|-buy_page
|-page
|-assem 筛选排序页
|-buy 购买首页
|-detail 商品详情页
|-kinds 品牌分类页
|-produce 鉴别简介页
|-search 搜索页
Планирование проекта
- Перед созданием этого апплета я сначала проанализировал соответствующие функции каждой страницы, понял детали взаимодействия этого апплета и понял элементы данных сбора данных. Это можно условно разделить на четыре шага: анализ страницы, создание набора данных, деконструкция базового макета страницы, привязка данных и переход.
Что касается апплета Dewu APP WeChat, ниже представлена панель вкладок моего апплета. (немного грубовато, но видно 😶)
"tabBar": {
"selectedColor": "#000000",
"borderStyle": "white",
"backgroundColor": "#fff",
"list": [
{
"text": "购买",
"pagePath": "pages/buy_page/page/buy/buy",
"iconPath": "images/buy.png",
"selectedIconPath": "images/buy_active.png"
},
{
"text": "鉴别查询",
"pagePath": "pages/disting/disting",
"iconPath": "images/disting.png",
"selectedIconPath": "images/disting_active.png"
},
{
"text": "洗护",
"pagePath": "pages/wash/wash",
"iconPath": "images/wash.png",
"selectedIconPath": "images/wash_active.png"
},
{
"text": "我",
"pagePath": "pages/my_page/my/my",
"iconPath": "images/my.png",
"selectedIconPath": "images/my_active.png"
}
]
},
облачная база данных
Облачная база данных — это база данных NoSQL. Каждая таблица представляет собой коллекцию. Что касается моей проектной части, я в основном создаю коллекцию предметов.
dewu_goods 商品表 用于存储创商品的信息
- _id
- amway 是否为推荐
- brand 品牌
- buyer 已购买人数
- ctime 数据创建时间
- digest 详情介绍
- img 详情图
- pic 商品展示图
- kind 种类
- price 价格
- sex 适应人群
- title 简介
- type 首页索引
После создания набора данных вам необходимо изменить разрешение на доступ к данным, чтобы получить к нему обычный доступ.
Эти операции можно выполнять в базе данных.Обратите внимание, что формат данных импорта должен быть
.csvили.jsonфайла, вы можете сначала использовать таблицу Excel, чтобы определить, как преобразовать набор данных в файл соответствующего формата и напрямую импортировать его в базу данных.
const db = wx.cloud.database() //云数据库
const dewuCollection = db.collection('dewu') //在js文件中导入数据集合
Деконструкция проекта
Ниже приведена моя основная реализация интерфейса апплета Dewu APP.
Затем разберите детали каждой страницы.
Купить дом
Купить стили главной страницы
<view class="page">
<!-- 使用van-sticky设置dewu-hd吸顶 搜索栏-->
<van-sticky>
<!-- dewu-hd使用flex布局 -->
<view class="dewu-hd">
<view class="dewu-hd-search" bindtap="gotoSearch">
<van-search placeholder="搜索单号" disabled />
</view>
<view class="dewu-kinds" bindtap="kinds"><image src=""></image>
</view>
</view>
</van-sticky>
<!-- van-tabs实现购买页导航及与内容页对应 -->
<van-tabs class="dewu-tabs">
<van-tab title="推荐">
<view class="dewu-tip">
<view class="dewu-tip-img-hd"><image src=""></image>
</view>
<!-- 使用van-grid布局设置边框隐藏快速定位 -->
<van-grid>
<van-grid-item use-slot>
<image style="" src=""></image>
<text>正品保障</text>
</van-grid-item>
</van-grid>
</view>
<view class="van-items">
<van-grid class="van-grid-bd">
<!-- grid布局自定义van-grid-item样式 -->
<van-grid-item use-slot>
<view class="item-img"><image src=""></image></view>
<view class="item-text">
<span>{{}}</span>
</view>
</van-grid-item>
</van-grid>
</view>
</van-tab>
</van-tabs>
</view>
Товарная позицияvan-grid-itemИспользуется абсолютное позиционирование.tipsгенерал-лейтенантdirectionсвойство установлено наhorizontal, содержимое сетки можно расположить горизонтально. Настройки окна поискаdisabledСвойство отключено для решения проблемы нажатия автофокуса. в настоящее время используетvan-gridАтрибуты для настройки каждого элемента должны быть установлены во время макета.use-slotатрибут, иначе он не вступит в силу.
Этот макет страницы не сложный, но я все же столкнулся с ямой при написании этого макета (ощущение, что я сам прыгнул, я тоже 🐖). делаетdewu-hdЯ использую его напрямуюvan-stickyПакет реализован, но фактический эффект заключается в том, что вкладки также должны быть исправлены под dewu-hd. Здесь нельзя использовать тот же метод, что и выше, фактический эффект сделает всеvan-tabsПотолок не может сдвинуть страницу. На самом деле здесь нужно только датьvan-tabsдобавить однуstickyсвойства и наборoffset-top, обратите внимание, что эти два свойства должны использоваться вместе, чтобы они вступили в силу.
получить предмет
async onLoad() {
this.proData() //获取推荐数据项
this.shoeData() //获取鞋类数据项
},
proData() {
const {data} = await dewuCollection
.where({
amway: db.command.eq('TRUE')
})
.field({ //获取指定数据项，提升性能
_id:true,
pic:true,
title:true,
buyer:true,
price:true
})
.get()
// console.log(data);
this.setData({
produces: data,
})
}
shoeData() {
let data1 = await dewuCollection
.where({
type: 1
})
.get()
// console.log(data1.data);
this.setData({
shoes: data1.data
})
}
Страница сведений о привязке
gotoDetail(e) {
// console.log(e);
wx.navigateTo({
url: '/pages/buy_page/page/detail/detail?id='+e.currentTarget.dataset.id,
})
},
Используйте продукт_idСвойство уникально, при установке элемента данныхidравный_idПерейдите на страницу сведений и отобразите соответствующие данные.
страница сведений о продукте
Стиль страницы сведений о продукте
<view class="page">
<!-- 头部 滑块及标题 -->
<view class="detail_hd">
<swiper class="swiper__hd">
<swiper-item class="swiper_hd"></swiper-item>
</swiper>
<view class="dots1">
<view class="{{current==index?'active':''}}"></view>
</view>
<view class="detail_hd-title">{{img.digest}}</view>
<view class="detail_hd-price">
<text id="p2">￥{{img.price}}</text>
</view>
</view>
<van-cell class="size" bind:click="showPopup1">
<view class="size-l">选择尺码</view>
<view class="size-r">请选择尺码</view>
<image class="ricon" style="width:26rpx;height:26rpx;" src=""></image>
</van-cell>
<!-- flex布局 每一个swiper-item包含三项 -->
<view class="detail_bd">
<swiper></swiper></view>
<van-goods-action>
<button>立即购买</button>
</van-goods-action>
</view>
Целое разделено наdetail_hdиdetail_bdдве части. настроитьswiperнужно установитьdotСоответственно отображать картинку и менять стиль,circularВключает ли параметр свойства анимацию переключения ползунка, здесь тернарный оператор используется для определения необходимости добавления нового имени класса стиля. При определении стиля цен на товары можно пройтиfirst-letterПсевдоэлемент для определения стиля символа ¥. ссылочный компонентvan-goods-actionКнопка "Купить" не работает.
<van-popup closeable position="bottom" custom-style="height: 75%">
<view class="detail_size-hd">
<view class="detail_size-hd-img">
<image bindtap="previewImage" mode="aspectFit" src="{{img.pic}}">
</image>
</view>
<view class="detail_size-hd-price">
<text style="font-size:25rpx;">￥</text>
<text wx:if="{{activeSizeIndex==-1}}">--</text>
<text wx:if="{{activeSizeIndex==index}}">{{item.price}}</text>
</view>
<view>
<image src=""></image>
<text wx:if="{{activeSizeIndex==-1}}">请选择商品</text>
<text wx:if="{{activeSizeIndex==index}}">已选 {{item.size}}</text>
</view>
</view>
<!-- 尺码布局 -->
<view class="detail_size-bd">
<van-grid square gutter="10">
<van-grid-item>
<view class="size">
<text id="p3">{{item.size}}</text>
<text id="p4">￥{{item.price}}</text>
</view>
</van-grid-item>
</van-grid>
</view>
<view>
<button>{{}}</button>
</view>
</van-popup>
использоватьvan-popupComponent, установите событие на соответствующую метку, чтобы привязать всплывающее окно. пример:<van-cell bind:click="showPopup"></van-cell>. Тернарный оператор устанавливает стиль по умолчанию и управляет выбранным стилем границы, устанавливаетcloseableсвойство, чтобы включить кнопку закрытия.squareнастраиватьvan-grid-itemквадратный,gutterУстановите шаг сетки.
<van-sticky sticky offset-top="{{ 180 }}">
<view class="head">
<view class="detail_produce-hd">相关推荐</view>
<view class="detail_close" bindtap="onClose2">
<image style="width:40rpx;height:40rpx;" src=""></image>
</view>
</view>
</van-sticky>
настраиватьdetail_produce-hdПоднимитесь наверх, закройте привязку значка справаbind:close="onClose"событие.
Получить информацию о продукте
async onLoad(options) { //获取对应_id的商品数据
console.log(options);
let id = options.id
console.log(id);
wx.cloud.database().collection('dewu')
.doc(id)
.get()
.then(res => {
console.log(res);
this.setData({
img :res.data
})
})
},
Всплывающий слой
showPopup() { //显示弹出层
this.setData({
show: true,
});
},
onClose() { //关闭弹出层
this.setData({
show: false,
});
},
выберите размер
pickSize(e) {
let flag = e.currentTarget.dataset.flag
let index = e.currentTarget.dataset.index
if(flag==index) {
this.setData({
activeSizeIndex: -1,
flag: -1
})
}
else {
this.setData({
activeSizeIndex: index,
flag: index
})
}
},
Нажмите на размер,flag==indexЭто выбранное состояние, когда вы снова щелкаете или щелкаете другой размер, установите его в невыбранное состояние, иначе оно будет установлено вflagравныйindexсделать его выбранным.
страница поиска
стиль страницы поиска
<view class="page">
<view class="search">
<van-stichy>
<van-search value="{{value}}" bind:clear="onClear" placeholder="输入商品名称、货号"/>
</van-stichy>
<!-- block包装 flex布局 -->
<block wx:if="{{showHistory == true && historyList.length > 0}}">
<view class="historyContainer">
<view class="title">历史搜索<image class="delete" src=""></image>
</view>
<view class="historyList">
<view class="historyItem">
<text class="order">{{}}</text>
</view>
</view>
</view>
</block>
</view>
</view>
Страница поиска в основном разделена на две части: главное поле поиска и содержимое (рекомендации по поиску, история и список искомых продуктов). использовать здесьvan-stickyОберните окно поиска так, чтобы оно было закреплено на потолке, а в разделе содержимого использовалисьblockупаковка этикеток с использованиемwx:ifЭто свойство управления, чтобы определить, следует ли отображать.
история поиска
async onSearch(e) {
// console.log(e);
if (!e.detail.trim()) {
wx.showToast({
title: '请输入商品名',
})
return
}
let {value, historyList} = this.data
if(historyList.indexOf(value) !== -1) {
historyList.splice(historyList.indexOf(value), 1)
}
historyList.unshift(value)
this.setData({
historyList
})
wx.setStorageSync('value', historyList)
let keyword = e.detail.trim()
let results = await dewuCollection
.where({
title: db.RegExp({
regexp: keyword,
options: 'i'
})
})
.get()
if (results.data.length == 0 || keyword == '') {
wx.showToast({
title: '不存在'+keyword,
})
}
else {
await dewuCollection
.where({
title: db.RegExp({
regexp: keyword,
options: 'i'
})
})
.orderBy('hot', 'desc')
.get()
.then(res => {
console.log(res);
this.setData({
results: res.data
})
})
}
},
onLoad() {
this.getSearchHistory() //获取历史搜索
},
getSearchHistory() {
let historyList = wx.getStorageSync('value')
if(historyList) {
this.setData({
historyList
})
}
},
Локально при загрузке страницыstorageПолучите исторические записи поиска из , и определите, является ли значение пустым при определении поиска onSearch, что будет законным.valueвставлятьhistoryList, когда используется здесьunshiftметод, который может гарантировать, что самые последние записи поиска отображаются на переднем плане, и использует регулярные выражения для нечеткого запроса соответствующих элементов в базе данных и сохранения их в массиве.resultsв, когдаresults.length > 0Отображает список продуктов. использоватьwx.setStorageSyncбудетvalueв кеш,wx.getStorageSyncПолучить печать. пройти черезindexOfсуждение о методеvalueСуществует ли он уже, если да, удалите егоhistoryListпункт в .
Поиск по истории
async historySearch(e) {
// console.log(e);
let historyList = this.data.historyList
let value = historyList[e.currentTarget.dataset.index]
this.setData({
value, //修改value
showHotList: false, //隐藏热门搜索
showHistory: false, //隐藏历史搜索
results: [] //清空商品列表
})
},
При нажатии на исторический поисковый запросsetDataИзмените соответствующее значение, затем вызовитеonSearchметод.
четкий контроль
onClear() {
this.setData({
results: [],
value: '',
showHotList: true,
showHistory: true
});
},
onChange(e) { //search框输入改变时实时修改数据
// console.log(e.detail);
this.setData({
value: e.detail,
showHotList: false,
showHistory: false,
results: []
})
// console.log(this.data.showHotList);
if (this.data.value=='') {
this.setData({
showHotList: true,
showHistory: true
})
}
},
Очистить историю поиска
deleteSearchHistory() {
wx.showModal({
content: '确认清空历史记录',
success: (res) => {
if(res.confirm) {
this.setData({
historyList: []
})
}
}
})
wx.removeStorageSync('value')
},
Щелкните значок удаления, чтобы открыть диалоговое окно.wx.showModalРеализовать взаимодействие, пользователь нажимает OK, чтобы очиститьhistoryListи использоватьwx.removeStorageSyncУдалите локально сохраненную историю.
Страница категории бренда
Стиль страницы категории
<view class="page">
<van-sticky>
<view class="search" bindtap="gotoSearch">
<van-search placeholder="搜索商品" input-align="center" disabled />
</view>
</van-sticky>
<view class="kinds">
<view class="hd">
<scroll-view class="scroll-view-left">
<view class="scroll-view-left-item {{activeNavIndex == index?'active': ''}}">
<text>{{}}</text>
</view>
</scroll-view>
</view>
<view class="bd">
<scroll-view>
<view>
<view class="kind-title">
<van-divider contentPosition="center">{{}}</van-divider>
</view>
<van-grid>
<van-grid-item>{{}}</van-grid-item>
</van-grid>
</view>
</scroll-view>
</view>
</view>
</view>
Страницы категорий в основном используютсяscroll-viewУстановить вертикальную прокрутку, нажать слеваscroll-view-left-itemКогда этот предмет станет доступен (#00cbcc) и отобразить соответствующий элемент категории брендаkindsItem. общее принятиеflexмакет, яма здесьscroll-view-leftдолжен положитьfont-sizeУстановите 0 в дочерних элементахscroll-view-left-itemустановить вfont, чтобы поля блочных элементов не влияли на макет.
Инициализировать категорию
onLoad: function (options) {
this.setData({
kindNav: kindNav,
kindall: kindItem,
// console.log(this.data.kindall);
let kinds=[];
// console.log(this.data.kindall)
this.data.kindall.forEach(kind => { //循环从所有品类中获取对应kindNav的并存入数组中
if(kind.camptype == 0) {
kinds.push(kind)
}
})
this.setData({
kindItem: kinds,
})
}, )
},
Выберите категорию
changeKinds(e) {
console.log(e);
let {index, type} = e.currentTarget.dataset;
console.log(index, type);//index与推荐品牌的索引有关。type与kind.js的camptype有关
this.setData({
activeNavIndex: index,
})
let title=[]
this.data.kindTitles.forEach(kindTitle => {
if(index == kindTitle.titletype) {
title.push(kindTitle)
}
})
this.setData({
kindItem: kinds,
})
},
Привязать страницу фильтра
gotoAssem(e) {
// console.log(e); 利用kind属性值唯一（buy页面tabs的title）
wx.navigateTo({
url: '/pages/buy_page/page/assem/assem?title='+e.currentTarget.dataset.title,
})
},
Страницы сортировки фильтров
Сортировка стилей страницы
<view class="page">
<van-sticky>
<view class="search" bindtap="gotoSearch">
<van-search placeholder="{{titles}}" disabled />
</view>
<view class="tab">
<view wx:for="{{tabs}}" wx:key="index" data-index="{{index}}"
class="tab-item {{activeTabIndex == index?'active': ''}}" bindtap="changeItem">
<text>{{item.title}}</text>
<image style="width:26rpx;height:26rpx;" src="{{item.pic}}"></image>
</view>
</view>
</van-sticky>
</view>
tabиспользоватьflexмакет.goodsНекоторые ссылки на макетbuyТоварный макет страницы.
<van-popup>
<scroll-view class="pop" scroll-y>
<van-collapse>
<van-collapse-item title="适用人群" value="全部" name="1">
</van-collapse-item>
<van-grid column-num="3" gutter="{{ 10 }}">
<van-grid-item class="{{activeIndex1==index?'active1':''}}">{{}}</van-grid-item>
</van-grid>
</van-collapse>
<van-goods-action>
<button>重置</button>
<button>确定</button>
</van-goods-action>
</scroll-view>
</van-popup>
использовать здесьvan-collapseПри использовании компонента в качестве откидной панели есть яма, ее не должно быть.van-gridраздел контентаvan-collapse-item, он должен быть на одном уровне с ним, иначе под ячейкой образуется пустое пространство и содержимое не может нормально отображаться.После многих попыток его следует вынести наружу для достижения эффекта.
Первоначальный заказ товара
async onLoad(options) {
// console.log(options);
let title = options.title
let data1 = await dewuCollection
.where({
kind: title //绑定跳转时（kind唯一）获取对应数据
})
.get()
// console.log(data1);
this.setData({
goods: data1.data,
titles: title
})
},
Базовая сортировка
async changeItem(e) {
// console.log(e);
let index = e.currentTarget.dataset.index //index对应排序方式
this.setData({
activeTabIndex: index
})
// console.log(index);
if(index == 1) { //销量排序
await dewuCollection
.where({
kind: this.data.titles
})
.orderBy('buyer', 'desc')
.get()
.then(res => {
this.setData({
goods: res.data,
index: index
})
// console.log(this.data.index);
})
}
if(index == 0) { //综合排序
await dewuCollection
.where({
kind: this.data.titles
})
.get()
.then(res => {
this.setData({
goods: res.data
})
})
}
if(index == 2 && this.data.flag == -1) { //价格降序排序
await dewuCollection
.where({
kind: this.data.titles
})
.orderBy('price', 'desc')
.get()
.then(res => {
this.setData({
goods: res.data,
flag: 1
})
})
return
}
if(index == 3) { //创建时间排序
await dewuCollection
.where({
kind: this.data.titles
})
.orderBy('ctime', 'desc')
.get()
.then(res => {
this.setData({
goods: res.data
})
})
}
if(index == 4) { //弹出筛选层
this.setData({
show: true,
})
}
else if(index == 2 && this.data.flag == 1) { //价格升序排序
await dewuCollection
.where({
kind: this.data.titles
})
.orderBy('price', 'asc')
.get()
.then(res => {
this.setData({
goods: res.data,
flag: -1
})
})
}
},
Установите для атрибута флага значение по умолчанию -1,flag==-1При нажатии на цену отсортировать по убыванию и установитьflag==1,flag==1При нажатии на цену отсортировать по возрастанию и установитьflag==-1.
сортировка фильтром
pick(e) {
let flag = e.currentTarget.dataset.flag
let index = e.currentTarget.dataset.index
let cd = this.data.human[index].kind
if(flag==index) {
this.setData({
activeIndex1: -1,
flag1: -1,
cd1: ''
})
}
else {
this.setData({
activeIndex1: index,
flag1: index,
cd1: cd
})
}
},
Сброс фильтра
replace() { // 点击重置按钮将所有筛选条件回复默认
this.setData({
flag1: -1,
activeIndex1: -1,
flag2: -1,
activeIndex2: -1,
flag3: -1,
activeIndex3: -1,
cd1: '',
cd2: '',
cd3: 0,
cd4: 10000000,
})
},
Здесь есть яма, которой не может бытьdataзаявление в (num：Infinity), где бесконечность не действует, текущая оптимизация заключается в том, чтобы объявить ее константой.
Подтвердить проверку
async ischeck() { //点击确定按钮进行筛选显示结果
let cd3 = Number(this.data.cd3)
let cd4 = Number(this.data.cd4)==0?1000000:Number(this.data.cd4)
let index = Number(this.data.index)
if(this.data.cd1!='' && this.data.cd2!=''){
await dewuCollection
.where({
kind: this.data.titles,
sex: this.data.cd1,
brand: this.data.cd2,
price: _.gt(cd3).and(_.lt(cd4)),
})
.get()
.then(res => {
this.setData({
goods: res.data,
show: false,
})
})
return
}
},
Ямы сложности
<van-grid-item use-slot wx:for="{{shoes}}" data-item="{{item}}"
wx:key="index" data-id="{{item._id}}" bindtap="gotoDetail"></van-grid-item>
gotoDetail(e) {
// console.log(e);
wx.navigateTo({
url: '/pages/buy_page/page/detail/detail?id='+e.currentTarget.dataset.id,
})
},
Перейдите на страницу сведений и сохраните соответствующий элемент данных. Используйте здесь_idуникальный,_idназначатьdata-id,когдаidТолько когда они равны, они могут прыгать и принимать соответствующие_idДанные.
<van-grid-item class="{{activeSizeIndex==index?'size-active':''}}"
use-slot wx:for="{{size}}" wx:key="index" data-flag="{{flag}}"
data-index="{{index}}" bindtap="pickSize">
<view class="size">
<text id="p3">{{item.size}}</text>
<text id="p4">￥{{item.price}}</text>
</view>
</van-grid-item>
pickSize(e) {
let flag = e.currentTarget.dataset.flag
let index = e.currentTarget.dataset.index
if(flag==index) {
this.setData({
activeSizeIndex: -1,
flag: -1
})
}
else {
this.setData({
activeSizeIndex: index,
flag: index
})
}
},
Выберите и измените при нажатии на размерtext, щелкните элемент еще раз, чтобы сбросить стиль, если щелкнуть другой элемент, он будет снят, а выбранный элемент будет выбран. Здесь, установив еще одинflag, в сочетании сindexВыбрано ли двойное управление.
<view
wx:for="{{kindNav}}"
wx:key="index"
data-index="{{index}}"
data-type="{{item.type}}"
bindtap="changeKinds"
class="scroll-view-left-item {{activeNavIndex == index?'active': ''}}">
<text>{{item.text}}</text>
</view>
changeKinds(e) {
console.log(e);
let {index, type} = e.currentTarget.dataset;
console.log(index, type);//index与推荐品牌的索引有关。type与kind.js的camptype
this.setData({
activeNavIndex: index,
})
let kinds = []
this.data.kindall.forEach(kind => {
if(kind.camptype == type) {
kinds.push(kind)
}
})
this.setData({
kindItem: kinds,
})
}
связыватьtypeиkind.camptype, когда выбранный элемент изменяется, текущий элементindexназначатьactiveNavIndex,использоватьkindallЧтобы сохранить все элементы данных, используйтеforeachПереберитеkindall, будет удовлетворять условиюkind.camptype==typeданные хранятся в массивеkinds, а потомsetDataВот и все.
deleteSearchHistory() {
wx.showModal({
content: '确认清空历史记录',
success: (res) => {
if(res.confirm) {
this.setData({
historyList: []
})
}
}
})
wx.removeStorageSync('value')
},
При очистке истории не толькоhistoryListустановить пустым и использоватьwx.removeStorageSyncОчистите кэш локального хранилища.
маленький совет
При написании собственных проектов используйте большеconsole.log()Печать, отслеживание изменений данных, см. дополнительную документациюw3cschool,Документация по разработке WeChat,Vant-Weapp.
исходный код
Эпилог
Процесс написания проекта для меня является вызовом.В конце концов, это первый раз, когда я фокусируюсь на сотрудничестве над проектом.Ошибки, встречающиеся в проекте, будут раздражать, но после того, как я настоял на написании функций, это очень полезно. Большое спасибо за написание проекта.Помогли учителям и одноклассникам. Если вам понравилась эта моя статья или вы видите здесь небольшую помощь, пожалуйста, поставьте палец вверх 😺! В то же время я также очень надеюсь, что вы, прочитавшие статью, можете дать мне несколько советов, и я с нетерпением жду возможности обсудить с вами изучение мини-программ WeChat! (нажмите 👉выучить больше)