uniapp HbuildX H5 小程序问题整理（持续更新）

谁吃了我de草莓蛋糕

已于 2024-04-29 16:19:28 修改

阅读量403

点赞数 6

文章标签： uni-app 小程序 vue.js

于 2024-04-29 11:04:50 首次发布

本文链接：https://blog.csdn.net/weixin_44875212/article/details/138305847

版权

苹果小程序 uni-popup 弹出层显示底部弹框会有镂空

popup 苹果

h5正常

解决在uni-popup 标签上加 :safe-area=‘false’

			<view class="popup-content">
				<view class="item" @click="telphone(phone[0])">
					{{phone[0]}}
				</view>
				<view class="item" @click="telphone(phone[1])">
					{{phone[1]}}
				</view>
				<view class="cancel" @click="cancelPhone">
					取消
				</view>
			</view>
		</uni-popup>

拨打电话

不需要区分安卓手机号了

let platform = uni.getSystemInfoSync().platform
		switch (platform) {
			case 'android':
				uni.showActionSheet({
					itemList: [phone, '呼叫'],
					success: function(res) {
						// console.log(res);
						if (res.tapIndex == 1) {
							plus.device.dial(phone, false)
						}
					},
					complete: function(res) {
						// console.log("安卓失败", res)
					}
				})
				break;
			case 'ios':
				uni.makePhoneCall({
					phoneNumber: phone

				})
				break;
			default:
		}

解决：

	const telphone = (phone) => {
		phone = phone.replace(/-/g, '');
		window.location.href = 'tel://' + phone
	}

uniapp uni-popup 打不开报undefined

<uni-popup ref="popup" :round="20" :safe-area='false'>
			<view class="popup-content">
				<view class="item" @click="telphone(phone[0])">
					{{phone[0]}}
				</view>
				<view class="item" @click="telphone(phone[1])">
					{{phone[1]}}
				</view>
				<view class="cancel" @click="cancelPhone">
					取消
				</view>
			</view>
		</uni-popup>

加nextTick

const openPhone = () => {
		nextTick(() => {
			if (popup.value) {
				popup.value.open('bottom');
			} else {
				console.error('uni-popup 实例未定义');
			}
		});
	}

uniapp “navigationStyle”:“custom” H5需要导航小程序不需要导航

还是会存在标题

设置了 “navigationStyle”: “custom” H5是也没有的了

h5 可以自定义导航栏

如果是嵌套在其他小程序里面做跳转的即使用了 “navigationStyle”: “custom” 也是可以修改标题的

uni.setNavigationBarTitle({  
      title: '我的页面'  
});

为什么不同意加报错在请求接口

Hbuildx 修改了一个标签结束标签没有同步修改

H5 中的路由设置

自定义模态框

在这里插入图片描述
CustomModal.vue 组件

<template>
	<view class="custom-modal" v-if="visible">
		<!-- 模态框的内容 -->
		<view class="content">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		}
	});
</script>

<style scoped>
	.custom-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.custom-modal .content {
		width: 78.13%;
		background: #FFFFFF;
		border-radius: 14rpx;
	}
</style>

使用

<custom-modal :visible="modalVisible">
			<view class="model-contant">
				<view class="model-contant-title">服务已下架</view>
				<view class="model-contant-text">非常抱歉，该服务已下架，若有需要请联系我们~</view>
				<view class="btn-wrap">
					<view class="left" @click="openPhone">联系我们</view>
					<view class="right" @click="confirmModal">确定</view>
				</view>
			</view>
		</custom-modal>

	const modalVisible = ref(false)
	const confirmModal = () => {
		modalVisible.value = false;
		const canNavBack = getCurrentPages()
		if (canNavBack && canNavBack.length > 1) {
			uni.navigateBack()
		} else {
			history.back();
		}
	}