1、 WXML。
小程序开发
浏览：589 次
对于微信小程序，视图层是所有小程序的集合。wxml文件和。wxss文件。
微信小程序在逻辑层处理数据并将其发送到视图层进行显示，同时接收来自视图层的事件反馈。
WXML是一组类似于框架设计的HTML的标记语言。结合基本组件和事件系统，即页面结构。wxml文件。
<块wx:else>
2、 系统组件。
微信小程序提供许多视图，如视图、按钮、输入等（有关详细信息，请参阅微信小app开发者文档）。这些组件堆叠在视图页面中。
3、 数据绑定。
注：一次数据集不能超过1024kB。请尽量避免一次设置太多数据。
示例代码：
.wxml文件
.js文件
第页({
数据：{
text:“你好”，
},
onLoad:函数（）{
//设置数据
this.set数据({
text:“你好微信”
})
},
})
4、 事件绑定。
该框架的核心是一个响应式数据绑定系统，它可以轻松地同步数据和视图。修改数据时，只需修改逻辑层中的数据，视图层将相应更新。
.wxml文件
.js文件
第页({
数据：{
name:“微信”，
},
onLoad:函数（）｛｝，
//wxml中绑定的事件
更改名称单击（e）{
this.set数据({
name:“你好微信”
})
}
})
5、 组件模板。
1.创建用于存储模板文件的文件夹
2.创建。wxml文件和。wcss文件
模板.wxml
模板.wcss
.temp演示{
宽度：100%；
}
.名称{
颜色：深橙色；
}
.单击{
颜色：红色；
位置：绝对；
右：10rpx；
}
3.参考模板文件页面。js。wxml文件和。用于侦听事件的wxss文件
页面.wxml
<视图>
<；/模板>
页面.wxss
@导入“../../template/template.wxss”
页面.js
第页({
数据：{
},
onLoad:函数（）{
let names=[{name:“马云”}，
{name:马化腾}，
{name:李彦宏}]
this.set数据({
数据：名称，
})
},
单击我：功能（事件）{
console.log（event.currentTarget.dataset.name）
}
})
4.属性可以使用Mustache语法动态决定渲染哪个模板：
<块wx:for=“｛｛[1，2，3，4，5]｝｝”>
6、 自定义组件。
1.创建新组织。
