小程序的view层
MVC模式这里就不讲了,不懂MVC模式的就自己去查阅相关资料。小程序的的view层由WXML与WXSS编写,由组件来进行展示。view层将逻辑层的数据反应成界面显示,同时将界面发生的事件发送给逻辑层。
WXML(WeiXin Markup language)用于描述页面的结构,可以想象成Html文件。
WXSS(WeiXin Style Sheet)用于描述页面的样式,可以想象成Css文件。
组件(Component)是视图的基本组成单元,可以想象成Html中的组件。
下面我们用简单的例子来看看 WXML 具有什么能力:
1、测试环境准备
⑴ pages目录里建立viewtest目录,专门用来做view层测试。

⑵ index里添加触发viewtest的相关代码
① index.wxml
修改成:
② index.js
添加下面的代码:
bindUserTap: function() {
wx.navigateTo({
url: '../viewtest/viewtest'
})
},
|
③ app.json
把viewtest路径加入pages参数里:
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/viewtest/viewtest"
],
|
-
<!--viewtest.wxml-->
<view> {{message}} </view>
// viewtest.js
Page({
data: {
message: 'Hello MINA!'
}
})
|
⑵ 列表渲染
<!--viewtest.wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// viewtest.js
Page({
|
|