uni-app开发注意事项

  • A+
所属分类:Web前端
摘要

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


关于vue

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

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

3、class 支持的语法:

<view :class="{ active: isActive }">111</view> <view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view> <view class="static" :class="[activeClass, errorClass]">333</view> <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view> <view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view> 

style 支持的语法:

<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view> <view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view> 

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

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

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

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

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

:key 的值以两种形式提供

  • 使用 v-for 循环 arrayitem 的某个 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@ 的方式绑定,请勿使用小程序端的bindcatch 进行事件绑定。

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,和<script type="text/x-template"> 字符串模版等,在非H5端不支持。

17、详细的非H5端不支持列表:

  • Slotscoped 暂时还没做支持)
  • 动态组件
  • 异步组件
  • inline-template
  • X-Templates
  • keep-alive
  • transition (可使用 animation 或 CSS 动画替代)
  • 老的非自定义组件编译模式不支持在组件引用时,在组件上定义 click 等原生事件、v-show(可用 v-if 代替)和 class style 等样式属性(例:<card class="class-name"> </card> 样式是不会生效的)。建议更新为自定义组件模式
  • 老的非自定义组件编译模式组件里使用 slot 嵌套的其他组件时不支持 v-for。建议更新为自定义组件模式

18、uni-app 内置了小程序的所有组件,比如: picker,map 等,需要注意的是原生组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成 @change="eventName"

19、Vue.component 的第一个参数必须是静态的字符串。

20、nvue页面暂不支持全局组件

21、在百度小程序中使用时,不要在 data 内使用 hidden ,可能会导致渲染错误

22、由于 onError 并不是完整意义的生命周期,所以只提供一个捕获错误的方法,在 app 的根组件上添加名为 onError 的回调函数即可

23、当重复设置某些属性为相同的值时,不会同步到view层。 例如:每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。 这和props的单向数据流特性有关,组件内部scroll-top的实际值改动后,其绑定的属性并不会一同变化。,可以通过监听scroll事件,记录组件内部变化的值,在设置新值之前先设置为记录的当前值

跨端开发注意事项

1、非H5端不支持*选择器;

2、body的元素选择器请改为page,同样,div和ul和li等改为view、span和font改为text、a改为navigator、img改为image...

3、非H5端默认并未启用 scoped,如需要隔离组件样式可以在 style 标签增加 scoped 属性,H5端为了隔离页面间的样式默认启用了 scoped

4、vue页面在App端,默认是被系统的webview渲染的(不是手机自带浏览器,是rom的webview),在较老的手机上,比如Android4.4、5.0或iOS8,很多css是不支持的,所以不要使用太新的css,会导致界面异常。

5、原生组件层级问题 H5没有原生组件概念问题,非H5端有原生组件并引发了原生组件层级高于前端组件的概念,要遮挡video、map等原生组件,请使用cover-view组件。

6、使用了非H5端不支持的API 小程序和App的js运行在jscore下而不是浏览器里,没有浏览器专用的js对象,比如document、xmlhttp、cookie、window、location、navigator、localstorage、websql、indexdb、webgl等对象。

7、不要在引用组件的地方在组件属性上直接写 style="xx",要在组件内部写样式

8、url(//alicdn.net)等路径,改为url(https://alicdn.net),因为在App端//是file协议

9、v-html在h5和app-vue(v3编译模式)均支持,但小程序不支持

10、在 uni-app 2.4.7 以前,H5端不支持微信小程序自定义组件,即wxcomponets下的组件,此时可能产生兼容问题。从 2.4.7 起,H5也支持微信自定义组件,不再存在这这方面兼容问题。

11、在微信小程序端,uni-app 将数据绑定功能委托给Vue,开发者需按Vue 2.0的写法实现数据绑定,不支持微信小程序的数据绑定写法,

12、非H5端,不能使用浏览器自带对象,比如document、window、localstorage、cookie等,更不能使用jquery等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象。

13、App端若要使用操作window、document的库,需要通过renderjs来实现。

14、uni-app的tag同小程序的tag,和HTML的tag不一样,比如div要改成view,span要改成text、a要改成navigator。

15、虽然大部分css样式在微信小程序和app中都可以支持,但推荐使用flex布局模型,这种布局更灵活高效且支持更多平台(比如nvue、快应用只支持flex布局)

16、单位方面,uni-app默认为rpx。这是一种可跨端的通用单位

17、每个要显示的页面,都要放到pages目录下,新建一个页面所在的目录,然后放同名目录的vue文件,比如project/pages/lista/lista.vue,并且在pages.json里配置。这与小程序的策略相同。

18、自定义组件,放到component目录

19、静态资源如图片,固定放到static目录下。这是webpack、mpvue的规则

20、H5 校验了更严格的 vue 语法,有些写法不规范会报警,比如: data 后面写对象会报警,必须写 function;不能修改 props 的值;组件最外层 template 节点下不允许包含多个节点等。

21、APP 和小程序的导航栏和 tabbar 均是原生控件,元素区域坐标是不包含原生导航栏和 tabbar 的;而 H5 里导航栏和 tabbar 是 div 模拟实现的,所以元素坐标会包含导航栏和tabbar的高度。为了优雅的解决多端高度定位问题,uni-app 新增了2个css变量:--window-top--window-bottom,这代表了页面的内容区域距离顶部和底部的距离。举个实例,如果你想在原生tabbar 上方悬浮一个菜单,之前写 bottom:0。这样的写法编译到 h5 后,这个菜单会和 tabbar 重叠,位于屏幕底部。而改为使用 bottom:var(--window-bottom),则不管在 app 下还是在h5下,这个菜单都是悬浮在 tabbar 上浮的。这就避免了写条件编译代码。当然仍然也可以使用 H5 的条件编译处理界面的不同。

22、CSS 內使用 vh 单位的时候注意 100vh 包含导航栏,使用时需要减去导航栏和 tabBar 高度,部分浏览器还包含浏览器操作栏高度,使用时请注意。

23、组件内(页面除外)不支持 onLoadonShow 等页面生命周期。

24、为避免和内置组件冲突,自定义组件请加上前缀(但不能是 u 和 uni)。比如可使用的自定义组件名称:my-viewm-inputwe-icon,例如不可使用的自定义组件名称:u-viewuni-input,如果已有项目使用了可能造成冲突的名称,请修改名称,另外微信小程序下自定义组件名称不能以 wx 开头。

25、小程序工具提示vendor.js过大,已经跳过es6向es5转换。这个转换问题本身不用理会,因为vendor.js已经是es5的了。

关于体积控制,参考如下:

  • 使用运行时代码压缩
    • HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
    • cli创建的项目可以在pacakge.json中添加参数--minimize,示例:"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"
  • 使用分包优化,关于分包优化的说明