uniapp多端开发

uniapp：vue语法，跨端开发（H5,小程序,原生app），支持打包app（原生API），如果你熟悉Vue.js，则推荐 uni-app。

1、开发规范

uniapp = vue语法规范 + uni内置组件（跟小程序的组件名基本一致） + uni.api() + uni-ui跨端UI库 + flex布局

官方文档：

uni-app代码编写，基本语言包括js、vue、css。以及ts、scss等css预编译器。

在app端，还支持原生渲染的nvue，以及可以编译为kotlin和swift的uts。

DCloud还提供了使用js编写服务器代码的uniCloud云引擎。所以只需掌握js，你可以开发web、Android、iOS、各家小程序以及服务器等全栈应用。

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

• 页面文件遵循Vue单文件组件规范，即每个页面是一个.vue文件

• 组件标签靠近小程序规范

• 接口能力（JS API）靠近小程序规范，但需将前缀 wx、my 等替换为 uni

• 数据绑定及事件处理同 Vue.js 规范，同时补充了应用生命周期及页面的生命周期

• 如需兼容app-nvue平台，建议使用flex布局进行开发

uni-app分编译器和运行时(runtime)。uni-app能实现一套代码、多端运行，是通过这2部分配合完成的。

编译器将开发者的代码进行编译，编译的输出物由各个终端的runtime进行解析，每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime

2、功能框架图

 

3、创建项目

点击工具栏里的文件 -> 新建 -> 项目：

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。  

4、配置

统一配置：

打开manifest.json：

• 基础配置：填入Dcloud appID，没有需要获取一下

• H5配置:

  路由模式-->history

  运行基础路径: /

• 微信小程序配置:

  (1)、填入appID，选择：ES6转ES5；上传代码时样式补全，上传代码时自动压缩，检查安全域名和TLS版本

  (2)、打开微信开发者工具

  设置-->安全设置-->开启服务端口

  (3)、打开HBuilderX

  工具-->设置-->运行配置-->微信开发工具路径-->浏览找到微信开发者工具的安装路径

5、运行

(1)、浏览器运行

进入到项目里，点击工具栏的运行 --> 运行到浏览器 -> 选择浏览器

(2)、真机运行：usb连接手机和电脑，手机手动开启USB调试，苹果选择信任，进入到项目里，点击工具栏的运行 --> 真机运行 --> 选择你的设备，会在你机器上装Hbuilder测试软件，打开软件（需要设置信任）。

android手机的步骤：

①打开"开发人员选项”

②在“开发人员选项”里打开usb调试

(3)、微信开发者工具里运行：进入到项目里，点击工具栏的运行 --> 运行到小程序模拟器 --> 微信开发者工具，即可在微信开发者工具里面体验uni-app。

6、打包

(1)、发行H5：选择网站-H5手机版

(2)、发行小程序：小程序开发工具->上传->公众平台小程序账号->提交审核

(3)、发行app：保证HBuilderX是最新版，和云打包端的版本要一致

在HBuilderX工具栏，点击发行，选择原生app-云端打包，会出现如下界面，点击打包即可。

7、项目结构

pages       // 主要分页注册
static      // 静态资源引用
App.vue     //  应用配置
main.js     // 入口文件,配置一些全局的逻辑
manifest.json   //跨平台所有配置项文件(appid,pc跨域,小程序设置)
pages.json      //全局配置和页面配置
uni.scss        //全局scss

 uniapp和小程序的对应关系

uniapp文件	属性	小程序文件
pages.json	globalStyle	app.json->window
pages.json	pages.style	pages.json
manifest.json	开发配置	project.config.json
app.vue		app.js+app.wxss
pages/index/index.vue		pages/index/wxml+wxss+js
/static	静态本地资源	/images

8、注意

• 支持template/block；

• es7 支持 async await；

• 支持css背景图片链接本地资源；

• 路由推荐小程序，不支持 vue-router ，路由接参数同小程序；

• （生命周期）钩子函数推荐用小程序，支持vue钩子；

• 样式支持rpx，规范对齐小程序，类 | id打头 flex布局；

• npm 支持， 推荐先从 uni-app插件市场-->npm；

• 全局组件：在 main.js 里进行全局注册Vue.component，注册后就可以在所有的页面里使用该组件；

• 全局变量：公用模块(douban)|挂载 Vue.prototype|globalData|vuex；

• 不支持dom操作，关于dom规范，对齐mpvue（v-html不可用，物理键盘事件不存在)