我发现uni ,本质就是对vue的 封装,
就这个在uni 中配置下就搞定了,很简单
{
"pages": [
{
"path": "pages/index/index"
},
{
"path": "pages/member/member"
},
{
"path": "pages/cart/cart"
},
{
"path": "pages/search/search"
}
,{
"path" : "pages/goods/ziyuan",
"style" : {}
},{
"path" : "pages/goods/women",
"style" : {}
},{
"path" : "pages/goods/learn",
"style" : {}
},{
"path" : "pages/goods/contact",
"style" : {}
}
,{
"path" : "component/ShopList/ShopList",
"style" : {
"enablePullDownRefresh":true
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "黑马商城",
"navigationBarBackgroundColor": "#1989fa",
"backgroundColor": "#F8F8F8"
},
"tabBar":{
"list":[
{
"pagePath": "pages/index/index",
"iconPath": "static/icon/home.png",
"selectedIconPath": "static/icon/home-active.png",
"text": "首页"
} ,
{
"pagePath": "pages/member/member",
"iconPath": "static/icon/member.png",
"selectedIconPath": "static/icon/member-active.png",
"text": "会员"
} ,
{
"pagePath": "pages/cart/cart",
"iconPath": "static/icon/cart.png",
"selectedIconPath": "static/icon/cart-active.png",
"text": "购物车"
} ,
{
"pagePath": "pages/search/search",
"iconPath": "static/icon/search.png",
"selectedIconPath": "static/icon/search-active.png",
"text": "搜索"
}
]
}
}
就是将tabBar 和pages 配置对应起来
这 两项最好写在各自配置第一个对象(最佳实践,防止报错)
pages 里写好对应的组件,组件和vue 没多大变化,只是用view 代替了div
简单吧,就是如此简单,别着急,回头我们用vue 重写这个项目就不简单了
这里要说的额,uni-app 不用vue-router 管理路由,而是用配置对象,
行,这篇先到这里,回头我们继续