有渔微信小程序系统概述《三》view层及小程序框架概述

发布：2018-01-26 11:13浏览：次来源：网络作者：cola

小程序的view层

MVC模式这里就不讲了，不懂MVC模式的就自己去查阅相关资料。小程序的的view层由WXML与WXSS编写，由组件来进行展示。view层将逻辑层的数据反应成界面显示，同时将界面发生的事件发送给逻辑层。

WXML(WeiXin Markup language)用于描述页面的结构，可以想象成Html文件。

WXSS(WeiXin Style Sheet)用于描述页面的样式，可以想象成Css文件。

组件(Component)是视图的基本组成单元，可以想象成Html中的组件。

下面我们用简单的例子来看看 WXML 具有什么能力：

1、测试环境准备

⑴ pages目录里建立viewtest目录，专门用来做view层测试。

有渔微信小程序系统概述《三》view层及小程序框架概述(图1)

⑵ 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"
],

2、例子

⑴ 数据绑定

<!--viewtest.wxml-->
<view> {{message}} </view>

// viewtest.js
Page({
data: {
message: 'Hello MINA!'
}
})

⑵ 列表渲染

<!--viewtest.wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// viewtest.js
Page({

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。