uniapp项目 uniapp反编译?很多人不了解,今天趣百科为大家带来相关内容,下面小编为大家整理介绍。
点击右上方红色按钮,关注“网络秀”,让你真正露脸。
Uni-app在发布到H5时支持所有vue语法。但发布到App或小程序时,由于各种平台的限制,无法实现所有的vue语法。本文将详细解释这些差异。
与Web平台相比,在uni-app中使用Vue.js区别主要集中在两个方面:
新增:uni-app不仅支持Vue实例的生命周期,还支持应用启动和页面显示的生命周期。
有限:相对于web平台,小程序和App的功能有限,如下图。
Uni-app不仅支持完整Vue实例的生命周期,还增加了应用生命周期和页面生命周期。
应用程序生命周期包括以下功能
1.当uni-app初始化完成时触发onLaunch(仅全局触发一次)
2.onShow当uni-app启动,或者从后台进入前台显示时。
3.当uni-app从前台进入后台时onHide
4.onUniNViewMessage监控nvue页面发送的数据。
注意
(1)应用生命周期只能在App.vue中监控,其他页面无法监控。
(2)在onlaunch跳转到页面的话去官网找解决方案,可能会遇到白屏错误。
页面生命周期
注意
(1) onTabItemTap常用于点击当前选项卡,滚动或刷新当前页面。如果你点击一个不同的标签,它肯定会触发页面切换。
(2)如果想在App端点击一个tabititem而不跳转到页面,又不能使用onTabItemTap,可以使用plus.nativeObj.view放一个块覆盖原来的tabititem,拦截点击事件。
(3) onTabItemTap在App端,从HBuilderx1.9的自定义组件编译模式支持。
支持的 vue 语法
1.支持过滤器过滤器
2.支持复杂的JavaScript渲染表达式。
3.支持在模板内的方法中使用函数。
4.支持v-html(与富文本解析相同)
5.支持v-slot的新语法
6.支持解构槽道具设置默认值。
7.支持插槽备份内容
8.组件支持原生事件绑定,比如@ tap.native。
不支持的 vue 语法
1.类不支持绑定Obejct变量(字符串形式的绑定)
2.不支持事件修饰符:防止和被动(在App和applet平台上,停止修饰符可以防止冒泡和默认行为)
3.不支持渲染、内嵌模板、X模板、保持活动和过渡。
4.不支持使用Vue.use注册全局组件(在main.js中使用Vue.component引入)
1.H5平台在使用v-for循环整数时和其他平台有区别,比如v-for='(ite`m,index) in 10 '。在H5平台中,该项目从1开始,而在其他平台中,可以使用第二个参数索引来保持不变。
2.在非H5平台上循环对象时不支持第三个参数,如V-for=' (value,name,index) in object ',也不支持index参数。
几乎完全支持事件处理程序。
/
/ 事件映射表,左侧为 WEB 事件,右侧为 ``uni-app`` 对应事件{ click: 'tap', touchstart: 'touchstart', touchmove: 'touchmove', touchcancel: 'touchcancel', touchend: 'touchend', tap: 'tap', longtap: 'longtap', input: 'input', change: 'change', submit: 'submit', blur: 'blur', focus: 'focus', reset: 'reset', confirm: 'confirm', columnchange: 'columnchange', linechange: 'linechange', error: 'error', scrolltoupper: 'scrolltoupper', scrolltolower: 'scrolltolower', scroll: 'scroll'}注意:1、为兼容各端,事件需使用 v-on 或 @ 的方式绑定,请勿使用小程序端的bind 和 catch 进行事件绑定。
2、事件修饰符
.stop:各平台均支持, 使用时会阻止事件冒泡,在非 H5 端同时也会阻止事件的默认行为
.prevent 仅在 H5 平台支持
.self:仅在 H5 平台支持
.once:仅在 H5 平台支持
.capture:仅在 H5 平台支持
.passive:仅在 H5 平台支持
3、若需要禁止蒙版下的页面滚动,可使用 @touchmove.stop.prevent="moveHandle",moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。
<view class="mask" @touchmove.stop.prevent="moveHandle"></view>4、按键修饰符:uni-app运行在手机端,没有键盘事件,所以不支持按键修饰符。
a, canvas, cell, content, countdown, datepicker, div, element, embed, header, image, img, indicator, input, link, list, loading-indicator, loading, marquee, meta, refresh, richtext, script, scrollable, scroller, select, slider-neighbor, slider, slot, span, spinner, style, svg, switch, tabbar, tabheader, template, text, textarea, timepicker, trisition-group, trisition, video, view, web
除以上列表中的名称外,标准的 HTML 及 SVG 标签名也不能作为组件名。
1、如何获取上个页面传递的数据
在 onLoad 里得到,onLoad 的参数是其他页面打开当前页面所传递的数据。
2、如何捕获 app 的 onError
由于 onError 并不是完整意义的生命周期,所以只提供一个捕获错误的方法,在 app 的根组件上添加名为 onError 的回调函数即可。如下:
export default { // 只有 app 才会有 onLaunch 的生命周期 onLaunch () { // ... }, // 捕获 app error onError (err) { console.log(err) }}3、组件属性设置不生效解决办法
当重复设置某些属性为相同的值时,不会同步到view层。 例如:每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。 这和props的单向数据流特性有关,组件内部scroll-top的实际值改动后,其绑定的属性并不会一同变化。
解决办法有两种(以scroll-view组件为例):
(1)、监听scroll事件,记录组件内部变化的值,在设置新值之前先设置为记录的当前值
<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll"><script>export default { data() { return { scrollTop: 0, old: { scrollTop: 0 } } }, methods: { scroll: function(e) { this.old.scrollTop = e.detail.scrollTop }, goTop: function(e) { this.scrollTop = this.old.scrollTop this.$nextTick(function() { this.scrollTop = 0 }); } }}</script>(2)、监听scroll事件,获取组件内部变化的值,实时更新其绑定值
<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll"><script>export default { data() { return { scrollTop: 0, } }, methods: { scroll: function(e) { this.scrollTop = e.detail.scrollTop }, goTop: function(e) { this.scrollTop = 0 } }}</script>第二种解决方式在某些组件可能造成抖动,推荐第一种解决方式。
喜欢小编或者觉得小编文章对你有帮助的,可以点击一波关注哦!同时,要源码的小伙伴可以点击下方“了解更多”。
最后推荐一个专栏文章,感谢小伙伴们多多支持,谢谢大家!
【相关文章】
★ 山东农村全部拆迁吗_农村5年内全部拆迁吗_主要涉及六种村庄
★ 花呗用不了是怎么回事_花呗无法使用是什么原因_主要是6个原因
本文地址:https://www.qubaike.com/hotnews/dsrint3u.html
声明:本文信息为网友自行发布旨在分享与大家阅读学习,文中的观点和立场与本站无关,如对文中内容有异议请联系处理。