Uniapp核心（一）语言介绍与Uniapp编写环境搭建

人亦已歌

Uniapp是Dcloud团队开发的一种语言，可喜的是：这个团队是中国的。Dcloud主要有三个产品，一个是它的代码编辑器HBuilder，另一个是它的云开发环境uniCloud，还有一个就是uniapp。

在过去移动端还没有盛行的时候，web开发基本上就是针对PC电脑的，它分为前端后和后端两个主要门类。前端的重头戏就是CSS和javascript，后端主要就是PHP。然而，由于移动端的不断发展，随即出现了H5、小程序、app等诸多门类。

虽说门类繁杂，但总的来说就是在不同的客户端上展示相同的数据。例如：一个公司有一个数据库，它要在手机上有H5站，在电脑上有PC站，还要有小程序，小程序又有很多平台。例如微信、百度、快手、抖音等等，未来可能还会越来越多，还有app等等，这些平台它们都有自己独立的应用开发语法，如果让一个公司分别为这些客户端去开发应用，那么，可想而知，绝对是一件极为痛苦的事。

Uniapp就是为了解决这种多端问题，使用Uniapp只要开发一套程序，通过它的编译器，可以编译为适应不同客户端使用的程序。它支持编译的类型非常多，有H5、小程序（基本上主流的小程序它都支持），甚至于可以编译为app。

以下是uniapp官方提供的一张图片，用以说明一套uniapp代码可以同时支持14种平台。



正如Uniapp官方所说，这可能才是解决多端问题的终极方案。

就Uniapp本身而言，它并非一门新的语言，Uniapp使用的是vue，只不过稍有改动而已，所以，在学习Uniapp之前应该先学vue，如果会vue，那么uniapp基本上就会了。

本专题要讲解的uniapp必须要用使用Dcloud的HBuilder编辑器，因为Uniapp项目需要HBuilder来编译。

下面我们先从HBuilder的安装讲起。
下载地址和使用文档链接如下：

1. https://hx.dcloud.net.cn/

复制代码

软件是中文的，安装过程也就是下一步而已，没什么好说的，安装好以后是这个样子。



下面我们就开始创建uniapp项目

在左侧的文件管理器区域右键，选择新建->项目->选择新建uni-app项目。



首先填写项目名称，我这里填写为Uniappstudy，大家随意，然后选择项目模板，在下面它为我们提供了很多模板，我们现在是入门学习，所以选择第一个空模板即可。



下面这些都保持默认，我们使用vue2语法，然后点击创建。

然后就能得到一个如下结构的文件夹：



如果大家学习过小程序的话，就会发现，他和小程序的目录结果非常相似。

下面我们就看如何让这个空项目运行起来。

先选中我们创建好的项目中的任意一个文件，然后在菜单栏上点击运行，里面包含很多种运行方式，它可以运行到内置浏览器，也可以运行到外部的浏览器，还可以运行到各个小程序平台的开发工具中，还可以运行到模拟器中。

我们这里就运行到内置浏览器中了，即：让它展示该空项目的h5效果。



选择运行到内置浏览器后如何没有运行起来，就点击下方控制台中的重新运行按钮，如下：



最终就会出现这样一个效果



右侧浏览器区域展示了我们目前的项目效果，下方是控制台，动态输出运行日志。

下面我们来修改一下页面效果，目的是为了告诉大家uniapp代码的编写位置。

uniapp项目和小程序项目类似，在page目录中的每一个目录就是一个页面，每一个页面的目录中都有一个与目录同名的vue文件。

当前浏览器显示的效果就是index这个页面，页面中的图标和hello文字都是在该页面中定义的，如下：



现在我们修改hello为hello world试试看，修改后ctrl+s保存，编辑器会自动重新编译，效果如下：



ok，通过以上的讲解，我们就已经知道如何创建一个uniapp项目，并且也知道了在项目中uniapp代码的编写位置，以及uniapp项目如何运行与动态预览，从下一篇开始我们就正式进入uniapp的学习环节。

keny

学海无涯！  生命不息，学习不止！

女王

看了这篇文章我的感触很深啊，有很多人都是表面说说，而做的有多少人啊！用一些华丽的东西去炫耀自己的知识，而忘了用一些简单的方法去解决这个问题！！  以后我会用心的学习变成知识，争取为心目中的理想而奋斗，争取做一名好的程序员，为中国的软件业贡献自己的一份力量。

laiwu1989

是啊！虽然我还是一个学生，没有进入社会，我相信你看法对我是一个很大影响！天外有天，人外有人永远不要认为自己已经学好了不要再学了

linmq02

太谢谢了....!!  我刚刚进入大学,,,  对编程很迷茫  是你点醒了我!!  谢谢

jxp2022

fighting  本人今年22了,正在读中专,可别笑话,当初我还是一个初中刚毕业的小子,没有太多的杂念,于是就和师傅做学徒学习焊工,历经艰苦三年后,我做了一名普通的焊工师傅.回想2003年一年本人感觉吃的苦太多了,可是年末当我回家时,师傅仅给我１４００元钱．好歹２０岁做了师傅．又经过了一年半后，我觉得做个普通的焊工，根本上不能改变我的命运，于是我在多方阻挠下来到武汉二轻工业学校学习数控技术，现在已经学习了一年．头一年里专业课很少，我得以在业余学习Ｃ语言，现在还在学习中，我已经六年没在读书了，感觉自己的脑子没有别人转得快，现在先自学习Ｃ语言，然后学习数控编程，我想没错吧，学习了Ｃ语言，我觉得Ｃ能锻炼我的大脑思维．我只是一个业余编程爱好者，我只想以后做个优秀的数控程序员，至于计算机专业的编程我没敢想过做出什么成绩来．从焊工到数控编程，我一定行．我还想学习ＶＢ，不知学了对我有没有用．我和以上的楼主在计算机专业不敢相提并论，望多多指教．  真知灼见啊，作为一名初学者能看到这样的文章实在是一种幸福

Sun-Ny

汗,看了之后我流汗了.  CPU是为用户服务的,不是为程序员服务的经典!

thiam

看这篇文章的时候,当作者给出了两个程序而监考官依然不满意的时候,我也思考了一下更优的解法,也许就是-1的连续相乘呢..我很高兴我的判断是对的,我学c语言的时间不怎么长,也有做过那样的题目,老师给出的答案也跟作者写的差不多..其实初看到题目的时候,我也有过那种简洁的思路,只是那种想法转瞬即逝..  有一次,我重复做一道老师给的题目(附答案),后来我把程序给我的男朋友做(他也是学计算机的,而且算法还可以),他说老师的做法太差,然后给了我他做的答案....  有时候,一些算法还是要靠我们自己去摸索的....  感谢作者让我重新认识到这一点!

biscy

是观念的原因。考研，考级。过多的看到钱就会掉到钱眼里。看不到会有好的程序。钱可以成就一个人，也可以毁掉一个人

myfavorcn

我对编程也略知一二,现正准备找一个软件公司,但看了你的这篇文章之后,我才发现自己有多重(是半斤还是八两?),我看我先在学习一段时间,再修练修练,等到修练成功了,再去软件公司,在此,我先谢谢你对我的提醒.