单次应用程序介绍以及对其优势和缺点的理解。用于开发多终端兼容应用程序的更好解决方案:开发人员编写一组可以发布给iOS,Web(响应式)和各种小程序的代码(/////qq/qq///////// ),KUAI应用程序和其他平台,基本上所有常见的平台都可以兼容;开发经验仍然相对较好,并且通常可以在H5中进行开发。然后,在应用程序或M上进行调整后可以使用它;就个人而言,我认为与RN相比,开发体验更好,RN需要一直在真实的机器或模拟器上运行。如果不需要多末端兼容性或保留平台开发的任务,它仅用于平台的开发,最好使用相对成熟的技术。例如纯本地或iOS,性能必须更好。通常,H5的开发经验比使用UNI更好。跨终端并不意味着所有相应的终端需要进行测试和兼容,并且仍然需要处理一些问题,例如正式已知的跨终端预防措施;有时无法解决一些要点,并且可能需要许多额外的工作来应对它们。端到端兼容性,例如百度迷你计划不支持;将应用程序转换为微信迷你计划的一些经验;其他第三方SDK仅兼容或与iOS兼容,根本不考虑Uni-App的情况。目前,您必须努力工作才能兼容处理,需要本机混合编码,这对纯前端不太友好,并且可能仍需要本机应用程序开发才能运行;从VUE的过渡非常低成本,不涉及太多额外的学习成本:Uni基于通用前端技术堆栈使用VUE语法 +微信 API,没有额外的学习成本;要使用Uni开发应用程序,您可以直接跳过WEEX的学习;对于本地应用程序,有时您需要使用IT NVUE技术;这里的语法差异不是很大。通常,可以将.vue组件直接修改为.nvue。 NVUE是补充Uni的WEEX;但是它只能与应用程序兼容,其他平台需要添加其他组件进行处理,这将增加维护成本;与CLI兼容的解决方案:在此处打开压缩将增加编译时间。有时,如果未打开压缩,则可能不会提交小程序;使用C LI模式与开发一般VUE项目的过程和配置没有太大不同;在CLI模式下,无法云包装应用程序。有条件的汇编用于处理组件中的不同平台逻辑:过多的条件汇编代码将导致代码看起来非常肿;这也将导致代码稍微更改,并且有必要同时测试代码的多个终端。很多时候有些错误是无法预测的。目前,编写多个组件比将它们混合在一起要好。组件和组软件库:正式提供的组件分为内置组件和扩展组件(UNI-UI);内置组件直接使用;需要引入扩展组件,并且所使用的示例参考项目与常规插件使用量一致。第三方库的质量不是很高。插电式市场中有许多提交和重复的轮子。找到合适的组件通常不是很方便。在知道要使用的是哪一个之前,您可能必须对其进行几次测试;开放的生态学,但不是开源代码:有时无法解决某些问题,并且无法看到一些基本的处理逻辑,这会给开发项目带来一些不确定性;仍然有很多问题要解决,其中一些问题已经无人看管了很长时间。随着用户数量的增加,增加,云包装应用程序的时间将急剧增加:过去大约是1-2分钟,现在通常是 +,过去云包装确实很方便。与使用诸如一键包装之类的工具相比,配置和使用本地包装仍然很麻烦。
生成资源软件包将有一个额外的步骤,还需要手动复制到目标文件夹,这相对繁琐。 Uni-App开发微信系列和应用程序经验渲染层接口供渲染; WXSS可以在视图层中独立运行,而无需逻辑层。重新渲染机制,WXSS节点越少,嵌套较少,呈现效率越高;节点的数量应小于1,000,并且层的数量应小于30;逻辑层使用线程运行JS脚本;在原理的帮助下,使用编译的语言(例如C,GO等)来替换解释的语言(运行时)JS,从而改善了性能;图层,用于上述两个通信;一个小程序具有多个接口,因此渲染层中有多个线程。这两个线程之间的通信将通过微信客户端中继,逻辑层也将转发通过它发送的网络请求。逻辑层需要处理数据并将将数据调用到渲染层;传递的数据不能超过,否则将冻结;经常通话也会引起明显的冻结;由于数据差异的智能处理,使用Uni-App开发的微信系数比大多数人的本机手写要好。迷你程序的性能非常好。
只有在所有逻辑层和视图层代码都被注入并且时间点对齐之后,第一屏幕渲染的第三阶段才会开始。渲染接口后,页面实例将接收回调,您可以在此回调中处理逻辑。
迷你程序和普通的Web开发之间的区别在于,Web开发渲染线程和脚本线程是相互排斥的,这就是为什么长期脚本运行可能会导致页面失去响应的原因。在迷你程序中,两者分开并单独运行。在不同的线程中;逻辑层在其中运行,并且没有完整的浏览器对象,因此缺少相关的DOM API和BOM API。 **这种差异导致一些在前端开发(例如等)中非常熟悉的库,无法在小程序中运行。 **同时,环境与环境不同,因此某些NPM软件包不能在小程序中运行。迷你程序的经验和用户粘性比H5更好。 H5的许可问题和更新比迷你计划更方便。 MINI程序操作机制前后:前景:接口显示给用户;背景:Mini程序可以在短时间内运行,但是某些API的使用将受到限制。启动方法:冷启动。如果用户首次打开MINI程序,或者被用户在被销毁后再次打开,则需要重新加载Mini程序,即冷启动:App启动生命周期是之前的。使用骨架屏幕技术可以改善显示屏。效率;页面生命周期,在迷你程序中注册页面。接受类型参数,该参数指定页面的初始数据,生命周期回调,事件处理功能等。热门开始,如果用户打开了一个小程序,然后在一定时间内再次打开小程序,则此时将无法打开小程序。被摧毁,它只是从背景状态进入前景状态。这个过程是一个热门的开始:在这段时间内,它再次进入前景。切换到背景5秒钟后将被暂停:微信将阻止Mini程序JS执行。目前,将保留迷你程序的内存状态,但是开发人员的代码执行将停止,事件和接口回调将在Mini程序再次进入“前景”时触发;当开发人员使用背景音乐播放,使用位置时的背景地理和其他功能时,Mini程序可以继续在“背景”中运行,将不会进入“悬挂”状态;暂停后将被销毁,重新启动是一个寒冷的开始:如果用户长时间没有使用Mini程序,或者系统资源紧张,那么Mini程序将被“销毁”,也就是说,它将完全终止其操作;每当可能会破坏小程序时,页面回调函数将被调用。
如果要将状态保留在页面中,则可以在此回调函数中“保存”一些数据,并且下次启动它时可以获得保存的数据。重新启动策略:配置项目可以更改此默认行为,以便从某个页面退出后,班级的下一个冷启动场景可以返回到此页面。路由和页面跳跃Uni。():保留当前页面,跳到应用程序中的某个页面,使用Uni。返回原始页面; Uni。():关闭当前页面,跳到应用程序页面中的某个页面; uni。():关闭所有页面并向应用程序中的某个页面打开; Uni。():跳到页面并关闭所有其他非页面。 uni。():关闭当前页面,然后返回到上面的页面或多级页面。可以通过()获得当前页面堆栈,以确定需要返回多少层; Uni。():预加载页面是一种性能优化技术。打开时,预加载页面更快。与// test/test相对应的JS文件已预加载,并且未执行页面预订阅逻辑。
uni.preloadPage({ url: '/pages/test/test' }); // 预加载 /pages/test/test 页面(仅触发onLoad,onReady) uni.navigateTo({ url: '/pages/test/test' }); // url匹配,跳转预加载页面(仅触发onShow) uni.navigateTo({ url: '/pages/test/test?a=b' }); // url不匹配,正常打开新页面
在访问图片等目录之前,需要将一些静态资源放在目录中;目录中的所有资源都将包装,因此发布时必须删除不必要的资源;目录中的JS文件将不会编译。如果其中有ES6代码,并且直接运行而无需转换,则将在移动设备上报告错误;诸如CSS,SILE/SCSS等资源也不应放置在目录中。建议将这些公共资源放置在目录中。同样的事情是,uni是由Weex补充的; Uni-App App Side具有基于WEEX的内置本机渲染引擎,提供了本机渲染功能。在应用程序侧,如果使用VUE页面,请使用渲染;如果使用nvue页面(vue(缩写),则使用本机渲染。可以同时在应用中使用两个页面。例如,主页使用nvue,第二级页面使用vue。这是示例nvue也可以进行多重编译,而NVUE的CSS写作方法是有限的。 WEEX的最大问题是,这只是一个没有足够的API功能的高性能渲染器(例如各种推动SDK集成,蓝牙和其他功能呼叫),使开发非常依赖于原始工程师的协作。 ,但最终需要前端,iOS和3组需要发展的人,这是适得其反的; 。
这些合并的解决方案有助于开发人员有效提高效率并降低成本。 RPX():可以根据屏幕宽度进行调整。指定屏幕宽度为。如上所述,屏幕宽度总计为750个物理像素,然后= = 750个物理像素,1RPX = 0.5px = 1物理像素; 1RPX = 0.42px 1px =2。1RPX= 0.5px 1px = plus 1rpx =0。1px= 1。因此,在这里和rem一个含义是,如果您控制宽度和高度,则可以使用它。页面的宽度是固定的,但不要将其用于字体大小。直接使用PX(否则字体大小将更改);但是问题并不大;注意:较小的屏幕上不可避免地会有一些故障。在开发时,请尽量避免这种情况;请注意,RPX是与宽度相关的单位。屏幕越宽,实际像素值越大。如果您不想根据屏幕宽度进行扩展,则应使用PX单元;这里的含义类似于H5中开发的REM。字体控制仍然必须使用绝对PX,否则页面宽度将增加,字体将变得非常大,从而影响UI效果。
为了理解编译为多端代码的单层编译器;编译器在计算机开发环境中运行。它通常内置在工具中,或者可以使用独立的CLI版本。开发人员根据Uni-App规格编写代码,编译器编译开发人员的代码以生成每个平台支持的唯一代码;在微信中的Mini 上,编译器将.VUE文件拆分以生成WXML,WXSS,JS和其他代码;语法分析,转化为与平台相对应的代码规范,例如小程序(WXML,WXSS,JSON),H5不需要直接更改,应用程序的WEEX语法等。相应的配置文件将转移到相应的配置文件项,例如在应用程序下的Mini程序下; ();不是在计算机开发环境中运行,而是在实际终端上运行。在迷你程序方面,Uni-App主要是VUE的迷你程序版本。页面路由,组件,API等基本上是逃脱的。 Uni-App包括3个部分:基本框架,组件和API。在迷你程序方面,Uni-App的基本组件将直接转换为Mini程序自己的内置组件。它在迷你计划中没有占据任何空间。换句话说,使用Uni-App的标准API,可以跨终端使用。但是,对于非跨端的零件,您仍然可以称呼最终的专有API。
由于在日常开发过程中已封装并内置了常见的API,因此开发人员只需要专注于UNI标准API,并在需要调用特殊最终功能时以条件编译编写特殊的API调用代码。逻辑层和渲染层的分离:在Web平台上,逻辑层(JS)和渲染层(HTML,CSS)都在统一的环境中运行;但是在迷你程序和应用程序方面,逻辑层和渲染层分开;分开的核心原因是性能。过去,许多开发人员抱怨基于它们的应用程序的性能不佳。主要原因是JS计算和接口渲染竞争资源引起的滞后。迷你程序|嵌入H5在App Mini程序中的优势和缺点是本地的,可以将其与应用程序结束:优势:良好的经验和快速的速度;缺点:不灵活,需要打包以进行审查,包装的大小将逐渐增加;现有H5的问题:转变为小程序的所有成本都太高;小程序 + H5:优点:灵活,相对较小的工作量;缺点:互动,高沟通成本;现有H5:和应用功能耦合的问题是严重的;多末端汇编,例如从头开始的芋头/Uni-App开发;优点:多终端操作,多末端性能是可以的;缺点:API兼容性成本很高,将做出许多判断,并且会有很多代码;编译的结果不是特殊的理性,首先,性能尚未达到理想状态,其次,API用于多末端兼容性的次级转换成本很高。库存H5的问题:与应用功能的严重耦合。
Uni-App开发小程序优化图层主要优化技能骨架屏幕+:需要将其放置在页面上。直到数据加载完成为止;特定的骨架屏幕文档: /...;通常仅在第一页上使用,请勿过度使用骨架屏幕;优化长列表页面,向下滑动至无限加载(滑动窗口):-View/-Item组件,适用于呈现长列表,仅显示可以看到的内容;设置顶部属性并动态支持它;使用页面容器: /...; “假页”容器组件,效果类似于弹出层,当内存在容器中时,用户执行返回操作时,容器将关闭,而无需关闭页面。重新渲染和自定义组件优化;减少呼叫和合并的数量;将经常更改的数据封装成单独的组件,同时删除一些不必要的数据设置,以减少每次传递的数据量;使用缓存接口数据。包装,优化和子包装;压缩;树-。第一个屏幕和逻辑层代码优化技能代码按需注入和初始渲染缓存;按需注入,仅渲染第一个屏幕所需的代码; “”:“”;静态/动态初始渲染缓存=静态局部骨架屏幕;“:”;,是一种性能优化技术。打开时预加载的页面更快。使用独立的子包装和分包 :: 配置,此配置是加载Mini程序的机制;在配置后,输入Mini程序的某个页面时,框架将自动预先载荷以改善启动速度时,以提高启动速度。自定义组件的替补;在进入后台之后,将不再使用它,并根据开发工具的提示进行优化。
使用微信开发人员工具分析迷你程序并进行相应的调整:
代码依赖性分析;绩效报告;代码质量扫描;调试区域面板;经验得分;控制板;查看何时静止,如果内存仍然很大,则可能会有内存泄漏; JS面板。要处理Uni-App中的一些常见问题,您可以以以下方式实现全局变量,请在本地存储配置文件并安装VUE。这不是动态响应,需要在页面的生命周期中定义。值对的定义需要在应用中。表演().. =“诗歌”。设置此。 =()..;获取Vuex,这个Vue是普遍的。 uni.scs的问题是,Uni.scss将被编译到每个SCSS文件中,并注入所有文件。如果您随意添加页面,它将变得很大。这确实是一个大坑。每个页面和每个组件的SCSS文件都将其扩展到数十个KB;最初,仅一旦将样式反复注入到每个样式文件中,只需要在全球范围内被引用。这和VUE之间的区别在于,小程序没有全局变量。因此,当不需要Uni.scs中的变量时,请尝试减小该文件的大小;页面在本地滚动时,您需要获得此块的高度
getScrollViewHeight() { const that = this; const screenHeight = uni.getSystemInfoSync().windowHeight; const query = wx.createSelectorQuery(); query.select('.patients').boundingClientRect(); query.selectViewport().scrollOffset(); query.exec(function(res) { // res[0].top // #the-id节点的上边界坐标 // res[1].scrollTop // 显示区域的竖直滚动位置 that.scrollViewHeight = res[0].height - 60 + 'px'; console.log('getScrollViewHeight2', that.scrollViewHeight, res); }); console.log('getScrollViewHeight', screenHeight); }
这里的策略是首先为滚动元素设置一个相对较小的值,然后计算父元素的自适应高度,然后根据此高度计算滚动元素的实际可控高度。
选项卡之后刷新页面
参考操作方法。
uni.switchTab({ url: '/pages/home/index', success() { let page = getCurrentPages().pop(); // 跳转页面成功之后 if (!page) return; page.onLoad(); // 如果页面存在,则重新刷新页面 }, });
如何与Web视图共享迷你程序?迷你程序和网络视图无法共享;迷你程序中嵌入的页面与打开的官方帐户页面共享,因此会有问题;共享了Mini程序中的Web视图和Web视图。直接在微信中打开的H5使用相同的浏览器核心,因此可以共享它们。因此,当您重新输入页面时,您需要重置它; .json应用程序配置。json文件是应用程序的配置文件,用于指定应用程序的名称,图标,权限等;在不同的平台上,将提取它以生成不同的文件。在微信小程序下,其中大多数是在..Json下提取的;在该应用程序下,将大多数提取到.xml提取;其他一些问题
请参阅我的上一篇文章;
总而言之,使用Uni-App来开发小程序更合适,并且学习成本也很低。使用Uni-App的开发成本也相对较低,这更适合那些没有非常丰富发展资源并提供一些可能的未来机会的公司。已经预订了终端开发;使用Uni-App简单开发应用程序的经验不是很好,并且将体验效果与应用程序的本地开发进行了比较。发展也更糟。应用程序和迷你程序之间存在许多差异。如果您想同时与两端兼容,则最好使用公共分支来开发基本版本,然后将其单独打包,以避免将Mini程序和应用分支相互合并;提前分包合同,通常将公共零件和选项卡页面放在主包中,其他子模块被分包。请参阅文档Uni-App;组件项目示例,Uni-App微信系页部分滚动,下拉刷新和底部加载Uni-App Uni-App选择评估23个问题
以上只是我的个人意见,请给我一些建议,这是我的个人博客。