uniapp 项目遇到的问题以及解决方案

Benson叔

已于 2024-03-09 17:29:53 修改

阅读量692

点赞数 8

文章标签： uni-app javascript 开发语言

于 2024-02-20 14:42:41 首次发布

本文链接：https://blog.csdn.net/weixin_48723882/article/details/136189762

版权

1. 遮罩层弹出后使得页面滑动不滚动

解决方案：在遮罩层添加 @touchmove.stop.prevent="moveHandle" moveHandle 为空函数

<view class="tips-mask" v-if="tipsMask" @touchmove.stop.prevent="moveHandle">
	// * 遮罩层		
</view>

// script 
moveHandle: function() {},

2. 在页面中动态修改页面顶部导览右侧按钮信息

解决方案：通过this.$mp.page.$getAppWebview() 获取对象信息进行修改

data() {
			return {
			
				del: true, // * true 为按钮字体为删除  false 为按钮字体为取消
			};
		},
onNavigationBarButtonTap(e) {
			this.setTopNavRightType();
			this.del = !this.del;
		},
methods: {
			setTopNavRightType() {
				var webView = this.$mp.page.$getAppWebview();
				if (this.del) {
					webView.setTitleNViewButtonStyle(0, {
						text: '取消',
						"color": "#999",
					});
				} else {
					webView.setTitleNViewButtonStyle(0, {
						text: '删除',
						"color": "#FF4A56",
					});
				}

			},
			

		}

参考： uni-app在App端动态修改原生导航栏 - DCloud问答

参考：uniapp如何动态更新titleNView样式？_uniapp动态添加view-CSDN博客

3. 关于cover-view中的坑

1. cover-view 中嵌套内容，如果直接嵌套 view和image 那么该内容将不被展示，只能嵌套cover-view 和 cover-image

2. 当cover-view使用文字内容撑开容器的时候，出现文字现实不全、被裁剪现象，即使添加padding也无效。（H5上没问题，但真机上会出现问题）

3. 在真机调试的时候，cover-view 中使用v-if 即使为false 依旧无法隐藏，使用 v-show可以实现隐藏。

4. 在真机调试的时候，文本无法换行。哪位大佬如果有方法的话，欢迎留言，万分感谢。

以上的这些方法都无法成功使得文本换行

4. uniapp 底部tabBar的显示和隐藏

uni.showTabBar(); // tabBar 显示
uni.hideTabBar(); // tabBar 隐藏

5. 通过props 传递图片地址

icon: require("@/static/data/192@2x.png"),

// 在父组件中传递
<fu :icon="icon />

// 在子组件中使用
<image :scr="icon" />

props:['icon']

通过require 包裹地址，原因是在父组件中src的值被当作是普通字符串传给子组件，所以子组件只会当字符串处理，不会当作路径处理。

require()只能接收常量

6.获取到不同移动端电量部分的高度

var height = plus.navigator.getStatusbarHeight();
console.log('height', height)

7.在uniapp 中通过动态数据使用 calc()函数修改style样式

// html部分
<view class="bank00SelectTrack-page" :style="getPageHight()"></view>

// js部分
data() {
    return {
		cycHight: 0
    }
		
},
methods:{
    let vh = '100vh';
	let nh = '100rpx';
	return {
		height: `calc(${vh} - ${nh} - ${this.cycHight + 'px'})`;
	};
}

8.关于 provide/inject

在 Vue.js 中，provide 和 inject 是一对配合使用的特性，用来实现跨层级的组件通信，尤其是从父组件向任意深层的子孙组件传递数据。这种方式特别适用于构建组件库或封装复用性高的组件时，允许组件树内部的数据流向上游传递。

// 在父组件中注入数据
provide() {
			return {
				superParams: this
			}
		},

// 在子组件中接受
inject: ['superParams'], 与data同级 第一种方式

