uni-app教程一(项目创建、tabbar配置、运行)
uni-app教程一目录简介:官网:创建第一个 uni-app项目项目目录创建页面页面tabbar配置运行运行效果图简介:uni-app 是一个使用 Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。官网:https://uniapp.dcloud.io/创建第一个 uni-
·
简介:
uni-app 是一个使用 Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
官网:
创建第一个 uni-app项目
- 开发者需先下载安装 HBuilderX
下载地址: https://www.dcloud.io/hbuilderx.html - 在HBuilderX 点击工具栏里的文件 - >新建 - >项目:
- 选择uni-app,输入工程名,如:test,点击创建,即可成功创建uni-app
项目目录
创建页面
导入静态资源包(图片)
页面tabbar配置
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/news/news",
"style": {
"navigationBarTitleText": "动态"
}
},
{
"path": "pages/msg/msg",
"style": {
"navigationBarTitleText": "消息"
}
}
,{
"path" : "pages/my/my",
"style" : {
"navigationBarTitleText": "我的"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar":{
"color":"#333333",
"selectedColor":"#FC5C82",
"backgroundColor":"#FFFFFF",
"borderStyle":"black",
"list":[{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"static/tabbar/index.png",
"selectedIconPath":"static/tabbar/indexed.png"
},{
"pagePath":"pages/news/news",
"text":"动态",
"iconPath":"static/tabbar/news.png",
"selectedIconPath":"static/tabbar/newsed.png"
},{
"pagePath":"pages/msg/msg",
"text":"消息",
"iconPath":"static/tabbar/paper.png",
"selectedIconPath":"static/tabbar/papered.png"
},{
"pagePath":"pages/my/my",
"text":"我的",
"iconPath":"static/tabbar/home.png",
"selectedIconPath":"static/tabbar/homeed.png"
}]
}
}
运行
运行效果图
更多推荐
已为社区贡献43条内容
所有评论(0)