小程序扩展

其中第二块区域的项目结构，我们重点介绍

第一块：JSON
上面提到：每个分页面分为JS（页面逻辑）、JSON（页面配置）、WXML（页面结构）、WXSS（页面样式表）四个模块，那么这些页面分别都有什么用途呢？

JSON是页面配置文件，可以对本页面的窗口表现进行配置，文件内容为一个 JSON 对象，会涉及到很多的属性。

比如navigationBarTitleText 就是显示在小程序最上方的标题名称。

页面中配置项在当前页面会覆盖总的app.json的中相同的配置项。

{
“navigationBarBackgroundColor”: “#ffffff”,
“navigationBarTextStyle”: “black”,
“navigationBarTitleText”: “标题zwz”,
“backgroundColor”: “#eeeeee”,
“backgroundTextStyle”: “light”
}

第二块：WXML

WXML其实就是HTML，是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

比如最常用的双向数据绑定：

index.wxml

{{msg}}

index.js
Page({
data: {
msg:‘hello zwz’,
},
onLoad: function () {
}
})

这样，我们虽然在WXML界面没有直接写文字，但{{msg}}就直接读取到了JS文件的变量值。

这时，我们按下CTRL + S（保存，重新编译），我们会发现前台会渲染出 hello zwz。

这就是传说中的双向数据绑定，你把JS后台的 hello zwz 改成 hi zwz，那么前台也会显示 hi zwz，以此类推。

第三块：WXSS
WXSS和CSS一样，是一套样式语言，用于描述 WXML 的组件样式，WXSS 用来决定 WXML 的组件应该怎么显示。WXSS在实际开发过程中，拥有绝大部分CSS的内容。

那么相比CSS而言，WXSS中独有的rpx单位可能会用得到，这个尺度单位可以根据屏幕宽度进行自适应。

具体格式如下所示，下面是用了类选择器对WXML中的元素进行样式美化。

.title{
font-size: 30px;
color: royalblue;
}
.input-placeholder{
font-size: 16px;
}
.section{
width: 100%;
height: 55px;
box-sizing: border-box;
padding-top: 15px;
font-size: 16px;
display: flex;
}

第四块：JS
这一块毫无疑问，就是用来存放后端逻辑代码的，我们需要掌握几个常用的生命周期函数，onShow、onLoad。

Page({
data: {
msg: “hello zwz”
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
},
})
然后就是自定义方法，注意是和onLoad()平级。

比如，我们在WXML内定义一个按钮

按钮1
接着，在JS页面编写响应事件

Page({
data: {
msg: “hello zwz”
},
onLoad: function(options) {
// 页面创建时执行
},
run: function() {
// do some things
},
})
那么，我们在点击这个按钮之后，就会触发run()这个方法。