Uni-app的那些坑

前言


uni-app是hbuilder公司开发的新产品,实现使用vue的语法开发的代码,可以编译到H5、小程序、APP等多端,但是坑也很多,请大家避免。

Uni-app那些坑

[1]软件的坑


1.运行的时候动不动要重启
2.修改代码后不要等自动编译,尤其是小程序和app,先点击停止,再重新运行

[2]代码的坑


一.模板中的坑

说明使用vue模板开发的坑

1. v-for坑多

  • 关键字不能使用index,否则无法编译通过
1
2
3
4
5
6
错误案例
<view v-for="index in 6" :key=" index">
</view>
正确案例,避免使用index
<view v-for="i in 6" :key="i">
</view>
  • :key不能拼接字符串,否则原生(小程序)编译无法通过
1
2
3
4
5
6
错误案例
<view v-for="i in 6" :key=" 'item'+i">
</view>
正确案例,避免使用拼接
<view v-for="i in 6" :key="i">
</view>
  • v-for 禁止循环数字,如果有需要,请封装对象循环
1
小程序、APP、 H5循环无法保持统- -, H5从1开始循环, 小程序和APP从开始循环,太坑了,需要把循环主体改成对象去循环
  • 组件如果使用了slot,那调用的时候slot不能使用v-for ,仅H5支持,其他均不支持

2. 过滤器计算属性的坑

不支持部分复杂的 JavaScript 渲染表达式和过滤器
目前可以使用的有 + - * % ?: ! == === > < [] .

解决办法:在数据遍历回来的时候提前用computed计算属性

1
2
3
4
5
6
7
uni.request({
url: 'http://localhost:3000/apiList', //仅为示例,并非真实接口地址。
success: (res) => {
this.apiList = res.data
this.apiList.forEach(item => item.date = this.formatTime(item.date))
}
})
1
2
3
4
5
6
7
8
9
<!-- 这种就不支持,建议写 computed -->
<view>{{ message.split('').reverse().join('') }}</view>

<!-- 但写在 @event 里面的表达式是都支持的,因为这部分的计算放在了 vdom 里面 -->
<view>
<view v-for="(item, index) in list" :key="index">
<view @click="clickHandle(item, index, $event)">{{ item.value }}</view>
</view>
</view>

二、JS中的坑

1.组件不能使用onReady、onLoad等方法,请使用vue的mounted和created

2: uni-app中vuex使用的区别

uni-app中this.$store为undefind ,必须要在main.js中加入这行代码

1
Vue.prototype.$store = store

三、css中 的坑

在APP.vue中page 可以设置全局页面的样式,如果想在当个页面覆盖的话,直接另起一个style 加入page便可覆盖

四、注意事项

1
- 非`H5` 端,不能使用浏览器自带对象,比如 documentwindow、localstorage、cookie 等,更不能使用 jquery 等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象。没有这些浏览器自带对象并不影响业务开发,uni 提供的 api 足够完成业务。

五、 一些小tips

可自定义图标

1
官方提供的icon图标太少,可以去阿里矢量图那边自定义自己想要的icon

条件编译

在 C 语言中,通过 #ifdef、#ifndef 的方式,为 windows、mac 等不同 os 编译不同的代码 uni-app 参考这个思路,为 uni-app 提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现 。
条件编译是利用注释实现的,在不同语法里注释写法不一样,js使用 // 注释、css 使用 / 注释 /。

举个栗子:

1
2
3
4
5
6
7
8
9
// #ifdef  %PLATFORM%
平台特有的API实现
// #endif


// #ifndef H5
// 表示只有 h5 不使用这个 api
uni.createAnimation(OBJECT)
// #endif

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--  #ifdef  %PLATFORM% -->
平台特有的组件
<!-- #endif -->

<!-- #ifdef MP-WEIXIN -->
<!-- 只在小程序中生效 -->
<view>我是微信小程序</view>
<!-- #endif -->

<!-- #ifdef APP-PLUS -->
<!-- 只在 app 中生效 -->
<view>我是 app </view>
<!-- #endif -->
-------------本文结束感谢您的阅读-------------