https://uniapp.dcloud.net.cn/tutorial/#开发规范

概念简介

开发规范

• 页面文件遵循 Vue 单文件组件 (SFC) 规范
• 组件标签靠近小程序规范，详见uni-app 组件规范
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
• 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发

工程

目录结构

• uniCloud 云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）

• components 符合vue组件规范的uni-app组件目录

  • comp-a.vue 可复用的a组件

• hybrid App端存放本地html文件的目录，详见

• platforms 存放各平台专用页面的目录，详见

• pages 业务页面文件存放的目录

  • index
    • index.vue index页面
  • list
    • list.vue list页面

• static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此

• uni_modules 存放uni_module规范的插件。

• wxcomponents 存放小程序组件的目录，详见

• main.js Vue初始化入口文件

• App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期

• manifest.json 配置应用名称、appid、logo、版本等打包信息，详见

• pages.json 配置页面路由、导航条、选项卡等页面类信息，详见

• uni.scss 这里是uni-app内置的常用样式变量

• tips

  • HbuilderX 1.9.0+ 支持在根目录创建 ext.json、sitemap.json 等小程序需要的文件。
  • platforms 目录下的有效目录

页面

页面简介

• uni-app项目中，一个页面就是一个符合Vue SFC规范的.vue文件或.nvue文件
  • .vue页面和.nvue页面，均全平台支持，差异在于当uni-app发行到App平台时，.vue文件会使用webview进行渲染，.nvue会使用原生进行渲染

新建页面

• pages.json的完整配置参考：全局文件。
• 通过HBuilderX开发 uni-app 项目时，在 uni-app 项目上右键“新建页面”，HBuilderX会自动在pages.json中完成页面注册

生命周期

• uni-app 支持如下页面生命周期函数
  • 仅百度小程序基础库 3.260 以上支持 onInit 生命周期
  • 不依赖页面传参的逻辑可以直接使用 created 生命周期替代
  • onReachBottom使用注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance
  • onPageScroll里不要写交互复杂的js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非h5端，js是在逻辑层执行的，两层之间通信是有损耗的。
    • nvue暂不支持滚动监听，可用bindingx代替
  • 如果想实现滚动时标题栏透明渐变，在App和H5下，可在pages.json中配置titleNView下的type为transparent
  • 如果需要滚动吸顶固定某些元素，推荐使用css的粘性布局，参考插件市场
  • 在App、微信小程序、H5中，也可以使用wxs监听滚动，参考；在app-nvue中，可以使用bindingx监听滚动，参考
  • onBackPress上不可使用async，会导致无法阻止默认返回
  • onTabItemTap常用于点击当前tabitem，滚动或刷新当前页面。如果是点击不同的tabitem，一定会触发页面切换
    • 如果想在App端实现点击某个tabitem不跳转页面，不能使用onTabItemTap，可以使用plus.nativeObj.view (opens new window)放一个区块盖住原先的tabitem，并拦截点击事件
    • 支付宝小程序平台onTabItemTap表现为点击非当前tabitem后触发，因此不能用于实现点击返回顶部这种操作