uni-app踩坑之旅

心已赠人 2023-03-03 14:24 17阅读 0赞

这里总结的踩坑记录大部分都是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-app_uni-simple-router]中详细记录了uni-simple-router的使用

[uni-app_uni-simple-router]: https://blog.csdn.net/gaoyangbuzai/article/details/107717772

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app踩坑之旅

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

心已赠人/ 2023年03月03日 14:24/ 0 赞/ 18 阅读

相关 NSIS + QT 制作安装包的踩坑之旅

本次安装包的实现方式：NSIS + QT（DLL） NSIS的功能：实现安装逻辑 DLL的功能：提供QT编写的界面给NSIS调用首先遇到的一个问题：如何在DLL中如

╰半橙微兮°/ 2022年12月03日 05:19/ 0 赞/ 314 阅读

相关 uniapp picker踩坑range-key失效

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

谁借莪１个温暖的怀抱￠/ 2022年12月01日 14:10/ 0 赞/ 317 阅读

相关 ReactNative 踩坑之旅

样式要从StyleSheet.create创建不要使用如下的样式原因：性能 <Text style={ { ...}}>{ data.smallText

叁歲伎倆/ 2022年12月01日 05:22/ 0 赞/ 211 阅读

相关 Webpack 踩坑之旅

node\_modules包不编译一般情况下，node\_modules安装的包都已经被打包为CommonJS规范的代码，代码的入口文件由包下package.json的

阳光穿透心脏的1/2处/ 2022年11月27日 12:08/ 0 赞/ 239 阅读

相关 uniapp开发聊天APP踩坑记录

最近工作重心转移到了uniapp上，有一说一，这个框架跨端确实牛逼，一套代码能一次编译到多端使用。但随之而来的兼容性问题也是层出不穷，同样的在面临APP底层的改动也显得力不从心

秒速五厘米/ 2022年10月21日 03:44/ 0 赞/ 309 阅读

相关 uniapp聊天页nvue开发踩坑记录

由于前段时间开发出来的vue版本的聊天页，性能、用户体验等方面十分不尽人意，故开启了新的征途，nvue版本聊天页的开发。痛点一、进入页面保持在最底部这次重构nvue

快来打我*/ 2022年10月06日 00:35/ 0 赞/ 317 阅读

相关 Node.js踩坑之旅（一）

我作为一个初学者，在看书写代码的时候难免会遇到一些坑，我想把自己经历的大大小小的一些坑写出来。不仅提醒自己，也是给同处相同学习阶段的人的小小的分享。这几天看了看node.j

谁借莪１个温暖的怀抱￠/ 2022年03月25日 11:16/ 0 赞/ 261 阅读

相关 Vue踩坑之旅——Vuex

问题：某个组件在周期mounted中调用了使用computed属性getter来的全局变量，该全局变量为异步请求的数据，在非路由进入页面即刷新该页面时跳过了store的inde

阳光穿透心脏的1/2处/ 2022年01月19日 01:55/ 0 赞/ 322 阅读

相关 Vue踩坑之旅（三）—— 修改子组件样式

在vue组件中为 `<style>` 标签开启 `scoped` 属性，这样样式只作用于这个组件，而不会污染其他组件。在项目中，我们经常要引入外部的 UI 组件（如 ele

爱被打了一巴掌/ 2022年01月12日 02:37/ 0 赞/ 1179 阅读