历史Uniapp从诞生到现在，经历了三次重大变化，首先是最初的参考Mpvue模板语法(非自定义组件模式)是性能最差和支持的模板语法Vue有很多缺乏语法的版本缺乏的版本。Uniapp开发APP不能满足企业的需求，但做一个小程序开发框架很好。

  在2018-2019年这段时间，即uniapp这是模板编译模式的时代。uniapp也褒贬不一，社区的完善和官方的完善UI支持很落后，唯一吹的就是QQ当时群很火，官方的回答和处理BUG还是很快。我个人认为web前端跨平台框架有很多原生安卓&IOS开发人员的排斥，取生成的代码质量和性能，也许他们没有使用过。

  在我接触uniapp不久之后(大约几个月)，自定义组件模式出现，相当于革命性的更新，支持用户编写Vue基于此，将组件转换为微信小程序的自定义组件uniapp放置在安卓平台上JS Core，从这个时候开始uniapp由于跨平台开发的好处太大，越来越多的本土开发者开始慢慢接受。

  然后接下来的更新让我目瞪口呆，因为我没有在19年底从事uniapp直到今年才继续发展uniapp，发现了uniapp重大更新:v3引擎”。

  V3发动机也是如此Dcloud我认为自主研究的主要更新是安卓和IOS我们可以开始关注启动速度和包体积V3更新说明中看到。

  到目前为止，我想uniapp现在应该是推广的时候了，让前端开发人员乘坐跨平台开发的汽车。

  踩坑经验(框架部分)

  首先，uniapp大部分官网描述API，例如，设备信息、内存、蓝牙等都比较常用，uniapp的优点就体现出来了，不同平台的各种API会有轻微的差异，所以要仔细看文档。

  假如文档已经说明了这一点API有平台差异，要注意API这可能发生在下面【tips】

  这也是文档的一个小坑。如果许多新手不仔细阅读文档，他们正在调整API小程序/APP比如安卓和ios如果你仔细阅读文档，99%以上的问题都会出现tips中说明。

  注释魔法：条件编译

  其次uniapp还有一个非常强大的功能条件编译，这在开发中也是一个非常常用的功能所示，我们可以使用它C注释中的代码片段将出现在指定的平台上，反之亦然；

