开发规范
- 页面文件遵循 Vue 单文件组件 (SFC) 规范,即含三种类型的顶级语言块
<template>
、<script>
和<style>
- 组件标签靠近小程序规范,详见 uni-app 组件规范。uni-app 的组件分为基础组件和扩展组件。基础组件在 uni-app 框架中已经内置,比如
<view>
组件。扩展组件需要将组件导入项目中才可以使用 - 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见 uni-app 接口规范
- 生命周期:应用生命周期、页面生命周期、组件生命周期(同 Vue 规范)
- 建议使用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](/uni_modules)
规范的插件。
├─wxcomponents 存放小程序组件的目录
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见
└─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见
关于编译
static 目录下的文件均会被完整打包进去,且不会编译。该目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。
非 static 目录下的文件(vue、js、css 等)只有被引用到才会被打包编译进去。
引入静态资源
模板内
可以使用相对路径或者绝对路径
<!-- 绝对路径,/static指根目录下的static目录,在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>
js文件
可以使用相对路径或者绝对路径
不支持使用 /
开头的方式引入
// 绝对路径,@指向项目根目录,在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'
css引入
可以使用相对路径或者绝对路径
/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');