uni-app 学习笔记

框架结构

目录结构

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

语法

vue和nvue

uni-app是逻辑和渲染分离的。渲染层,在app端提供了两套排版引擎小程序方式的webview渲染和weex方式的原生渲染。 两种渲染引擎可以自己根据需要选。vue文件走的webview渲染,nvue走的原生渲染,二者可以混用,根据需要采用不同的渲染引擎。 组件和JavaScript写法是一样的,css不一样,原生排版的能用的css必须是flex布局,这是web的css的子集。

nvue优势

总结:在一些复杂交互或要求极致体验上

  1. 需要高性能的区域长列表或瀑布流滚动==> 使用nvue的list、recycle-list、waterfall等组件
  2. 复杂高性能的自定义下拉刷新。==> 推荐使用nvue的refresh组件
  3. 左右拖动的长列表。
  4. 实现区域滚动长列表+左右拖动列表+吸顶的复杂排版效果 ==> hello uni-app模板里的swiper-list
  5. 原生软盘交互,如软盘显示发送/搜索
  6. 解决前端控件无法覆盖原生控件的层级问题

vue优势

  1. nvue的canvas性能不高,尤其是Android App平台

附录

第1节 教学资源

四大教育网站

第2节 官方文档

第3节 常用配置

第三方SDK