真机操作

作用提供HTML5，微信小程序功能，提供打包
下载雷电模拟器
iconfont.cn的图标官网

1.新建一个项目

first-uni-app.png

2.png

2.pages.json

{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "主页"
}
}, {
"path": "pages/ucenter/ucenter",
"style": {
"navigationBarTitleText": "我的"
}
},
{
"path": "pages/ucenter/discover",
"style": {
"navigationBarTitleText": "发现"
}
}
],
"tabBar": {
"color": "#000000",
"selectedColor": "#2F85FC",
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/home.png",
"selectedIconPath": "static/home-active.png",
"text": "主页"
},
{
"pagePath": "pages/ucenter/ucenter",
"iconPath": "static/center.png",
"selectedIconPath": "static/center-active.png",
"text": "我的"
},
{
"pagePath": "pages/ucenter/discover",
"iconPath": "static/discover.png",
"selectedIconPath": "static/discover.png",
"text": "发现"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}

ucenter

index

手机运行结果：

Screenshot_2019-03-23-00-48-27-38.png

Screenshot_2019-03-23-00-48-30-73.png

Screenshot_2019-03-23-00-48-37-75.png

最后小组做了一个微信的界面