不凡学院前端100天

# uni-app 注意事项

# 开发 uni-app 的两种方式

  • HbuilderX 开发 uni-app 推荐使用 dcloud 开发的编译器 HbuilderX

  • 通过 vue-cli 命令行

    • 全局安装 vue-cli npm install -g @vue/cli
    • 创建 uni-app vue create -p dcloudio/uni-preset-vue my-project
    • 选中 uni-app 的模板 建议选择 hello uni-app 项目模板

# 这两种开发方式的区别

  1. 通过 vue-cli 创建的项目开发不如 HbuilderX 因为 HbuilderX 为 uni-app 做了特别强化
  2. 当需要编译成 App 的时候 只能使用 HbuilderX

# 开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

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

# 目录结构

uni-app 工程，默认包含如下目录及文件：

<script>

	┌─components            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            配置页面路由、导航条、选项卡等页面类信息，详见
</script>

#

# uni-app 注意事项

uni-app 在发布到 H5 时支持所有 vue 的语法；发布到 App 和小程序时，由于平台限制，无法实现全部 vue 语法，但 uni-app 仍是是对 vue 语法支持度最高的跨端框架。 具体注意事项 参考 使用 vue.js 注意事项

# uni 与 vue 不同支持

# 标签代码处理

uni-app 的标签组件与小程序相同，比如

变成了，变成了。 但 uni-app 的编译器已经自动处理了这部分转换，如果源码中写了可自动转换的组件，在编译到非 H5 端时会被自动转换（再编译回到 H5 端时 div 还是 div）。

  • div 改成 view
  • span、font 改成 text
  • a 改成 navigator
  • img 改成 image
  • select 改成 picker
  • iframe 改成 web-view
  • ul、li 没有了，都用 view 替代
  • 区域滚动使用 scroll-view，不再使用 div 的区域滚动处理方式
  • 左右、上下滑动切换，有专门的 swiper 组件，不要使用 div 模拟
  • input 的 search，原来的 type 没用了，改成 confirmtype，详见
  • audio 组件不再推荐使用，改成 api 方式，背景音频 api 文档
  • 之前的 v-html 不能用了，请使用 rich-text 组件或 uparse 扩展插件

# js 代码处理

  1. uni-app 的非 H5 端，不管是 App 还是各种小程序，都不支持 window、navigator、document 等 web 专用对象。 uni-app 的 API 与小程序保持一致，需要处理这些不同的 API 写法

  • 处理 window api

    • ajax 改成 uni.request。
    • cookie、session.storage 没有了，改用 uni.storage
    • alert,confirm 改成 uni.showmodel
    • window 的 resize 改为了 uni.onWindowResize

  • 处理 navigator api

    • geolocation 的定位方式改为 uni.getLocation
    • useragent 的设备 api 没有了，改用 uni.getSystemInfo

  • 生命周期

    • uni-app 补充了一批类小程序的声明周期，包括 App 的启动、页面的加载 详见https://uniapp.dcloud.io/collocation/frame/lifetime
    • vue h5 一般在 created 或者 mounted 中请求数据，而在 uni-app 的页面中，使用 onLoad 或者 onShow 中请求数据。
  1. css 代码处理 uni-app 发布到 App(非 nvue)、小程序时，显示页面仍然由 webview 渲染，css 大部分是支持的。但需要注意
  • 不支持 *选择器
  • 没有 body 元素选择器，改用 page 元素选择器。

  1. 路由 uni-app 路由全部交给框架统一管理，开发者需要在 pages.json 里配置每个路由页面的路径及页面样式，不支持 Vue Router

  2. 开发环境和生产环境 uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

  3. 页面样式与布局

  • 尺寸单位 uni-app 支持的通用 css 单位包括 px、rpx(推荐使用 px,不支持百分比) px，以 750 宽的屏幕为基准动态计算的长度单位，
  1. CSS 变量 uni-app 提供内置 CSS 变量
  • --status-bar-height (系统状态栏高度,在 app 和小程序中起作用,其他不起作用)
  • --window-top 内容区域距离顶部的距离 默认为 0
  • --window-bottom 内容区域距离底部的距离 默认为 0
  • 注意：

var(--status-bar-height) 此变量在微信小程序环境为固定 25px，在 5+App 里为手机实际状态栏高度。 当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。 由于在 H5 端，不存在原生导航栏和 tabbar，也是前端 div 模拟。如果设置了一个固定位置的居底 view，在小程序和 App 端是在 tabbar 上方，但在 H5 端会与 tabbar 重叠。此时可使用--window-bottom，不管在哪个端，都是固定在 tabbar 上方。

# 开始

# 框架配置

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等。框架配置参考

# 组件

组件参考

# api

api 参考

# 注意事项

  • 在 uni 中没有 vue-router 所以动态路由也就不存在 在 uni 中想要路由传值 只能通过 query 传值的方式
    • 接收传递的参数 在 onLoad 生命周期中可以直接获取地址栏中传递的参数
上次更新: 12/10/2019, 5:03:03 PM

← 码吧 →