微信小程序新手教程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"
],
2、例子
⑴ 数据绑定
{{message}}
// viewtest.js
Page({
data: {
message: 'Hello MINA!'
}
})
⑵ 列表渲染
{{item}}
// viewtest.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
⑶ 条件渲染
WEBVIEW
APP
MINA
// viewtest.js
Page({
data: {
view: 'MINA'
}
})
⑷ 模板
FirstName: {{firstName}}, LastName: {{lastName}}
// viewtest.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})
⑸ 事件
{{count}}
// viewtest.js
Page({
data: {
count: 1
},
add: function(e) {
this.setData({
count: this.data.count + 1
})
}
})
小程序框架概述
1、目录结构
先来看下例子HelloWorld的目录结构。
这里，app是小程序的入口，pages是小程序的页面。比如index是小程序的首页，logs是小程序的日志页。utils是小程序的工具库。
小程序主体部分由3个文件组成，必须放在项目的根目录，如下：
文件 必填 作用
app.js是小程序逻辑
app.json是小程序公共设置
app.wxss否小程序样式
小程序的页面由4个文件组成，如下：
文件 必填 作用
js是页面逻辑
wxml是页面结构
json否页面公共设置
wxss否页面样式
2、配置
小程序使用app.json文件来对进行全局配置，设定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab等。
每一个页面也可以使用.json文件来对本页面的窗口表现进行配置。页面的配置比app.json全局配置简单得多，只能设置window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项。
3、逻辑层 APP Service
小程序开发框架的逻辑层是由JavaScript编写，也就是小程序中的js文件。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
4、视图层 view
视图层由 WXML 与 WXSS 编写，由组件来进行展示，也就是小程序中的wxml、wxss文件。它将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
其中：
WXML(WeiXin Markup language)用于描述页面的结构。
WXSS(WeiXin Style Sheet)用于描述页面的样式。
组件(Component)是视图的基本组成单元。
关于小程序配置、逻辑层、视图层的详细说明，我们在后面用专门的文章进行讲解。
目前微信小程序还没有正式上线，在这里小编先为大家介绍一个即将在1月9号和微信小程序一起上线的小程序－－嗨图!大家可以直接在这个微信小程序上DIY自己的照片，先来看看具体嗨图有些什么功能吧!
微信小程序嗨图功能
1、专题——DIY图片的模板，点击可以生成使用，分享到朋友圈。
2、分享墙——用户上传的自己DIY作品。
3、立即制作——可以用自己的图来DIY。
4、告诉我——告诉产品的改进，内容的增加。
想要体验怎么制作属于自己个性朋友圈照片的用户，等1月9号微信小程序上线后，扫一扫下面的二维码就可以啦!还等什么，赶紧扫码体验，开启你的嗨图之旅吧!
转载请注明：范的资源库 » 微信小程序新手教程view层及小程序框架
