其中第二块区域的项目结构,我们重点介绍
第一块: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()这个方法。