微信小程序新手教程view层及小程序框架 _睿知

微信小程序新手教程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.count1
})
}
})
【微信小程序新手教程view层及小程序框架】小程序框架概述
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、逻辑层 APPService
小程序开发框架的逻辑层是由JavaScript编写，也就是小程序中的js文件。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
4、视图层 view
视图层由 WXML 与 WXSS编写，由组件来进行展示，也就是小程序中的wxml、wxss文件。它将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。