请选择 进入手机版 | 继续访问电脑版

寿光赢创网

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
企业云服务器2折起【腾讯云】云产品精选秒杀,云服务器1核2G 99元/年
查看: 253|回复: 0

[uni-app] 【uniapp入门】新建uniapp项目

[复制链接]

793

主题

801

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
33125
admin 发表于 2020-7-14 09:26:57 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
首先下载uniapp开发工具HBuilder X并安装好,我们运行HBuilder X,点击左上角文件,选择新建=》项目,如下图:
QQ图片20200714091942.png
然后我们在弹出的项目创建窗口内选择uni-app,设置项目名称,然后点击创建:
QQ图片20200714092347.png
创建好的uniapp项目初始化目录如下:
QQ图片20200714092416.png
uniapp文件夹即我们创建的项目文件夹,文件夹名称就是我们创建项目时候设置的名称;
pages是页面文件目录;
static是静态资源目录,比如加载的图片,音频等资源;
App.vue是全局组件;
main.js是入口文件;
manifest.json是项目配置文件;
pages.json是页面配置文件;
uni.scss是全局样式文件。
QQ图片20200714093055.png 在pages目录下的index目录即页面的文件夹,里面包含一个index.vue文件是页面文件,我们的页面内容要在此书写代码;
页面及tabbar配置:
  1. {
  2.     "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
  3.         {
  4.             "path": "pages/index/index",
  5.             "style": {
  6.                 "navigationBarTitleText": "uni-app"
  7.             }
  8.         },
  9.         {
  10.             "path": "pages/homework/homework",
  11.             "style": {
  12.                 "navigationBarTitleText": "uni-app"
  13.             }
  14.         },
  15.         {
  16.             "path": "pages/personal/personal",
  17.             "style": {
  18.                 "navigationBarTitleText": "uni-app"
  19.             }
  20.         }
  21.     ],
  22.     "globalStyle": {
  23.         "navigationBarTextStyle": "black",
  24.         "navigationBarTitleText": "uni-app",
  25.         "navigationBarBackgroundColor": "#F8F8F8",
  26.         "backgroundColor": "#F8F8F8"
  27.     },
  28.     "tabBar": {
  29.     "color": "#C3B8B4",
  30.     "selectedColor": "#F76605",
  31.     "borderStyle": "white",
  32.     "backgroundColor": "#fff",
  33.     "list": [
  34.       {
  35.         "pagePath": "pages/index/index",
  36.         "text": "学员",
  37.         "iconPath": "static/indexNormal.png",
  38.         "selectedIconPath": "static/indexActive.png"
  39.       },
  40.       {
  41.         "pagePath": "pages/homework/homework",
  42.         "text": "作业",
  43.         "iconPath": "static/homeworkNormal.png",
  44.         "selectedIconPath": "static/homeworkActive.png"
  45.       },
  46.       {
  47.         "pagePath": "pages/personal/personal",
  48.         "text": "我的",
  49.         "iconPath": "static/personalNormal.png",
  50.         "selectedIconPath": "static/personalActive.png"
  51.       }
  52.     ]
  53.   }
  54. }
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


QQ|Archiver|手机版|小黑屋|寿光赢创网 ( 鲁ICP备19000917号 )

GMT+8, 2021-1-16 19:23 , Processed in 0.067583 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表