项目结构:(分为全局结构和局部结构)
==>全局结构:
上述结构是微信小程序创建项目时,自动生成的项目结构,其中的app.json、app.js和app.wxss都是全局文件,即在上述三个文件不管修改的是样式还是动作,都可以在全局中调用。
app.js:为动作文件,定义相关js函数
app.json:为环境文件,配置相关环境(注:app.json文件内容即使为空,也必须加" { } "符号,否则报错)
app.wxss:为样式文件,相当于css文件
utils文件:可以理解为时间插件文件,输出相关时间格式
==>局部结构:(创建单页)
快速创建单页结构的方法:在全局的app.json文件中,定义如下变量然后保存,即可自动创建单页结构。
sign.wxml:为结构文件,相当于html文件
js、json、wxml、wxss:
==>js:
==>app.json(全局环境配置):
定义页面底部目录栏目
-
...,
-
"tabBar": {
-
"list": [{
-
"pagePath": "pages/index/index", //路径文件
-
"text": "效果图", //目录名称
-
"iconPath": "../../images/icon_API.png", //图标(未被选中)
-
"selectedIconPath": "../../images/icon_API_HL.png"
-
//图标(被选中)
-
},{
-
"pagePath": "pages/todos/todos",
-
"text": "TodoApp",
-
"iconPath": "../../images/icon_API.png",
-
"selectedIconPath": "../../images/icon_API_HL.png"
-
},{
-
"pagePath": "pages/Me/index",
-
"text": "Me",
-
"iconPath": "../../images/icon_API.png",
-
"selectedIconPath": "../../images/icon_API_HL.png"
-
}]
-
}
列表渲染 wx:for
条件渲染 wx:if
-
wx:if
-
wx:elif
-
wx:else
-
<view wx:if={{length>5}} >1</view>