Посмотреть на яму

Апплет WeChat

В последние месяцы Сяоджи и коллеги по компании безостановочно разрабатывали небольшие программы, и после нескольких итераций они наконец стабилизировались. И наш апплет также был признан Tencent и получил награду:blush:

奖杯上是不是应该刻上开发者的名字

Должно ли быть выгравировано имя разработчика на трофее?

Ям в процессе разработки небольших программ не так много, и некоторые ямы действительно угнетают, и трудно успокоить свой гнев, не взглянув.

Синтаксис привязки данных (двойные фигурные скобки)

В этом {{}} нельзя выполнять ни один метод, можно выполнять только четыре простых арифметических операции и логические суждения, например:

<view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
  {{parseInt(i)}}
</view>

Вы не можете этого сделать, вы можете только форматировать данные, когда вы их получите. Разве это не отвратительно?:poop: :shit: :poop:
Но если вам нужно отформатировать его при рендеринге, вы можете передать только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:trollface:

Цель, полученная событием привязки, отличается от текущей цели.

При привязке события для получения текущих данных компонента полученный 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 — место, где вы привязываете событие. можно пойти и посмотреть:point_right:событие апплета:point_left:

Проблема статического ресурса ссылки CSS

iconfont, изображения не могут передавать css, о ~ он должен называться wxss и импортироваться локально.:-1:
1. иконочный шрифт@fontttf и другие файлы, на которые ссылается -face, не поддерживаются в апплете, вы можете использовать онлайн или конвертировать в base64 Ссылаться наСсылка на материал значков содержится в файле стиля wxss апплета WeChat..
2. Изображения могут использовать base64 или онлайн-ссылки. Или Да, кстати, ссылка на изображение должна быть включенаhttpsЗаголовок протокола, например: //cdn.xxx.com/jflkadsjf.png, недопустим.

посмотреть добавить эффект клика

необходимо активировать:rage1:

<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}}"