uniapp 初步认识。

uni-app 可以理解为 vue 和 小程序 结合体：组件标签是 小程序 小程序的标签；语法是 vue 的语法；应用和页面级生命周期类似 小程序 的生命周期；组件级生命周期类似 vue 的生命周期。简而言之。学会 uni-app 相当于基本学会 vue 和 小程序 两大前端技术。

目录结构

HuilderX 生成的uniapp项目目录结构也就类似 vue 和 小程序 的结合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

┌─.hbuilderx            云空间目录
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的comp-a组件
├─node_modules          存放终端下载的插件（npm install / cnpm install 等）
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index首页页面
│  └─list
│     └─list.vue        list列表页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录
├─utils              	自定义工具类文件存放目录
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
├─index.html            自定义HTML文件在H5中可以加入百度统计以及网址标题图标等
├─package-lock.json     记录npm安装的插件名、版本号、存放处等
├─pages.json            配置页面路由、导航条、选项卡等页面类信息
└─uni.scss				HbuilderX sass插件安装生成的文件

补充提示

  • 编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。
  • static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
  • css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。