uni-app 是什么

uni-app是一套可以适用多端的开源框架，一套代码可以同时生成ios，Android，H5，微信小程序，支付宝小程序，百度小程序等。

uni-app 优势/劣势

优点

  • 一套代码多端复用
  • uni-app使用H5技术开发，学习成本低

缺点

  • 由于适应多端。某些兼容性问题无法快速定位解决

创建项目

命令行

  1. 搭建NODEJS环境

  2. 全局安装vue-cli

  3. 使用vue-cli 创建项目

1
2
3

vue create -p dcloudio/uni-preset-vue my-project

  1. 选择对应的模版

HBuilderX

可视化操作

HBuilderX 更加的简洁，但是无法实现自动化打包。

编码

uni-app的代码风格和API默认是向微信小程序对齐。默认实现了所有的微信小程序支持的API

编码HTML标签不可以使用，向微信小程序看起。向下面几个例子：

  • div => view
  • span => text
  • img => image

布局方式 只推荐使用flex布局。 比如nvue、快应用只支持flex布局

非H5端，不能使用浏览器自带对象，比如document、window、localstorage、cookie等，更不能使用jquery等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象。

单位方面，uni-app默认为rpx。这是一种可跨端的通用单位

页面与组件生命周期不同

nvue

uni-app App 端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。

在 App 端，如果使用 vue 页面，则使用 webview 渲染；如果使用 nvue 页面(native vue 的缩写)，则使用原生渲染。

如果仅开发APP的话，建议时间nvue。编译成APP后性能更加流畅。

但是它限制比较多比如：

  • 布局不能使用百分比、没有媒体查询。
  • nvue 页面只能使用flex布局，不支持其他布局方式。页面开发前，首先想清楚这个页面的纵向内容有什么，哪些是要滚动的，然后每个纵向内容的横轴排布有什么，按 flex 布局设计好界面。
  • 只可以使用v-if不可以使用v-show
  • 文字内容，必须、只能在text组件下，且只有text标签可以设置字体大小，字体颜色。
  • 不支持背景图。
  • 不能在 style 中引入字体文件

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

基本可以在项目中任何会被编译的文件中使用，包括pages.json

写法是 #ifdef 或 #ifndef 加 %PLATFORM% 开头 以#endif 结尾。

条件编译写法 说明
#ifdef APP-PLUS
需条件编译的代码
#endif		 仅出现在 App 平台下的代码
#ifdef H5
需条件编译的代码
#endif		 除了 H5 平台，其它平台均存在的代码
#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif		 在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）

%PLATFORM% 可取值如下：

值 生效条件
APP-PLUS App
APP-PLUS-NVUE或APP-NVUE App nvue 页面
H5 H5
MP-WEIXIN 微信小程序
MP-ALIPAY 支付宝小程序
MP-BAIDU 百度小程序
MP-TOUTIAO 字节跳动小程序
MP-LARK 飞书小程序
MP-QQ QQ小程序
MP-KUAISHOU 快手小程序
MP-JD 京东小程序
MP-360 360小程序
MP 微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW 快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION 快应用联盟
QUICKAPP-WEBVIEW-HUAWEI 快应用华为

注意：

  • 条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用 <!-- 注释 -->；
  • 使用条件编译请保证编译前和编译后文件的正确性，比如json文件中不能有多余的逗号；
  • 条件编译APP-PLUS包含APP-NVUE和APP-VUE，APP-PLUS-NVUE和APP-NVUE没什么区别，为了简写后面出了APP-NVUE ；
  • Android 和 iOS 平台不支持通过条件编译来区分，如果需要区分 Android、iOS 平台，请通过调用 uni.getSystemInfo 来获取平台信息。(HBuildX 支持ifios、ifAndroid代码块，可方便编写判断。)

static 目录的条件编译

在不同平台，引用的静态资源可能也存在差异，通过 static 的的条件编译可以解决此问题，static 目录下新建不同平台的专有目录（目录名称同 %PLATFORM% 值域,但字母均为小写），专有目录下的静态资源只有在特定平台才会编译进去。

如以下目录结构，a.png 只有在微信小程序平台才会编译进去，b.png 在所有平台都会被编译。

1
2
3
4
5
6
7
8
┌─static
│  ├─mp-weixin
│  │  └─a.png
│  └─b.png
├─main.js
├─App.vue
├─manifest.json
└─pages.json

整体目录条件编译

如果想把各平台的页面文件更彻底的分开，也可以在uni-app项目根目录创建platforms目录，然后在下面进一步创建app-plus、mp-weixin等子目录，存放不同平台的文件。

注意

  • platforms目录下只支持放置页面文件（即页面vue文件），如果需要对其他资源条件编译建议使用static 目录的条件编译

环境变量和自定义配置

由于本质上打包方式还是基于vue-cli和webpack进行的代码打包。因此可以和开发vue一样进行环境变量和webpack的配置修改
但是又有部分不同：

  • publicPath 不支持，如果需要配置，请在 manifest.json->h5->router->base 中配置，参考文档：h5-router
  • outputDir 不支持
  • assetsDir 固定 static
  • pages 不支持
  • runtimeCompiler 固定 false
  • productionSourceMap 固定 false
  • css.extract H5 平台固定 false，其他平台固定 true
  • parallel 固定 false

环境变量

在vue-cli创建的项目中，可以创建.env等环境文件，然后在package.json中打包命令配置对应的 --mode来区分

HBuildX 目前没有好的发现。可能需要手动维护

自定义配置

cli 和 最新的 HBuildX都支持 载入 vue.config.js 配置

发布

自动化部署

和平时发布前端包一样，执行对应的 npm 命令即可

由于不支持修改outputDir,因此建议在npm打包命令完成后，跟shell命令移动到制定位置 例如：

1
2
3

npm run build:h5:test && mv ./dist/build/h5 ./saas-admin-h5

App建议使用 HBuildX的图形化操作。

本地打包

HBuildX 图形化操作