标签:概述 实现 title 框架 代码 debug模式 ted 一个 let
一、小程序目录结构:
1、pages:框架页面文件
2、utils:工具类文件
3、app.js/app.json/app.wxss:框架全局文件
二、框架全局文件介绍:
概述:
app.js 为小程序必填项,主要写一些小程序的逻辑
app.json 为小程序必填项,主要做一下小程序的公共设置
app.wxss 此项非必填,主要写一些小程序的公共样式表
1:app.js小程序逻辑:
app.js用来定义全局数据和函数,它可以指定微信小程序的生命周期函数。
生命周期函数有:
1>监听小程序初始化函数 onLaunch
2>小程序显示函数 onShow
3>小程序隐藏函数 onHide等
2:app.json小程序公共设置
app.json可以对5个功能进行设置:
1>配置页面路径(pages [Array])
2>配置窗口表现(window [Object])
3>配置标签导航(tabBar [Object])
4>配置网络超时(networkTimeout [Object])
5>配置debug模式(debug [Boolean])
小试牛刀部分:(实现一个底部导航)
具体代码:
在app.json中添加该代码内容
{
"pages": [
"pages/movie/movie",
"pages/cinema/cinema",
"pages/find/find",
"pages/me/me"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#D53E37",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "white"
},
"tabBar": {
"selectedColor": "#D53E37",
"backgroundColor": "#f5f5f5",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/movie/movie",
"text": "电影",
"iconPath": "images/movie/movie-0.png",
"selectedIconPath": "images/movie/movie-1.png"
},
{
"pagePath": "pages/cinema/cinema",
"text": "影院",
"iconPath": "images/cinema/cinema-0.png",
"selectedIconPath": "images/cinema/cinema-1.png"
},
{
"pagePath": "pages/find/find",
"text": "发现",
"iconPath": "images/find/find-0.png",
"selectedIconPath": "images/find/find-1.png"
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "images/me/me-0.png",
"selectedIconPath": "images/me/me-1.png"
}
]
}
}
效果图展示:

标签:概述 实现 title 框架 代码 debug模式 ted 一个 let
原文地址:https://www.cnblogs.com/powerMG/p/9245934.html