Union Application

HBuilderX 下载安装教程

HBuilderX简称HX，是一款轻量级的、免费的IDE。它具有强大的语法提示和vue支持。

1. 官网地址：

https://ask.dcloud.net.cn

下载

HBuilderX-下载地址
https://www.dcloud.io/hbuilderx.html
​
Alpha版下载地址
​
下载地址：https://www.dcloud.io/hbuilderx.html 

2. 下载后，将压缩包复制到适当位置，解压压缩包，找到Hbuilder X可执行程序，双击即可启动程序：

注意：HBuilderX 3.4.6版本起，取消单独的App开发版安装包，统一为一个标准安装包。标准版也可以安装app相关插件。

正式版和Alpha版的区别Alpha版比正式版更新频率更高，新功能会优先在alpha版上发布。Alpha独立于正式版，建议电脑上保持正式版和alpha 2个版本，不要互相覆盖。Alpha和正式版各自有独立的升级机制，不会互相影响。Alpha和正式版共用相同的用户配置，如主题、快捷键设置、代码块设置。但插件需要各自安装。Alpha和正式版能同时启动一个。先开启正式版，再启动alpha版会激活已经开启的正式版。反之亦然。我们推荐uni-app的开发者，同时安装2个版本。经常向我们反馈alpha版问题。
开发工具的测试很复杂，并非官方内测好就OK，需要在各种各样的代码的写法下测试。
如果大家总抱着等别人去体验alpha，稳定后你再升级正式版的心态话，那正式版也不可能真的稳定。
凡是在论坛里被确认的bug，会都被很快修复。 Alpha版下载地址下载地址：https://www.dcloud.io/hbuilderx.html `HBuilderX官方QQ交流群：HBuilderX Mac电脑专用交流： 148229211HBuilderX 官方QQ群：1051710376 

什么是UniApp

1, Union Application

2, 前端框架

3， 基于 Vue.js

4, 开发规范同小程序

5，一套代码即可编译到 IOS,Android,H5,小程序等多个平台

为什么要使用UniApp?

1, 同一套代码编译多端

2, 接近原生，效果更好

3, 开发效率高

4, 开发(人力/维护/时间) 成本低

5, 学习成本低

6, 支持 npm 与自定义组件

7, 社区活跃，版本迭代块

使用UniApp开发一个完整的多端App,整体成本会节省很多的，一旦我们的成本节省了。

我们使用Union Application 他本身就是使用 VUE 去开发的，你使用vue的话，再使用 Uni-APP来开发，你的学习成本就会比较低。

UniApp他对于自己的扩展度支持是非常高的，首先是自定义组件，在小程序里面是非常常用的，很多代码都可以通过组件形式去进行引入，我们在小程序中，也会有一部分会使用到自定义组件，我们会去引用一下通用的相应组件来进行相应的开发，这样我们可以将雷同的代码提取出来，可以共用化，这样扩展度就比较高，也支持npm, npm的扩展使用第三方插件使用起来就很方便。这样我们的应用程序他的生态会更加好，他本身与我们国内的一家公司关系不错，HBuilderX, MUI相应的应用程序

开发工具 HBuilderX

官网地址：

https://www.dcloud.io/

HBuilderX 自述

