前言

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

Uni-app那些坑

[1]软件的坑

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

[2]代码的坑

一.模板中的坑

说明使用vue模板开发的坑

1. v-for坑多

关键字不能使用index,否则无法编译通过

错误案例
<view v-for="index in 6" :key=" index">
</view>
正确案例，避免使用index
<view v-for="i in 6" :key="i">
</view>

:key不能拼接字符串，否则原生(小程序)编译无法通过

错误案例
<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计算属性

uni.request({
        url: 'http://localhost:3000/apiList', //仅为示例，并非真实接口地址。
        success: (res) => {
            this.apiList = res.data
            this.apiList.forEach(item => item.date = this.formatTime(item.date))
        }
    })

<!-- 这种就不支持，建议写 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便可覆盖

四、注意事项

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

五、一些小`tips`

可自定义图标

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

条件编译

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

举个栗子:

// #ifdef  %PLATFORM%
平台特有的API实现
// #endif


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

<!--  #ifdef  %PLATFORM% -->
平台特有的组件
<!--  #endif -->

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

<!--  #ifdef  APP-PLUS -->
<!--  只在 app 中生效 -->
<view> 我是 app </view>
<!--  #endif -->

前言