专栏首页web秀uni-app: 使用Vue.js需要注意哪些问题?

uni-app: 使用Vue.js需要注意哪些问题?

前言

uni-app 在发布到 H5 时,是支持所有 vue 的语法的。但是发布到App或者小程序时,由于各个平台等限制,无法实现全部 vue 语法,本文将详细讲解差异。

相比Web平台, Vue.jsuni-app 中使用差异主要集中在两个方面:

新增:uni-app除了支持Vue实例的生命周期,还支持应用启动、页面显示等生命周期

受限:相比web平台,在小程序和App端部分功能受限,具体见下。

生命周期

uni-app 在支持完整 Vue 实例的生命周期上,同时还新增 应用生命周期页面生命周期

详见Vue官方文档:生命周期钩子

应用生命周期包括下列函数

1、onLaunch 当uni-app 初始化完成时触发(全局只触发一次)

2、onShow 当 uni-app 启动,或从后台进入前台显示

3、onHide 当 uni-app 从前台进入后台

4、onUniNViewMessage 对 nvue 页面发送的数据进行监听

注意 (1)、应用生命周期仅可在App.vue中监听,在其它页面监听无效。

(2)、onlaunch里进行页面跳转,可能遇白屏报错,可以去官方查找解决方案。

页面生命周期

注意 (1)、onTabItemTap常用于点击当前tabitem,滚动或刷新当前页面。如果是点击不同的tabitem,一定会触发页面切换。

(2)、如果想在App端实现点击某个tabitem不跳转页面,不能使用onTabItemTap,可以使用plus.nativeObj.view放一个区块盖住原先的tabitem,并拦截点击事件。

(3)、onTabItemTap在App端,从HBuilderX 1.9 的自定义组件编译模式开始支持。

语法支持

支持的 vue 语法 1、支持过滤器 filter

2、支持比较复杂的 JavaScript 渲染表达式

3、支持在 template 内使用 methods 中的函数

4、支持 v-html (同 rich-text 的解析)

5、支持 v-slot 新语法

6、支持解构插槽 Prop 设置默认值

7、支持 slot 后备内容

8、组件支持原生事件绑定,如:@tap.native

不支持的 vue 语法 1、class不支持绑定Obejct变量(使用字符串的形式绑定)

2、不支持事件修饰符:prevent、passive(在App与小程序平台,使用stop修饰符,既可以阻止冒泡也能阻止默认行为)

3、不支持render、inline-template、X-Templates、keep-alive、transition

4、不支持使用 Vue.use 的方式注册全局组件(在main.js使用Vue.component的方式引入)

列表渲染

1、在H5平台 使用 v-for 循环整数时和其他平台存在差异,如 v-for="(ite`m, index) in 10" 中,在H5平台 item 从 1 开始,其他平台 item 从 0 开始,可使用第二个参数 index 来保持一致。

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运行在手机端,没有键盘事件,所以不支持按键修饰符。

命名限制

在 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>

第二种解决方式在某些组件可能造成抖动,推荐第一种解决方式。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 吐槽,Java 设计的槽点

    你是否曾经在面试的时候,经常被问到:数组有没有 length() 方法?字符串有没有 length() 方法? 集合有没有 length() 方法?

    一猿小讲
  • ASP.NET Core 中支持 AI 的生物识别安全

    本文共两个部分,这是第一部分,其中介绍了 ASP.NET Core 3 中旨在将授权逻辑与基本的用户角色相分离的基于策略的授权模型。此部分提供了此授权进程的基于...

    Edison.Ma
  • 受欢迎的五个开源可视化工具——你的选择是?

    人工智能时代,数据和算法以及硬件资源是非常重要的,相关行业的大公司也越来越关注数据中蕴含的价值,数据的收集和应用比以前任何时候都看得更加重要,甚至...

    用户3578099
  • 「微前端架构」微前端-Angular风格-第2部分

    在前一部分中,我讨论了转向MFE解决方案的动机以及解决方案相关的一些标准。在这一部分中,我将介绍我们如何在Outbrain实现它。

    首席架构师智库
  • AppBarLayout学习

    AppBarLayout是一个垂直的LinearLayout,实现了很多和协调布局一起合作的滚动属性。其子View可以通过setScrollFlags()或在x...

    用户1108631
  • JDK源码分析-Lock&Condition

    涉及多线程问题,往往绕不开「锁」。在 JDK 1.5 之前,Java 通过 synchronized 关键字来实现锁的功能,该方式是语法层面的,由 JVM 实现...

    o对酒当歌
  • JavaScript中科学计数法的问题

    JavaScript 中经常会碰到数值计算问题,偶尔会在不经意间报一个不是bug的bug。今天来说说一个特殊的例子。我以0.0011BTC 价格买入 0.000...

    用户2192970
  • JDK源码分析-CountDownLatch

    CountDownLatch 是并发包中的一个工具类,它的典型应用场景为:一个线程等待几个线程执行,待这几个线程结束后,该线程再继续执行。

    o对酒当歌
  • JDK源码分析-CyclicBarrier

    CyclicBarrier 是并发包中的一个工具类,它的典型应用场景为:几个线程执行完任务后,执行另一个线程(回调函数,可选),然后继续下一轮,如此往复。

    o对酒当歌
  • 经验分享一箩筐,从此再也不入坑

    多用户并发情况下,CPU 利用率长期为100%,DUMP 线程信息,发现 CPU 利用率高的线程都与 HashMap 操作相关。

    一猿小讲

扫码关注云+社区

领取腾讯云代金券