1. 模板语法
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构 建出页面的结构。
1.1 数据绑定
普通写法
<view> {{ message }}
</view>
Page({
data
: {
message
: 'Hello MINA!'
}
})
组件属性
<view id="item-{{id}}"> </view>
Page({
data
: {
id
: 0
}
})
布尔类型
<checkbox checked="{{false}}"> </checkbox>
1.2 运算
三元运算
<view hidden="{{flag ? true : false}}"> Hidden
</view>
算数运算
<view> {{a + b}} + {{c}} + d
</view>
Page({
data
: {
a
: 1,
b
: 2,
c
: 3
}
})
. 逻辑判断
<view wx:if="{{length > 5}}"> </view>
字符串运算
<view>{{"hello" + name}}
</view>
Page({
data
:{
name
: 'MINA'
}
})
注意： 花括号和引号之间如果有空格，将最终被解析成为字符串
1.3 列表渲染
wx:for的变量名默认为 item
wx:for-item 可以指定数组当前元素的变量名
下标变量名默认为 index
wx:for-index 可以指定数组当前下标的变量名
wx:key 来提高数组渲染的性能
wx:key 绑定的值有如下选择
list
:[
{id
:0,name
:"炒饭"},
{id
:1,name
:"炒面"}
]
wx
:key
="id"
list
:[1,2,3,4,5]
wx
:key
="*this"
示例：
<view wx:for="{{array}}" wx:key="id">
{{index}}: {{item.message}}
</view>
Page({
data
: {
array
: [
{
id
:0,
message
: 'foo',
},
{
id
:1,
message
: 'bar'
}]
}
})
block渲染一个包含多节点的结构块block最终不会变成真正的dom元素
<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
<view> {{index}}:
</view>
<view> {{item}}
</view>
</block>
1.4 条件渲染
wx:if 在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：
<view wx:if="{{false}}">1
</view>
<view wx:elif="{{true}}">2
</view>
<view wx:else>3
</view>
hidden
<view hidden="{{condition}}"> True
</view>
频繁切换用 hidden，不常使用用 wx:if
2. 小程序事件的绑定
小程序中绑定事件，通过bind关键字来实现。如 bindtap bindinput bindchange 等，不同的组件支持不同的事件，具体看组件的说明即可。
示例：
<input bindinput="handleInput" />
Page({
handleInput
: function(e
) {
console
.log(e
);
console
.log("值被改变了");
}
})
事件传值：
<input bindinput="handleInput(100)" />
<input bindinput="handleInput" data-item="100" />
handleInput
: function(e
) {
console
.log(e
.currentTarget
.dataset
)
console
.log(e
.detail
.value
);
}
3. 样式 WXSS
WXSS( WeiXin Style Sheets )是一套样式语言，用于描述 WXML 的组件样式。与 CSS 相比，WXSS 扩展的特性有：响应式⻓度单位 rpx、样式导入
3.1 尺寸单位
rpx （responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx 。如在 iPhone6 上，屏幕宽度为 375px ，共有750个物理像素，则 750rpx = 375px = 750物理像素 ， 1rpx = 0.5px = 1物理像素 。 建议： 开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准。使用步骤： a. 确定设计稿宽度 pageWidth b. 计算比例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth 。 c. 在less文件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。
3.2 样式导入
wxss中直接就支持，样式导⼊功能。也可以和 less中的导入混用。使用 @import 语句可以导入外联样式表，只支持相对路径。示例代码：
.small-p {
padding:5px
;
}
@import "common.wxss";
.middle-p {
padding:15px
;
}
3.3 选择器
特别需要注意的是 小程序 不支持通配符 * 因此以下代码无效！
*{
margin:0
;
padding:0
;
box-sizing:border-box
;
}
目前支持的选择器有：
3.4 小程序中使用less
原生小程序不支持 less ，其他基于小程序的框架大体都支持，如 wepy ， mpvue ， taro 等。但是仅仅因为一个less功能，而去引入一个框架，肯定是不可取的。因此可以用以下方式来实现编辑器是 VsCode安装插件 Easy LESS在vs code的设置中加入如下，配置
"less.compile": {
"outExt": ".wxss"
}
在要编写样式的地方，新建 less 文件，如 index.less ,然后正常编辑即可。
4. 小程序中的本地存储
存储：wx
.setStorageSync("key", "value")
取出：wx
.getStorageSync("key")
注意：
