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

梦里梦外; 2022-12-12 13:46 150阅读 0赞

### uni-app教程一目录 ###

*   *   *   *  简介：
             *  官网：
             *  创建第一个 uni-app项目
             *  项目目录
             *  创建页面
             *  导入静态资源包（图片）
             *  页面tabbar配置
             *  运行
             *  运行效果图

#### 简介： ####

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

#### 官网： ####

[https://uniapp.dcloud.io/][https_uniapp.dcloud.io]

#### 创建第一个 uni-app项目 ####

1.  开发者需先下载安装 HBuilderX  
    下载地址: [https://www.dcloud.io/hbuilderx.html][https_www.dcloud.io_hbuilderx.html]
2.  在HBuilderX 点击工具栏里的文件 - >新建 - >项目：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]
3.  选择uni-app，输入工程名，如：test，点击创建，即可成功创建uni-app  
    ![在这里插入图片描述][20201007112257637.png_pic_center]

#### 项目目录 ####

![在这里插入图片描述][20201007112445357.png_pic_center]

#### 创建页面 ####

![在这里插入图片描述][20201007153714131.jpg_pic_center]

#### 导入静态资源包（图片） ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]

#### 页面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"
      	}]
      }
    }

#### 运行 ####

![在这里插入图片描述][20201007112748211.png_pic_center]

#### 运行效果图 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]

[https_uniapp.dcloud.io]: https://uniapp.dcloud.io/
[https_www.dcloud.io_hbuilderx.html]: https://www.dcloud.io/hbuilderx.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/a1521c69b5334c59bd82cc976462dc86.png
[20201007112257637.png_pic_center]: /images/20221123/4d1958e16ac447408e670132163d64db.png
[20201007112445357.png_pic_center]: /images/20221123/cf809891ce05467ab1779cf2208a8bad.png
[20201007153714131.jpg_pic_center]: /images/20221123/0dc19e7bece44db5a6d25e433b76920f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/d4cfb8e4820142e7bd1a73b59266c217.png
[20201007112748211.png_pic_center]: /images/20221123/cfe96844324041fd8510b2a6baa5aeef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/ba5757c2282442d5b14b55732e1c2cfc.png