1.HBilderX
新建项目
2.新建两个页面
3.修改pages.josn 添加tabbar配置,tip:小程序height,fontSize不支持。分包预留好位置
{
"pages": [
{
"path": "pages/Main/home",
"style": {
"enablePullDownRefresh": true,
"navigationBarTitleText": "home"
}
},
{
"path": "pages/Main/charts",
"style": {
"enablePullDownRefresh": true
}
}
],
"subPackages": [
{
"root": "pages/Main",
"pages": []
}
],
"tabBar": {
"color": "#111111",
"backgroundColor": "#fff",
"selectedColor": "#5F9EFF",
"position": "bottom",
"list": [
{
"pagePath": "pages/Main/home",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png",
"text": "主页"
},
{
"pagePath": "pages/Main/charts",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png",
"text": "副页面"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
4.引入uview
$ npm i uview-ui
//pages.josn
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
//App.vue
<style lang="scss">
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import 'uview-ui/index.scss';
</style>
//main.js
//引入u-view
import uView from 'uview-ui';
Vue.use(uView);
//uni.scss 第一行
@import "uview-ui/theme.scss";
@import "uview-ui/index.scss";