uni-app踩坑之旅

这里总结的踩坑记录大部分都是app端的兼容问题，H5端基本都不会出现，小程序端还没尝试，后续增加。如有错误，欢迎指正

一、环境类

1、h5环境下vue.config.js中的proxyTable生效，在app端和小程序端不生效

在封装的request请求中，baseUrl的值在H5环境下时根据生产环境域名来，而app和小程序需要手动配置

let baseUrl='';
const NODE_ENV=process.env.NODE_ENV;
//#ifdef H5 h5按照生产环境和开发环境
baseUrl=NODE_ENV === 'production' ? '/' : '/dev/';
//#endif

//#ifndef H5  非h5环境，手动配置
baseUrl='http://ztdoc.wisedu.com/';
//#endif

二、组件类

1、修改组件默认样式

使用 /deep/ 深度选择器

<style lang="scss">
    /deep/ .uni-navbar__header-btns-left {
        .uni-icons{
            color:#fff !important;
        }
    }
</style>

2、修改uni-page-body等页面样式

page{
    height: 100%;
}

注：在app端暂未生效

3、uni-list-item 显示右箭头，需要加上link，show-arrow不生效

使用uni-ui的list组件时，必须在uni-list-item上加上link属性才能显示出来右侧的箭头，文档中的提示的show-arrow并不生效

<uni-list-item title="标题文字" link ></uni-list-item>

5、绑定class时不能使用函数返回

<view :class="dealClass()"></view>

当使用上述方式动态返回class时，在app端会报错不能使用此种方式

6、标签中使用{{}}模板语法渲染textarea文本会换行，换用v-text

7、测试环境v-for的key值重复会报错 can’t find property ‘key’ of undefined

• HBuilderX版本：3.0.5
• uni-h5：^2.0.0-29820201110001
• vue：^2.6.12
• 操作步骤：onShow获取列表数据 ——> 点击数据进入子页面，业务处理，返回上一页（后端会将当前数据筛除）——> onShow获取列表数据（报错）

三、API类

1、uni.showActionSheet的取消按钮无法修改

uni.showActionSheet的取消按钮文字无法修改，也不能实现国际化

2、uni.showToast在路由跳转后自动消失

当使用uni.showToast时，不论设置的duration是多长时间，在路由跳转时都会消失

四、插件类

1、uni-simple-router插件

我的另一篇文章uni-app引入uni-simple-router基础配置中详细记录了uni-simple-router的使用