uni-app学习心得

一.初识uni-app

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

其实，DCloud才是这个行业的开创者。DCloud于2012年开始研发小程序技术，优化 webview 的功能和性能，并加入W3C和 HTML 5中国产业联盟，推出了HBuilder开发工具，为后续产业化做准备。

DCloud持续在业内普及小程序理念，推进各大流量巨头，包括手机厂商，陆续上线类似小程序/快应用等业务。

部分公司接入了联盟标准，但更多公司因利益纷争严重，标准难以统一。

技术是纯粹的，不应该因为商业利益而分裂。开发者面对如此多的私有标准不是一件好的事情。

造成混乱的局面非 DCloud所愿，于是决定开发一个免费开源的框架。

既然各巨头无法在标准上达成一致，那么就通过这个框架为开发者抹平各平台的差异。

而他们选择uni-app的原因是：

1、开发者/案例数量更多

2、跨平台能力及扩展灵活性更强

3、性能体验优秀

4、周边生态丰富

5、学习成本低

6、开发成本低

二.下载工具HBuilderX

选择对应的版本下载即可：

HBUILD X

 

三.认识HBuilder X 

uni-app官网这个是HBuilder X 官网，里面可以帮助我们快速上手uni-app。

uni-app有许多特点：

1.可视化界面

HBuilderX内置相关环境，开箱即用，无需配置nodejs。

2.兼容性强 

一一套代码，同时运行到iOS模拟器、Android模拟器、web、微信开发者工具、支付宝小程序。这大大提高了开发成本、降低了开发门槛、缩短了开发时间，同时还为用户提供了更好的体验。

3.组件类型丰富  

开发者为uni-app提供了一系列基础组件，方便开发者降低开发成本和时间，使得开发过程更加高效和灵活。

而既然谈到了组件，我们就要知道组件是什么：

1. 组件是视图层的基本组成单元
2. 组件是一个单独且可复用的功能模块的封装。

以下是一个基础组件的实例，在一个vue页面的<view>组件下插入一个<button>组件。

<template>
	<view>
		<button class="sure">正确</button>
	</view>
</template>

组件的基本类型：

类型	描述	注解
buerzBoolean	布尔值	组件写上该属性，不管该属性等于什么，其值都为 true，只有组件上没有写该属性时，属性值才为 false。如果属性值为变量，变量的值会被转换为 Boolean 类型。
Number	数字	1,2,3,4,5
String	字符串	"ggbond"
Array	数组	[1,"ggbond"]
Object	对象	{key:value}
EventHandler	事件处理函数名	handlerName 是 methods 中定义的事件处理函数名
Any	任意属性

 四.标签运用 

1.text:文本容器，用于显示文本内容。

<text class="song">歌唱</text>

2.image：图片容器，用于显示图片。

<image src="../../static/like.png" mode=""></image>

3.button：按钮容器，用于触发事件。

<button class="sure">正确</button>

4.view：视图容器，用于包含其他元素，类似于HTML中的div。

<view class="head">
			<text class="song">歌唱</text>
</view>

除了以上这些常用的标签，Uniapp还支持许多其他的标签，可以根据需要进行使用。在使用标签时，需要注意标签的嵌套关系，以及不同平台的兼容性问题，这样可以保证应用程序在各个平台上的表现一致。

总结，uni-app是一个极其优秀的框架，它使我我的开发效率大大提高，减少了开发成本。并且在开发过程中遇到的问题和困难都能够通过官方文档和开发者社区得到解决。uni-app的出现节省了开发者的时间和精力，还确保了应用程序的质量和稳定性。

接下来是我的个人作品展示