A. Открыть слой

WXML (Weixin Markup Language) является разработана структура языка разметки, в сочетании с базовым компонентом , система событий может быть построена структура страницы.

1.1. Привязка данных

1.1.1. Обыкновенное письмо

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})

1.1.2. Компонент Свойства

И не выше просто никакой разницы между ах

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})

1.1.3. Тип Bool

Не писать непосредственно проверяется = «ложь», результат вычисления является строкой

<checkbox checked="{{false}}"> </checkbox>

1.2. Операция

1.2.1. Оператор троичной

скрытый скрытый атрибут, правда, чтобы скрыть этикетке

<view hidden="{{flag ? true : false}}"> Hidden </view>

1.2.2. Арифметика

<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

1.2.3. Если логика определения

Если длина больше 5, отображается метка, или не отображается

<view wx:if="{{length > 5}}"> </view>

1.2.4. Строковые операции

<view>{{"hello" + name}}</view>
Page({
  data:{
    name: 'MINA'
  }
})

1.2.5. Примечание

Между фигурные скобки и кавычки, если есть пробелы, то в конечном итоге будет решен в строку

1.3. Список визуализация (рендеринг массива)

1.3.1. WX: для

запись имя переменной по умолчанию для item wx:for-itemимени переменной может быть задан массив текущего элемента

имя переменного индекса по умолчанию index wx:for-indexможет быть задано в соответствии с текущим базовым именем переменного массива

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

1.3.2. WX: для

Рендеринг блок, содержащий блок-структуру конечного многоузловой не станет действительно дом элементом

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

1.3.3. WX: ключ

Для общей циркуляции будет добавлена WX: ключевые атрибуты, повысить эффективность использования

<view wx:for="{{array}}" wx:key="index">
{{index}}：{{item.message}}
</view>

1.4. Условия оказания

1.4.1. WX: если

В кадре, используя wx:if="{{condition}}"для определения того , чтобы сделать блок:

<view wx:if="{{condition}}"> True </view>

1.4.2. скрытый

<view hidden="{{condition}}"> True </view>

сходный wx:if

Частое переключение hidden

Не используйте wx:if

Во-вторых, файл стиля WXSS

2. WXSS

WXSS (Weixin Style Sheets) это язык стилей для описания компонентов стиля WXML.

По сравнению с CSS, WXSS расширены функции:

Размер блока
Стиль Импорт

2.1. Размеры в

RPX (отзывчивые пиксели): Ширина экрана может быть адаптивной. Положения Ширина экрана 750rpx. Как iPhone6, ширина экрана 375px, в общей сложности 750 физических пикселей, 750rpx = 375px = 750 физических пикселей, 1rpx = 0.5px = 1 физических пикселей.

оборудование	RPX преобразования PX (экран ширина / 750)	Термины RPX РХ (750 / экран ширина)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
Айфон 6	1rpx = 0.5px	1px = 2rpx
iPhone6 Подробнее	1rpx = 0.552px	1px = 1.81rpx

Рекомендация: При разработке небольших программистов микро-канал может использовать iPhone6 в качестве стандартного визуального искусства.

Примечание: На небольшом экране, неизбежно будут какие - то сбои, пожалуйста , постарайтесь избежать такой ситуации в развитии.

2.2. Стиль Импорт

Использование @importличных данных охвата таблицы стилей могут быть введены, а @importзатем относительный путь для импорта таблицы стилей охвата, с ;конца заявления представлены.

Пример кода:

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

2.3. Стиль Инлайн

Поддержка использования стиля, атрибуты класса контролировать стиль компонента сборки каркаса.

стиль: статическое единство стиля написано в классе. Прием динамичен, будет решено во время выполнения, пожалуйста, постарайтесь избежать статического стиля в письменном стиле, так как не влияют на скорость рендеринга.

<view style="color:{{color}};" />

Класс: определяет правила стиля, который представляет собой набор значений атрибутов в имени класса селектора правила стиля (класс имя стиля), имя класса не нужно брать стиль ., отделенный от имени класса пространств стиля.

<view class="normal_view" />

2.4. Селектор

В настоящее время поддерживаются селекторы:

селектор	образец	Пример Описание
.учебный класс	`.intro`	Выбрать все компоненты имеют класс = «интро» из
#мне бы	`#firstname`	Выбор компонентов имеет ID = «ПгвЬЫат» из
элемент	`view`	Выберите все компоненты просмотра
элемент, элемент	`view, checkbox`	Выберите все компоненты документа и просмотреть все компоненты флажок
::после	`view::after`	Вставка в сборке заднего вида
::до	`view::before`	Вставки сборки в виде спереди

2.5. Глобальный стиль и местный стиль

App.wxss определить стиль в глобальном стиле, действуя на каждой странице. Стили, определенные в файле страницы для частичного wxss стиля, действует только в соответствующей странице, и будет охватывать тот же селектор app.wxss.

Описывает вид слой и апплет использования микро-канала