В последние месяцы Сяоджи и коллеги по компании безостановочно разрабатывали небольшие программы, и после нескольких итераций они наконец стабилизировались. И наш апплет также был признан Tencent и получил награду
Должно ли быть выгравировано имя разработчика на трофее?
Ям в процессе разработки небольших программ не так много, и некоторые ямы действительно угнетают, и трудно успокоить свой гнев, не взглянув.
Синтаксис привязки данных (двойные фигурные скобки)
В этом {{}} нельзя выполнять ни один метод, можно выполнять только четыре простых арифметических операции и логические суждения, например:
<view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
{{parseInt(i)}}
</view>
Вы не можете этого сделать, вы можете только форматировать данные, когда вы их получите. Разве это не отвратительно?
Но если вам нужно отформатировать его при рендеринге, вы можете передать толькоWXSсправиться, например:
<wxs module="m1">
var parse = function(str) {
return parseInt(str);
};
module.exports.parse = parse;
</wxs>
<view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
{{m1.parse(i)}}
</view>
wx.navigateBack() не может передать параметры на последнюю страницу
Доступ к нескольким навигационным API апплета можно получить черезurlПередать параметры на соответствующую страницу. А w x.navigateBack({delta}) принимает только параметр delta (количество возвращаемых страниц). Но иногда действительно параметры передаются на резервную страницу, в настоящее время с этим может справиться только localstorage или redux.
проблема с адаптацией блока rpx
Блок rpx, предоставляемый апплетом, действительно экономит нам много времени при восстановлении эскиза проекта с высокой точностью при разработке. Но Сяоджи обнаружил, что при использовании 1rpx на некоторых моделях возникают проблемы.
.border {
border: 1rpx solid #000;
}
Если вы установите такую рамку, в большинстве случаев она работает нормально, но на некоторых машинах, особенно на iPhone X, граница иногда вообще не отображается. Так что теперь я перехожу на 2rpx
Цель, полученная событием привязки, отличается от текущей цели.
При привязке события для получения текущих данных компонента полученный envt содержит target и currentTarget, оба из которых имеют набор данных, а данные, которые нам нужно получить, находятся в объекте набора данных. правильно мы должны взятьcurrentTargetВнутри все в порядке, но иногда данные этих двух совершенно одинаковы, и вы получите неверные данные, если не будете осторожны.
Так в чем же разница между this target и currentTarget, официальное объяснение:
цель: исходный компонент, вызвавший событие;
текущая цель:
текущий компонент, к которому привязано событие;
См. пример:
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
Когда вы нажмете внутренний вид, Handletap3 получил целевой объект Event Event и CentreTarget, и текущий объект Event Handletap2 полученной цели является внутренним, CurrentTarget - середина.
На самом деле отличить несложно, target — это место, где начинается событие, а currentTarget — место, где вы привязываете событие. можно пойти и посмотретьсобытие апплета
Проблема статического ресурса ссылки CSS
iconfont, изображения не могут передавать css, о ~ он должен называться wxss и импортироваться локально.
1. иконочный шрифт@fontttf и другие файлы, на которые ссылается -face, не поддерживаются в апплете, вы можете использовать онлайн или конвертировать в base64
Ссылаться наСсылка на материал значков содержится в файле стиля wxss апплета WeChat..
2. Изображения могут использовать base64 или онлайн-ссылки. Или
посмотреть добавить эффект клика
необходимо активировать
<view hover hover-class="view-hover">
иерархия стилей страницы wxss
Вот пример страницы:
<!-- wxml -->
<view class="page-layout">
<view class="page__title">flex-direction: row</view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item green">1</view>
<view class="flex-item red">2</view>
<view class="flex-item blue">3</view>
</view>
</view>
/* wxss */
.page-layout {
color: #000;
}
/* 下面这种写法 .red 是不生效的 */
.red {
color: #f00;
}
/* 必须这么写 */
.page-layout .red {
color: #f00;
}
Другие примечания
- Просмотр обновлений в любом случае возможен только через setData()
- Путь может состоять только из пяти слоев, старайтесь избегать многоуровневого взаимодействия.
- Не изменяйте Page.data напрямую, используйте Page.setData
- Чтобы перейти на страницу панели вкладок, вы должны использовать wx.switchTab()
- При использовании wx:для обхода лучше всего добавить wx:key="{{index}}"