模块化=>组件化=>工程化
模块:js
组件:实现功能(JS)和效果(HTML+CSS)的代码片段
全局配置:
app.json:设置路径,配置窗口表现,网络超时,tab栏
![](https://img.haomeiwen.com/i21286289/19493a429efdad5e.png)
{
"pages": [
"pages/index/index", //页面的路径
],
"window": {
"backgroundTextStyle": "light",//组件上拉操作的加载效果,light/dark
"navigationBarBackgroundColor": "#10c0e7",//窗口颜色(只能16进制格式)
"navigationBarTitleText": "赣村优品",//窗口标题
"navigationBarTextStyle": "black"//窗口字体,black/white
},
"tabBar": {
"color": "#999999",//初始颜色
"selectedColor": "#000",//选中时颜色
"borderStyle": "white",
"backgroundColor": "#fff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/image/tabbar/home.png",
"selectedIconPath": "static/image/tabbar/home_sel.png"
},
{
"pagePath": "pages/classify/index",
"text": "分类",
"iconPath": "static/image/tabbar/classify.png",
"selectedIconPath": "static/image/tabbar/classify_sel.png"
},
{
"pagePath": "pages/car/index",
"text": "购物车",
"iconPath": "static/image/tabbar/car.png",
"selectedIconPath": "static/image/tabbar/q.png"
},
{
"pagePath": "pages/my/index",
"text": "我的",
"iconPath": "static/image/tabbar/my.png",
"selectedIconPath": "static/image/tabbar/my_sel.png"
}
]
},
app.js:方法,初始化数据
App({
data:{
})
app.wxss:全局样式
页面配置:
index.wxml:结构,组件化,每个标签都是一个组件,
index.js:行为,Page({})里配置当前页面
index.json:
index.wxss:样式
图片只能在硬盘里面放入,最好用绝对路径
网友评论