# HBuilderX 自述文件 (markdown格式)
***************************************`HBuilderX`，H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本。我们也简称`HX`。
`HX`是**轻如编辑器、强如IDE**的合体版本。## 让我们简单了解下HX的特点
1. 轻巧仅10余M的绿色发行包(不含插件)
2. 极速不管是启动速度、大文档打开速度、编码提示，都极速响应C++的架构性能远超Java或Electron架构
3. vue开发强化`HX`对vue做了大量优化投入，开发体验远超其他开发工具[详见](https://hx.dcloud.net.cn/Tutorial/Language/vue) 按下Alt+鼠标左键可直接打开网址
4. 小程序支持国外开发工具没有对中国的小程序开发优化，`HX`可开发`uni-app`或`小程序`、`快应用`等项目，为国人提供更高效工具
5. markdown利器`HX`是唯一一个新建文件默认类型是markdown的编辑器，也是对md支持最强的编辑器`HX`为md强化了众多功能，请**务必点击**【菜单-帮助-markdown语法示例】，快速掌握md及`HX`的强化技巧！
6. 清爽护眼HX的界面比其他工具更清爽简洁，绿柔主题经过科学的脑疲劳测试，是最适合人眼长期观看的主题界面[详见](https://hx.dcloud.net.cn/Tutorial/Other/health)
7. 强大的语法提示`HX`是中国唯一一家拥有自主IDE语法分析引擎的公司，对前端语言提供准确的代码提示和转到定义(Alt+鼠标左键)
8. 高效极客工具更强大的多光标、智能双击...让字处理的效率大幅提升了解`HX`的极客技巧，[详见](https://hx.dcloud.net.cn/Tutorial/UserGuide/skill)，
9. 更强的json支持现代js开发中大量json结构的写法，`HX`提供了比其他工具更高效的操作[详见](https://hx.dcloud.net.cn/Tutorial/Language/json)## 扩展性
`HX`支持java插件、nodejs插件，并兼容了很多vscode的插件及代码块。
还可以通过外部命令，方便的调用各种命令行功能，并设置快捷键。如果你习惯了其他工具(如vscode或sublime)的快捷键，在菜单工具-快捷键方案中可以切换。## 结语
在我们团队内部，`HX`不止替代了其他开发工具，还替代了记事本、word、evernote等，成为霸屏工具，令我们爱不释手。
希望你也会喜欢上这款免费工具。[赞助](https://dev.dcloud.net.cn/sponsor/) 欢迎对我们的工作给予支持
[需求墙](https://dev.dcloud.net.cn/wish/) 可以在这里投票，以影响我们的工作优先级
[论坛](https://ask.dcloud.net.cn/explore/)
[Github](https://github.com/dcloudio/HBuilderX)
[uni-im](https://im.dcloud.net.cn/#/?joinGroup=677366d82fe5bae6371cbbd9)D:/HBuilderProjects
D:/HBuilderProjects
默认 C:/Users/Administrator/Documents/HBuilderProjects

自己的 pages/index/index.vue

<template><view class="content"><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="title">{{title}}</text></view></view>
</template>

注意： {{}} 这个表达式是用来做数据绑定的 ，该表达式是绑定在 script 里面有一个 data() ，data()是一个model,是一个数据，他是一个实体类，所有的对象，属性不管是一个JSON Object,还是JSON Array,或者是一个string,int,float,double等等，他都可以写在data()这里去的，也就是说，data() 他是用来提供一个model模板类。

HBuilderX如何配置开发者工具

我们去HBuilderX编辑器找到工具，然后在工具栏找到设置，点击进去，找到运行配置，下面以百度开发者工具为例，
我们先去下载百度开发者工具，一旦下载完毕，然后直接去安装，安装完毕之后，在百度开发者工具栏下面我们需要去配置安装路径，我们需要将安装目录导入到我们HBuilderX里面去做路径配置，先将setting.json文件关闭，当我们去做运行的时候，他会找到相应的 .exe 可执行文件，然后再去运行，他就是这样一个过程

如何在运行配置中安装微信小程序

1，如图所示在'工具'里面找到'设置'

2，找到自己需要的微信小程序和支付宝小程序，点击地址栏进行下载

3，选择自己需要的项目下载，如下所示

如图所示下载

4，然后进行安装，将安装路径复制到对应的工具里面

,5，然后在回到编辑器，启动调式工具

点击图标 如下显示，选择自己需要的工具(比如微信开发者工具)，点击运行

得到如下所示结构

微信小程序：

在Mac上使用 Simulator 进行调试

使用苹果自带的Simulator进行调试，Simulator是内嵌在Xcode上面的，要去使用Simulator这个模拟器，我们需要去下载Xcode,Xcode里面内嵌了Simulator,我们就可以直接使用了。

现在Xcode升级到8了，有些特性已经更改，如果大家还需要测试、验证某些功能，还是需要下载旧的版本。

官网的地址在这里:

 [ https://developer.apple.com/download/more/](https://developer.apple.com/download/more/)XCode 88.2.1:https://developer.apple.com/services-account/download?path=/Developer_Tools/Xcode_8.2.1/Xcode_8.2.1.xip8.2: https://developer.apple.com/services-account/download?path=/Developer_Tools/Xcode_8.2/Xcode_8.2.xip8.1:https://developer.apple.com/services-account/download?path=/Developer_Tools/Xcode_8.1/Xcode_8.1.xip8: https://developer.apple.com/services-account/download?path=/Developer_Tools/Xcode_8/Xcode_8.xipXCode 77.3.1:https://developer.apple.com/services-account/download?path=/Developer_Tools/Xcode_7.3.1/Xcode_7.3.1.dmg7.3: https://developer.apple.com/services-account/download?path=/Developer_Tools/Xcode_7.3/Xcode_7.3.dmg7.2.1:https://developer.apple.com/services-account/download?path=/Developer_Tools/Xcode_7.2.1/Xcode_7.2.1.dmg7.2 : https://developer.apple.com/services-account/download?path=/Developer_Tools/Xcode_7.2/Xcode_7.2.dmg7.1.1: https://developer.apple.com/services-account/download?path=/Developer_Tools/Xcode_7.1.1/Xcode_7.1.1.dmg7.1 : https://developer.apple.com/services-account/download?path=/Developer_Tools/Xcode_7.1/Xcode_7.1.dmg7.0 : https://developer.apple.com/services-account/download?path=/Developer_Tools/Xcode_7/Xcode_7.dmg