предисловие
Самым счастливым занятием для программиста может быть жарким летом, когда он включает кондиционер, пьет кофе и печатает код. Так как я только в последние дни познакомился с мини-программами WeChat, мне пришла в голову идея сделать мини-программу. При разработке этой небольшой программы мы столкнулись со многими проблемами и получили много преимуществ. Далее я опишу некоторые из проблем, с которыми я столкнулся, и те, которые я решил. Надеюсь принести вам некоторую помощь
Небольшие детали программы
Эффект домашней страницы
- плавающий css
.starbucks-list:nth-child(n){
float: left;
margin-left: 40rpx;
}
.starbucks-list:nth-child(2n){
float: right;
margin-left: 0;
margin-right: 40rpx;
}
Далее будет подробно описано несколько функций
- scroll-x и переключение изображений
说到这里不得不吐槽一些小程序开发者工具
也可能是电脑的问题在电脑上开发者工具的scroll-x无效，真机上正常使用，
Давайте поговорим о переключении изображений: у меня есть идентификатор, привязанный к каждому изображению.При нажатии на изображение он должен судить, равен ли идентификатор, который вы нажали, идентификатору, который вы связали, и когда суждение верно, данные чередовались. Границу картинки сделать тернарным оператором суждения, а развилку в правом верхнем углу. (Должен сказать, что привязка данных - это хорошо).
код показывает, как показано ниже
wxml
<scroll-view scroll-x="{{scrollx}}" class="list-pic">
<view class="picture" wx:for="{{listPic}}" wx:key="{{index}}">
<image class="{{id==item.id?'check':''}}" data-id="{{item.id}}" data-url="{{item.url}}" src="{{item.url}}" bindtap="showChoose"
/>
<image wx:if="{{id==item.id}}" class="goupic" data-id="{{item.id}}" src="{{goupic}}" />
</view>
</scroll-view>
js
showChoose(e){
const id = e.currentTarget.dataset.id;
const url = e.currentTarget.dataset.url;
// console.log(e)
this.setData({
titlePic: url,
id:id
})
}
- Составление списков покупок и истории покупок
визуализация
Выбор продуктов в корзине и переключение приведенных выше изображений на самом деле похожи, привязка значения для определения того, какой продукт вы нажали, и изменение данных текущего продукта, вам нужно только судить
wx:if="{{item.num!=0 }}"
Можно добиться того, чтобы при количестве равном 0 знак минус и количество исчезали одновременно.
Это очень просто? Код структуры выглядит следующим образом:
<view class="starbucks-list" wx:for="{{starbucksList}}" wx:key="{{index}}">
<image bindtap="checkDrink" data-imgnum="{{item.imgnum}}" class="drinkImg" src="{{item.url}}" />
<text class="description">{{item.name}}</text>
<text class="price">￥{{item.price}}</text>
<view class="addNum" bindtap="addNumber" data-index="{{index}}" data-status="{{item.status}}">
<image wx:if="{{item.num!=0}}" src="{{delNum1}}" />
<image wx:else="" src="{{addNum}}" />
</view>
<view wx:if="{{item.num!=0 }}" data-index="{{index}}" class="delNum {{item.num==0?'out':''}}" bindtap="delNumber"
data-status="{{item.status}}">
<image src="{{delNum}}" />
</view>
<text wx:if="{{item.num!=0 }}" class="listNum {{item.num==0?'out':''}}">{{starbucksList[index].num}}</text>
<view wx:if="{{item.num!=0 }}" class="xiabiao {{item.num==0?'out':''}}"></view>
</view>
Но есть еще одна трудность, которая меня давно беспокоит, а именноStorage, потому что историю покупок нужно сохранять локально после успешной покупки.В начале моей идеей было использовать индекс кликнутого товара как ключ при нажатии на каждый плюсик, а потом хранить в нем какую-то информацию. Таким образом, каждый ключ является динамическим, и мы можем получать данные, пока находим ключ на следующей странице. Однако из-за скачка страницы я пробовал много способов щелкнуть индекс продукта, прежде чем найти его в интерфейсе истории. Поэтому я сдался (вы можете пообщаться со мной в частном порядке, если у вас есть решение).
Этот путь не работает, и я должен найти другой путь, поэтому я подумал использовать для его решения массив, и каждый продукт по умолчанию занимает позицию в массиве. Отмечаются следующие метки, которые помещаются в массив в соответствии с индексом каждого выбранного элемента. Затем возникает ошибка: когда у вас есть невыбранные товары, позиция, занимаемая массивом для вас, по умолчанию не определена, но когда вы зацикливаете массив с помощью wx: for в истории, undefined также будет занимать сетку, что приведет к тому, что ваш wxml появляться вопрос. Решение состоит в том, чтобы использовать метод split() массива для удаления пустых.
onLoad: function (options) {
const historyList = this.data.historyList
var that = this
wx.getStorage({
//获取数据的key
key: "key",
success: function (res) {
// console.log(res)
for (let i = 0; i < res.data.length; i++) {
historyList[i] = res.data[i]
}
for (let i = 0; i < historyList.length; i++) {
if (historyList[i] == null) {
historyList.splice(i, 1);
i = i - 1; // i - 1 ,因为空元素在数组下标 2 位置，删除空之后，后面的元素要向前补位，
// 这样才能真正去掉空元素,觉得这句可以删掉的连续为空试试，然后思考其中逻辑
// console.log(historyList);
}
}
that.setData({
historyList,
hasHistory:true,
})
}
})
-
интерфейс сведений о продукте
- Хранить детали и компоненты карты
Карта API является очень практичным компонентом. Интерфейс поиска по ключевым словам используется здесь для прямого запроса ближайших магазинов Starbucks. Вы также можете выбрать длинный адрес и короткий адрес. По сути, у вас есть все данные, которые вы хотите, которые удобнее. Должна быть волна Amway.
qqmapsdk.search({
keyword: '星巴克',
address_format: 'short',
page_size: 20,
success: (res) => {
},
fail: function (res) {
},
complete: function (res) {
}
Pop-up анимация — это анимационный компонент и анимационный эффект, созданный вами самостоятельно.
checkImg(e) {
var that = this;
// 创建一个动画实例
var animation = wx.createAnimation({
// 动画持续时间
duration: 500,
// 定义动画效果，当前是匀速
timingFunction: 'linear'
})
// 将该变量赋值给当前动画
that.animation = animation
// 先在y轴偏移，然后用step()完成一个动画
animation.translateY(400).step()
// 用setData改变当前动画
that.setData({
// 通过export()方法导出数据
animationData: animation.export(),
// 改变view里面的Wx：if
hascheck: true
})
// 设置setTimeout来改变y轴偏移量，实现有感觉的滑动
setTimeout(function () {
animation.translateY(0).step()
that.setData({
animationData: animation.export()
})
}, 100)
},
резюме
В этой небольшой программе еще много функций, которые не были реализованы, и есть некоторые ошибки, которые еще не решены, например, запланированные маршруты двух мест.polylineЭто не должна быть прямая линия, и некоторые функции, такие как просмотр улиц, нуждаются в совершенствовании. Детали могут определить успех или неудачу. Все еще необходимо постоянно улучшать некоторые детали, чтобы делать хорошие работы. Я буду продолжать улучшать эту небольшую программу. , если хотите, вы можете следовать за мной, мы можем общаться и учиться вместе, и я надеюсь, что вы можете дать мне несколько ценных мнений
мой гитхаб:github.com/liaoruochen
Это первый раз, когда пишу статью.Возможно, проект не очень хорошо написан, и выражение не так ясно.Я надеюсь, что все могут терпеть меня.Если вам это нравится, вы можете дать мне свою заботу, спасибо!