微信小程序之基础案例详细解释

这是案例的初始页面

首先关于这个案例上面的app.json做一个特别详细的解释

首先提醒一下.json文件不能有注释，因此如果要复制的话，请把注释删去

---

//关于app.json详细学习

{
//pages这个属性本是一个数组，数组中存放的是页面路径
"pages": [
"pages/food/food", //这是打开小程序第一个会看到的页面
"pages/index/index",
"pages/foodcontent/foodcontent",
"pages/user/user",
"pages/shop/shop"
]
//这是一个对的窗口配置，看到你手机时间，下面那个区域了吗，对，就是对那里的配置
,"window": [
"backgroundTextStyle": "light",//字体格式
"navigationBarBackgroundColor": "#000000",//这个是背景颜色
"navigationBarTitleText": "小程序demo",//这个当然是窗口的标题了
"navigationBarTextStyle": "white"//这个是字体颜色
},
//这个一个对窗口底部的配置，看到手机最下面可以按的地方了吗？有菜单什么的。对就是那里
"tabBar": { //关于tabBar有5个属性可以配置哦
"color": "#666",//1.最先看到哦颜色
"selectedColor": "#f60",//2.点击后的颜色，这两个颜色都要使用16进制哦
"backgroundColor": "#eee",//背景色
"borderStyle": "white",//上边框的颜色只有black 和 white 两种
"position": "bottom", //放置这个整体窗口的位置，现在在下面，也可以试试top上面，只不过有点不好看

//这是一个列表项 数组属性 ，这是干什么的呢？当然是为了让你交互而存在的
//它包含了4个属性
"list": [
{
"pagePath": "pages/index/index", //触按时，会跳转的路径，这个路径必须在上面pages中存在
"text": "首页",//文字
"iconPath": "static/image/home1.png",//未触碰时候显示的图片路径
"selectedIconPath": "static/image/home2.png"//触碰的时候显示的图片路径
},
{
"pagePath": "pages/food/food",
"text": "菜品",
"iconPath": "static/image/news1.png",
"selectedIconPath": "static/image/news2.png"
},
{
"pagePath": "pages/user/user",
"text": "用户",
"iconPath": "static/image/user1.png",
"selectedIconPath": "static/image/user2.png"
}
]
}
}

 

---