uniapp学习笔记

[toc]

概述

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台

即使不跨端，uni-app也是更好的小程序开发框架、更好的App跨平台框架、更方便的H5开发框架

特点

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势

• 开发者/案例数量更多

• 平台能力不受限：在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台

• 性能体验优秀：加载新页面速度更快、自动diff更新数据，App端支持原生渲染，可支撑更流畅的用户体验

• 周边生态丰富

• 学习成本低：基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本

• 开发成本低：不止开发成本，招聘、管理、测试各方面成本都大幅下降

功能框架图

HBuilderX

概述

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化

HBuilderX，H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本。我们也简称HX。 HX是轻如编辑器、强如IDE的合体版本

特点

1. 轻巧 仅10余M的绿色发行包(不含插件)

2. 极速 不管是启动速度、大文档打开速度、编码提示，都极速响应 C++的架构性能远超Java或Electron架构

3. vue开发强化 HX对vue做了大量优化投入，开发体验远超其他开发工具

4. 小程序支持 国外开发工具没有对中国的小程序开发优化，HX可新建uni-app 小程序等项目，为国人提供更高效工具

5. markdown利器 HX是唯一一个新建文件默认类型是markdown的编辑器，也是对md支持最强的编辑器 HX为md强化了众多功能

6. 清爽护眼 HX的界面比其他工具更清爽简洁，绿柔主题经过科学的脑疲劳测试，是最适合人眼长期观看的主题界面

7. 强大的语法提示 HX是中国唯一一家拥有自主IDE语法分析引擎的公司，对前端语言提供准确的代码提示和转到定义(Alt+鼠标左键)

8. 高效极客工具 更强大的多光标、智能双击...让字处理的效率大幅提升

9. 更强的json支持 现代js开发中大量json结构的写法，HX提供了比其他工具更高效的操作

安装

以Windows为例

下载

HBuilderX下载地址: 下载地址

解压

HBuilderX，Windows为zip包，解压后才能使用

创建快捷方式

启动

HBuilderX，首次启动后，您会看到一个选择窗口，您可以在此选择您喜欢的主题、快捷键

入门

新建项目

选择一个模板

运行项目

点击运行到内置浏览器

语法提示

框架语法提示库是在页面的右下角选择