uniapp兼容微信小程序和支付宝小程序遇到的坑

原创

已于 2024-01-05 14:43:00 修改 · 6.8k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #uni-app #微信小程序

于 2023-07-26 10:54:52 首次发布

1、支付宝不支持v-show

改为v-if。

2、v-html

App端和H5端支持 v-html ，微信小程序会被转为 rich-text，其他端不支持 v-html。

解决方法：去插件市场找一个支持跨端的富文本组件。

3、导航栏处有背景色延伸至导航栏外

兼容微信小程序和支付宝小程序

pages.json：给支付宝的导航栏设置透明

{
	"path": "pages/agent/agent",
	"style": {
		"navigationStyle": "custom",
		"enablePullDownRefresh": false,
		"mp-alipay": {
			"transparentTitle": "always",
			"titlePenetrate": "YES"
		}
	}
}

agent页面：

支付宝加上my.setNavigationBar设置标题文字即可，微信需要自定义导航栏

html：

<template>
    <view style="height: 100vh;position: relative;">
		<view class="bj"></view>
		<view class="status_bar"></view>
		<!-- #ifndef MP-ALIPAY -->
		<view class="back" @click="back" :style="{ top: menuButton.top + 'px', height: menuButton.height + 'px' }">
			<view class="text1"></view>
			代理中心
		</view>
		<!-- #endif -->
</template>

js：

<script>
	export default {
		data() {
			return {
				menuButton: {}
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.menuButton = uni.getMenuButtonBoundingClientRect()
			// #endif
			
			// #ifdef MP-ALIPAY
			my.setNavigationBar({
				title: '代理中心'
			})
			// #endif
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1,
				})
			},
		}
	}
</script>

&nbs