开发注意事项

关于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 绑定 中的

classObject

和

styleObject

语法。

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

此外还可以用

computed

方法生成

class

或者

style

字符串，插入到页面中

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

Class

与

Style

绑定

7、如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如

<input>

中的输入内容，

<switch>

的选中状态），需要使用

: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

，和

<script type="text/x-template">

字符串模版等，在非H5端不支持。

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

• Slot

  （

  scoped

  暂时还没做支持）
• 动态组件
• 异步组件

• 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、组件内（页面除外）不支持

onLoad

、

onShow

等页面生命周期。

24、为避免和内置组件冲突，自定义组件请加上前缀（但不能是 u 和 uni）。比如可使用的自定义组件名称：

my-view

、

m-input

、

we-icon

，例如不可使用的自定义组件名称：

u-view

、

uni-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"

使用分包优化，关于分包优化的说明