小白菜笔记 uni-app(二)基础篇


开发规范

  • 页面文件遵循 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');

文章作者: April-cl
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 April-cl !
  目录