渺渺空空
渺渺空空

uni-app 搭建及开发说明

开发工具

HBuilder-x
微信开发者工具

项目创建

步骤1：打开 HBuilder-x
步骤2：文件 -> 新建 -> 项目 -> uni-app项目

除了HBuilderX可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。

目录结构 / 分包结构 

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb [详见uniCloud]
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录
├─unpackage             存放各平台专用页面的目录
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
├─pages.json            配置页面路由、导航条、选项卡等页面类信息
└─uni.scss              这里是uni-app内置的常用样式变量

文件简介

main.js
  • main.js是 uni-app 的入口文件，主要作用是初始化 vue 实例、定义全局组件、使用需要的插件如 vuex。
  • 首先引入了 Vue 库和 App.vue ，创建了一个 vue 实例，并且挂载 vue 实例。
  • 使用Vue.use引用插件，使用Vue.prototype添加全局变量，使用Vue.component注册全局组件。
  • 可以引用vuex，因涉及多个文件，此处没有提供示例，详见hello uni-app示例工程。
  • 无法使用vue-router，路由须在pages.json中进行配置。如果开发者坚持使用vue-router，可以在插件 市场 (opens new window)找到转换插件。
App.vue
  • App.vue 是uni-app的主组件，所有页面都是在 下进行App.vue 切换的，是页面入口文件。但 App.vue
  • 本身不是页面，这里不能编写视图元素。
  • 这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData
  • 应用生命周期仅可在App.vue中监听，在页面监听无效。
  • 在应用onLaunch时，getApp对象还未获取，暂时可以使用this.globalData获取globalData。
  • 在 App.vue 中，可以定义一些全局通用样式，例如需要加一个通用的背景色，首屏页面渲染的动画等都可以写在 App.vue 中。
uni.scss
  • uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
  • uni-app 官方扩展插件（uni ui）及 插件市场 (opens new window)上很多三方插件均使用了这些样式变量，如果你是插件开发者，建议你使用 scss 预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App。
  • uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss，使得每个scss文件都被注入这个uni.scss，达到全局可用的效果。如果开发者想要less、stylus的全局使用，需要在vue.config.js中自行配置webpack策略。
manifest.json
  • manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。
  • 各类网络请求的超时时间 networkTimeout，单位均为毫秒
pages.json
  • 用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
  • pages 配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象
  • globalStyle 用于设置应用的状态栏、导航条、标题、窗口背景色等。
  • topWindow, leftWindow , rightWindow用于解决宽屏适配问题。
  • matchMedia 通过matchMedia的调节，可以自适应在不同屏幕上显示指定的window。

开发规范

1.页面文件遵循 Vue 单文件组件 (SFC) 规范
2.组件标签靠近小程序规范，详见uni-app 组件规范
html uni-app 说明
/

/

    /
/