uniapp从0到1开发指南, 跨平台开发新手必看

发布时间:2022-01-28 23:19:47 作者:King 来源:本站 浏览量(1268) 点赞(114)
摘要:历史Uniapp从诞生到现在,经历了三次重大变化,首先是最初的参考Mpvue模板语法(非自定义组件模式)是性能最差和支持的模板语法Vue有很多缺乏语法的版本缺乏的版本。Uniapp开发APP不能满足企业的需求,但做一个小程序开发框架很好。在2018-2019年这段时间,即uniapp这是模板编译模式的时代。uniapp也

  历史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在相关生态中会找到一些业务组件插件。


微信

扫一扫,关注我们

感兴趣吗?

欢迎联系我们,我们愿意为您解答任何有关网站疑难问题!

【如有开发需求】那就联系我们吧

搜索千万次不如咨询1次

承接:网站建设,手机网站,响应式网站,小程序开发,原生android开发等业务

立即咨询 16605125102