<!-- #ifdef APP-PLUS -->代码片段，APP-PLUS代表着APP端，ifdef包含，ifndef不包含，多个平台可以用空格隔开  <!-- #endif --><!-- #ifndef APP-PLUS-NVUE APP-NVUE MP -->编译多个平台<!-- #endif -->

  任何地方都可以存在条件编译，template css js；同样uniapp支持更强大的条件编译：例如，支持page.json判断，实现不同端不同的分包功能；通过条件编译，还可以编译静态资源static下构建platform目录可以在不同的平台上编译不同的静态资源；然后也可以编译页面条件，即不同的平台和页面；

  onLoad&onShow

  我们已经明白了uniapp有特色的条件编译后，我们可以理解uniapp必不可少的生命周期，uniapp支持当前版本vue所有的生命周期和绝大多数API；比较重要的nextTick和compile不支持，组件选项更重要render函数不支持，请移动官网查看更多支持特征表( >uniapp.dcloud.io/use?id=vue以下是开发中常用的生命周期和应用场景：

onLoad(e){  / 组件渲染未完成但已创建的钩子Vue的create同样，这里推荐使用onLoad代替create  // 行参e例如，当前路径的参数可以获得，当前页面是b，如果a跳转到b页面是如下url：  ////////pages/index/a?type=1}onShow(){  / 监控:当页面显示在屏幕上时，从APP应用后台到APP前台还会触发  / 通常我们可以用这个钩子刷新一些非列表页面的数据(比如从上一页返回，然后刷新)}

  触底加载&下拉加载实践

  APP有一个非常常见的场景叫触底加载，所以针对APP页面级滚动触底回调是onReachBottom

onReachBottom(){  / 在这里添加1  this.listConfig.nowPage   ；  / 调用加载列表的方法this.initList();}methods: {  async initList(){     const toList = await getALLTodoList({      limit: this.listConfig.pageSize,     offset: (this.listConfig.nowPage - 1) * this.listConfig.pageSize),   }

  然后下拉加载这个功能APP我们需要它page.json相应的节点style打开下拉加载

"enablePullDownRefresh": true

  那么相应页面的监控钩就会触发

onPullDownRefresh(){  / 用户下拉页面}

  【注意事项】无论是底部加载还是下拉刷新，这个例子都是针对页面级别的。如果你不知道什么是页面级别，请耐心阅读uniapp组件相关内容，在uniapp有一个组件<scroll-view>，它提供了一个滚动视图，它有自己的下拉加载和底部加载方法。因此，如果该组件存在于页面中，开发人员应妥善处理组件级滚动和页面级滚动，这是非常重要的。

  在开发中，我们经常有一些列表场景，所以在uniapp我们不应该使用中处理长列表scroll-view组件级滚动应采用页面级滚动，使性能更好

  ；

  如何操作DOM？

  我们通常在开发Vue在应用程序中，很少直接操作DOM，在uniapp中没有暴漏DOM这个概念，但我们可以指定API去操作DOM，虽然这是非常不推荐的，但在某些业务场景中不得不说

  非常方便；

let tabInfo = uni.createSelectorQuery().select("#tab");tabInfo.boundingClientRect((data) =>目标区域的信息{  / ).exec();

  文件的选择

  uniapp文件的选择非常丰富。例如，我们可以在文档中清楚地查询相应的图片API，通过封装的API我们可以通过配置参数chooseImage，然后拿到临时路径继续上传；

uni.chooseImage({    count: 6///默认9    sizeType: ['original','compressed'],//可以指定是原图还是压缩图，默认二者都有    sourceType: ['album'，//从相册中选择     success: function (res)       res.tempFilePaths       uni.uploadFile({            url: '',//仅为示例，非真实的接口地址            filePath: tempFilePaths[0]          name: 'file  formData:            user': 'test           success: (uploadFileRes) =>                    console.log(uploadFileRes.data);           }

  关键是我们上传图片很简单，但是上传文件很难。如果我们在那里APP端要想做上传文件的功能，就要尽量使用html的帮助，由html的input type=“file要做上传，首先要简单了解使用情况html如何上传文件。

  1. 首先，我们需要使用它h5 API中的webview相关的API

let wv = plus.webview.create("","/hybrid/html/index.html",{  'uni-app': 'none不加载uni-app渲染层框架，避免风格冲突  top: 0, height: background: 'transparent'  },{    url,   header,   key: name,   ...formData, });wv.loadURL("/hybrid/html/index.html"); / 加载本地html文件currentWebview.append(wv); // 把html添加到当前页面

  把本地的HTML加载到APP上面之后，我们在当地写的HTML在文件中引入对应uni.webview文件和所需业务JS文件，我们在HTML(核心代码)

<script type="text/javascript" src="#34;></script><script src="js/h5-uploader.js" type="text/javascript" charset="utf-8"></script>

  我们在当地编写的业务JS

xhr.onreadystatechange = (ev) =>    if(xhr.readyState == 4)      if (xhr.status == 200)        progress.innerText =         / 从这里可以看出，上传成功后，我们通过改变html的title将信息返回到        title.innerText = `${file.name}|^$%^|${src}|^$%^|${suffix}`;      else        progress.innerText = '上传失败了';      setTimeout(()=>{          tis.style.display = 'none上传成功       / webview       plus.webview.currentWebview().close()；     }，1000)；  }xhr.send(formData);

  当index.html的title变化后，在vue组件创建webview在代码之后，我们可以在当前webview监控标题的变化。

// wv就是plus.webview.create以上代码为例wv.addEventListener('titleUpdate({  title}) => {  console.log(title)}

  那vue组件获取回调信息后，可以正常获取页面渲染的图片信息。

  顺便说一句，在文档的后面，我会介绍给你uniapp在相关生态中会找到一些业务组件插件。