uni-app心得体会

uni-app 是一个使用vue的语法 + 微信小程序的标签和API的跨平台前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台，几乎覆盖所有流量端。

uni-app 具有跨端数量更多、性能体验更优秀、学习成本低、开发成本低等几大关键优势。

uni-app 需要注意看注意事项，文档给出了和 Vue 使用的区别。例如动态的 Class 与 Style 绑定，在 H5 能用，APP 和小程序的体现就不一样。

配置项跟着文档来，开发环境也是现成的，下载 HBuilderX 导入项目就能运行，日常开发习惯了 VSCode，所以 HBuilderX 的主要作用就是用来打包 APK 和起各个端的服务，coding 的话当然还是用 VSCode。

HbuilderX 安装配置完毕后，我们就可以开始开发了，首先我们需要创建一个项目，我们点击ide左上角 文件-> 新建 ->项目 ，然后我们选择 uniapp 项目 ，模板选择 默认模板

 既然uniapp选择使用vue.js作为开发框架，那么我们一定要利用上vue中的一些优秀特性，例如插件（plugin），关于vue插件的介绍大家可以直接去官网看。

https://cn.vuejs.org/v2/guide/plugins.html

uniapp优点

1.多端支持 

2.更新迭代快

3.扩张强

4.开发成本、门槛低

5.组件丰富

6.uni-app 的主要特色也源自于它的插件市场十分丰富。

（uView这个库还是有很多技巧可以学到的：https://www.uviewui.com/js/intro.html

ColorUI-UniApp：是个样式库，不是组件库。https://ext.dcloud.net.cn/plugin

uCharts 高性能跨全端图表：https://ext.dcloud.net.cn/plugin）

• 新增：uni-app 除了支持Vue实例的生命周期，还支持应用生命周期以及页面生命周期。
• 生命周期分为 应用的生命周期、页面的生命周期、组件的生命周期。写过小程序和 Vue 的很好理解，大致上和 Vue 的还是差不多的，页面生命周期针对当前的页面，应用生命周期针对小程序、APP。这些过程可能都要踩一下！
• 应用生命周期

• 函数名
  onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
  onShow	当 uni-app 启动，或从后台进入前台显示
  onHide	当 uni-app 从前台进入后台
  onError	当 uni-app 报错时触发
  onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
  onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+）
  onPageNotFound	页面不存在监听函数
  onThemeChange	监听系统主题变化

  页面生命周期

• 函数名
  onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
  onLoad	监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
  onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
  onReady	监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
  onHide	监听页面隐藏
  onUnload	监听页面卸载
  onResize	监听窗口尺寸变化
  onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
  onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
  onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项
  onShareAppMessage	用户点击右上角分享
  onPageScroll	监听页面滚动，参数为Object
  onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object
  onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
  onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件
  onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发
  onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）
  onShareTimeline	监听用户点击右上角转发到朋友圈
  onAddToFavorites	监听用户点击右上角收藏

  详情可见链接https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle

组件是视图层的基本组成单元，是一个单独且可复用的功能模块的封装。每个组件包括如下几部分:以组件名称为标记的开始标签和结束标签、组件内容、组件属性组件属性值。
组件名称由尖括号包裹，称为标签，它有开始标签和结束标签。结束标签的“<”后面用“1”来表示结束。结束标签又称闭合标签。如下面示例的<component-name> 是开始标签</component-name> 是结束标签。
在开始标签和结束标签之间，称为组件内容，如下面示例的“content”开始标签上可以写属性，属性可以有多个，多个属性之间用空格分隔。如下面示例的propertyl和propcrty2。注意闭合标签上不能写属性。
每个属性通过“=”赋值。如下面的示例中，属性 property1 的值被设为字符串 value。

总体而言，uni-app是一款非常优秀的前端开发框架，它具备高效开发、跨平台能力强、兼容性好等诸多优点。当然也存在一些缺点，需要根据具体需求进行取舍。在实践中，我们可以充分利用uni-app的特点，灵活运用各种技巧和工具，提高开发的效率和质量。相信随着前端技术的不断发展，uni-app将会走得更远，并在移动应用开发领域发挥重要作用。