Hbuilder介绍，uniapp框架

Hbuilder对程序前端页面进行开发（包括android，ios，小程序，web等等）,其实也就是相当于把android开发进行前后端分离了。方便分工协作。提高开发效率。

用前端框架开发可以实现一次编码，多平台运行。

！！！！！！

原生       Android               pc                       web

进阶       分离开发                                          分离开发

新建项目并直接在android真机上运行项目

1. 新建项目，模板uni uni项目；数据线连接手机。
2. 运行-运行到手机或模拟器-运行到android app 基座

发布：这是手机web发布，也可以以其他方式。

在HBuilderX工具栏，点击发行，选择网站-H5手机版，如下图，点击即可生成 H5 的相关资源文件，保存于 unpackage 目录。

Js模块，css样式文件导入：

局部注册：

普通页面文件进行导入就行

全局注册：

全局样式，在根目录下的app.vue里写入，每个页面都会加载app.vue里的样式。

全局导入vue组件（包括界面、js、样式的库）, 在项目根目录下的main.js里处理

uni-app 2.7以后推出了更简单的组件使用技术easycom，无需引用和注册组件，直接在template区域使用组件即可。

---

下为html标签和uni-app内置组件的映射表：

• div 改成 view
• span、font 改成 text
• a 改成 navigator
• img 改成 image
• input 仅仅是输入框。 原html规范中input不仅是输入框，还有radio、checkbox、时间、日期、文件选择功能。在uni-app和小程序规范中，input仅仅是输入框。其他功能uni-app有单独的组件或API：radio组件、checkbox组件、时间选择、日期选择、图片选择、视频选择、多媒体文件选择(含图片视频)、通用文件选择。
• form、button、label、textarea、canvas、video 这些还在。
• select 改成 picker
• iframe 改成 web-view
• ul、li没有了，都用view替代。做列表一般使用uList组件
• audio 不再推荐使用，改成api方式，背景音频api文档 其实老的HTML标签也可以在uni-app里使用，uni-app编译器会在编译时把老标签转为新标签，比如把div编译成view。但不推荐这种用法，调试H5端时容易混乱。

除了改动外，新增了一批手机端常用的新组件

• scroll-view 可区域滚动视图容器
• swiper 可滑动区域视图容器
• icon 图标
• rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）
• progress 进度条
• slider 滑块指示器
• switch 开关选择器
• camera 相机
• live-player 直播
• map 地图
• cover-view 可覆盖原生组件的视图容器

cover-view需要多强调几句，uni-app的非h5端的video、map、canvas、textarea是原生组件，层级高于其他组件。如需覆盖原生组件，则需要使用cover-view组件。详见层级介绍

编码习惯注意：

data() {

                           return {

                             // 组件的数据

                           };

                         },

最好是在每个执行语句后都加上；

在每个方法体{}结束后都加上，