文章目录

    • 1）新建项目
    • 2）项目运行
    • 3）项目结构
    • 4）开发规范
    • 5）globalStyle全局外观配置
    • 6）pages页面配置
    • 7）tabbar
    • 8）Condition

本博客为 uni-app 此门课的跟学笔记，目的是便于个人复习和对知识快速索引，源码素材可在均可在视频评论区找到

1）新建项目

  • new→file→project，选择uni-app即可

2）项目运行

  • 如果想模拟运行微信小程序那么必须先在微信开发工具中设置打开服务端口
    并且要在HBuilderX中设置微信小程序开发工具文件目录
  • 如果想运行在手机上最简单的做法是USB连接，然后HBuilderX就能检测到
  • 其他的模拟在浏览器上或者Build-in Broswer(内置浏览器)就没什么可说的了

3）项目结构

  1. pages：存放页面
  2. static：存放静态资源，如图片，视频等等
  3. unpackage：存放打包过后的项目文件
  4. App.vue：根组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数
  5. main.js：项目入口文件，一个vue项目最先初始化的文件
  6. manifest.json：应用的配置文件，指定应用打包时的名称、图标、权限等（和网页插件挺像）
  7. pages.json：整个项目页面的存放路径以及全局外观配置
  8. uni.scss：控制应用的整体风格，比如按钮颜色、边框风格等等

4）开发规范

5）globalStyle全局外观配置

  • 官网的介绍：pages.json 页面路由 | uni-app官网 (dcloud.net.cn)

  • globalStyle位于pages.json之下


6）pages页面配置

  • 首先在pages目录下新建一个页面
  • 新建页面后需要在pages.json的pages数组下添加该页面的路径
  • 每个page有两个属性，一个是path(项目的相对路径)，一个是style，style里面的属性和globalStyle类似，设置相同的属性可以覆盖掉全局的配置
  • pages数组中的第一项将会作为起始页

7）tabbar

  • tabbar即为app底部的导航栏
  • 当设置position为top时(导航栏跑到页面上方)，将不会显示icon(图标)
  • tabBar中的list是一个数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序，对于list中的每个元素应配置下方属性：

  • tabbar与globalStyle同级，应在pages.json中完成配置

  • 关于tabbar的其他常用属性

8）Condition

  • 启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：每个商品点击查看详情进入的详情页面，暂时可以理解为不依靠底部导航栏跳转到的页面，而是类似于Web开发的超链接。

  • 对于list启动模式列表有以下属性：

  • 在微信开发者工具中可以跳转到详情页