uni-app开发注意事项

1、注意 如果使用老版的非自定义组件模式,即manifest中"usingComponents":false,部分模版语法不支持,但此模式已于2019年11月起下线。

2、data 必须声明为返回一个初始数据对象的函数;否则页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次数据。

3、class 支持的语法:

111222333444555

style 支持的语法:

666777

4、非H5端不支持 Vue官方文档:Class 与 Style 绑定 中的 classObject 和 styleObject 语法。

5、注意:以:style=""这样的方式设置px像素值,其值为实际像素,不会被编译器转换为相对单位。

此外还可以用 computed 方法生成 class 或者 style 字符串,插入到页面中

6、用在组件上非H5端暂不支持,在自定义组件上使用 Class 与 Style 绑定

7、如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如  中的输入内容, 的选中状态),需要使用 :key 来指定列表中项目的唯一的标识符。

:key 的值以两种形式提供

  • 使用 v-for 循环 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。

  • 使用 v-for 循环中 item 本身,这时需要 item 本身是一个唯一的字符串或者数字

当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

如不提供 :key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。

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

9、在非H5平台 循环对象时不支持第三个参数,如 v-for="(value, name, index) in object" 中,index 参数是不支持的。

10、为兼容各端,事件需使用 v-on 或 @ 的方式绑定,请勿使用小程序端的bind 和 catch 进行事件绑定。

11、事件修饰符

  • .stop:各平台均支持, 使用时会阻止事件冒泡,在非 H5 端同时也会阻止事件的默认行为

  • .prevent 仅在 H5 平台支持

  • .self:仅在 H5 平台支持

  • .once:仅在 H5 平台支持

  • .capture:仅在 H5 平台支持

  • .passive:仅在 H5 平台支持

12、若需要禁止蒙版下的页面滚动,可使用 @touchmove.stop.prevent="moveHandle",moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。

13、H5 的select 标签用 picker 组件进行代替

14、表单元素 radio 用 radio-group 组件进行代替

15、App端(vue页面V3编译模式)和H5端支持v-html,其他端不支持v-html。

16、uni-app只支持vue单文件组件(.vue 组件)。其他的诸如:动态组件,自定义 render,和

相关推荐

Web前端开发应该必备的编码原则

产品交流 manongba · 446浏览 · 2019-11-19 17:17:11
1评论
表情
Inputable 255 chars
网站,小程序,A
just now
不错,看看一下