uni-app一套代码，多端发行，离线云端打包更便捷

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

uni-app是2018年7月发布，自发布以来已有数万开发者创建了1万多个项目。 如下是开发者分享的、利用uni-app开发的多端案例，我们相信还有更多优秀案例，没有被我们采集到，欢迎大家到项目案例征集提交。

• uni-app目录介绍

在点击工具栏里的文件 -> 新建 -> 项目->选择uni-app，输入工程名，点击创建：

image.png

├─ components ··················· uni-app组件目录
   └──comp-a.vue  ··················· 可复用的a组件
├── pages ·······················  业务页面文件存放目录
    ├─ index ······················ 使用到的字体文件
        └── index.vue ····················· index页面
    ├─ list ······················· 使用到的图片文件
        └── list.vue ····················· list页面
├─ static ··· 存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
├─ main.js ······················· Vue初始化入口文件
├─ App.vue ··· 应用配置，用来配置App全局样式以及监听 
├─ manifest.json ················ 配置应用名称、appid、logo、版本等打包信息
└─ pages.json················· 配置页面路由、导航条、选项卡等页面类信息

• HBuilder X 为极客，为懒人，为你 ------支持离线云端打包

在HBuilderX工具栏，点击发行，选择原生app-云端打包，如下图：

image.png

• 尺寸单位

uni-app 使用 upx 作为默认尺寸单位， upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。

开发者可以通过设计稿基准宽度计算页面元素 upx 值，设计稿 1px 与框架样式 1upx 转换公式如下：

设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx

换言之，页面元素宽度在 uni-app 中的宽度计算公式：

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

• 特色功能

  
  
  image.png

值	平台	参考文档
APP-PLUS	5+ App	HTML5+ 规范
APP-PLUS-NVUE	5+ App nvue	Weex 规范
MP-WEIXIN	微信小程序	微信小程序
H5

• native.js

  
  
  image.png

云打包的项目模板安卓app：http://note.youdao.com/noteshare?id=e9b80ff3f04d890b1bd99dca92ffb066
官网https://uniapp.dcloud.io/