uni-app教程一（项目创建、tabbar配置、运行）

最新推荐文章于 2024-04-13 23:18:14 发布

shiqianhui1124

最新推荐文章于 2024-04-13 23:18:14 发布

阅读量208

点赞数

分类专栏： uni-app 文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/shiqianhui1124/article/details/116948540

版权

uni-app 专栏收录该内容

1 篇文章

订阅专栏

uni-app是一个基于Vue.js的跨平台开发框架，允许开发者编写一次代码，部署到iOS、Android、H5及多个小程序平台。本教程涵盖了从创建项目、理解项目目录、创建页面、导入图片资源、设置页面TabBar到运行项目的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

uni-app教程一目录：

官网：

https://uniapp.dcloud.io/

创建第一个 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"
  	}]
  }
}