// 使用
watch: {
			'superParams.trackIndex'(newval, oldval) {
				this.searchText = "";
			}
		}  // 在子组件中监听父组件的trackIndex数据的变化

但是使用上面第一种方式接受的方式，会导致如果在其他父组件中没有注入数据（即定义provide）则会导致报错

/*报错内容*/

/* Injection "superParams" not found */

则使用第二种方式接受数据，定义一个默认值

inject: {
			superParams: {
				default: () => {}
			}
		}, // 与data同级 则将不会报错

9. 关于ios 页面通过左划返回上一级无法被onBackPress 所监听到

原因：左划返回上一级属于系统层面的手势识别，而非页面级别的事件。

ios 左划返回上一级可以被onUnload(),onHide()事件所监听到，所以可以在这两个事件中进行定时器，或者监听等的清理。

在uniapp 中可以通过禁止用户左划返回上一级解决该问题

i 全局禁止

// 打开项目的 manifest.json 文件，在 app-plus 下添加如下配置

{
  "app-plus": {
    "popGesture": "none"
  }
}

ii 单文件禁止

 onLoad() {
    // uni-app v3+
    const webview = this.$scope.$getAppWebview()
    if (webview) {
      webview.setStyle({
        popGesture: 'none'
      })
    }
    
    // uni-app v2
    // const webview = plus.webview.currentWebview()
    // webview.popGesture = 'none'
  }

10. 一个好用的图表库，兼容安卓和ios 等多个平台（uCharts）

官网地址：uCharts官网 - 秋云uCharts跨平台图表库

11. uniapp条件编译指令

在uni-app中，条件编译指令主要用于区分不同平台的代码块，以便实现对各个平台（如App、H5、微信小程序等）的特有功能的支持。以下是一些常用的条件编译指令：

ifdef：如果定义，表示只有在指定平台下，才会编译包含的代码块。

#ifdef PLATFORM_NAME
// 仅在名为PLATFORM_NAME的平台编译这里的代码
// 例如：#ifdef APP-PLUS 表示仅在原生App环境下编译
// 其他示例：#ifdef H5, #ifdef MP-WEIXIN（微信小程序）
...
#endif

ifndef：如果未定义，表示除了指定平台以外的所有平台都会编译包含的代码块。

#ifndef PLATFORM_NAME
// 除了名为PLATFORM_NAME的平台外，其它所有平台编译这里的代码
// 例如：#ifndef H5 表示除了H5环境之外的其他平台（包括App和小程序）都会编译这部分代码
...
#endif

同时判断多个平台，可以使用管道符|连接平台名：

#ifdef PLATFORM_NAME1|PLATFORM_NAME2
// 在名为PLATFORM_NAME1或PLATFORM_NAME2的平台下编译这里的代码
// 例如：#ifdef H5|APP-PLUS 表示在H5和原生App环境下编译
...
#endif

uni-app条件编译不仅可以应用于JavaScript代码，还可以应用于Vue模板、JSON配置文件（如pages.json）以及样式文件（SCSS、CSS）中，具体语法可能会稍有变化，比如在样式文件中可能需要使用/* #ifdef */ 和 /* #endif */的形式包裹条件编译代码块。

此外，uni-app支持的平台标识符通常包括但不限于：

APP-PLUS：原生App（Android/iOS）
H5：Web/H5环境
MP-WEIXIN：微信小程序
MP-QQ：QQ小程序
MP-ALIPAY：支付宝小程序
MP-TOUTIAO：字节跳动小程序（今日头条、抖音等）
MP-BAIDU：百度小程序
MP-KUAISHOU：快手小程序

Benson叔

关注

8
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
uniapp 项目遇到的问题以及解决方案

解决方案：在遮罩层添加 @touchmove.stop.prevent="moveHandle" moveHandle 为空函数。解决方案：通过this.$mp.page.$getAppWebview() 获取对象信息进行修改。
复制链接

扫一扫