1、支付寶不支持v-show

改為v-if。

2、v-html

App端和H5端支持 v-html ，微信小程序會(huì)被轉(zhuǎn)為 rich-text，其他端不支持 v-html。

解決方法：去插件市場(chǎng)找一個(gè)支持跨端的富文本組件。

3、導(dǎo)航欄處有背景色延伸至導(dǎo)航欄外

兼容微信小程序和支付寶小程序?

pages.json：給支付寶的導(dǎo)航欄設(shè)置透明

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

agent頁(yè)面：

支付寶加上my.setNavigationBar設(shè)置標(biāo)題文字即可，微信需要自定義導(dǎo)航欄

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>

?css：

.bj {
	background: linear-gradient(180deg, #ffbdbd,?#ff8f8f);
	height: 460rpx;
	width: 100%;
	position: absolute;
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.back {
	position: fixed;
	z-index: 99;
	display: flex;
	align-items: center;
	color: #292929;
}
.text1 {
	margin-right: 14rpx;
	margin-left: 32rpx;
	width: 16rpx;
	height: 16rpx;
	border-left: 2px solid #292929;
	border-top: 2px solid #292929;
	transform: rotate(-45deg);
}

參考：小程序文檔 - 支付寶文檔中心

4、獲取節(jié)點(diǎn)信息，支付寶不兼容uni.createSelectorQuery().in中的in

//#ifdef MP-WEIXIN
uni.createSelectorQuery().in(this).selectAll('.content_box').boundingClientRect(res => {
	this.nodeData = res
}).exec();
//#endif
//#ifdef MP-ALIPAY
my.createSelectorQuery().selectAll('.content_box').boundingClientRect().exec(res => {
	this.nodeData = res[0]
})
//#endif

5、客服

open-type="contact" 僅支持：微信小程序、百度小程序、快手小程序、抖音小程序

<!-- #ifdef MP-WEIXIN -->
<button open-type="contact"></button>
<!-- #endif -->

支付寶接入客服：

首先在支付寶開(kāi)放平臺(tái)開(kāi)通螞蟻智能客服：支付寶開(kāi)放平臺(tái)-->控制臺(tái)-->小程序信息-->在線客服

開(kāi)通后點(diǎn)擊小程序的右上角三個(gè)點(diǎn)就有客服功能了

如果想點(diǎn)擊某個(gè)按鈕時(shí)進(jìn)入客服頁(yè)面：

<contact-button
  tnt-inst-id="企業(yè)編碼"
  scene="聊天窗編碼"
  size="咨詢按鈕大小"
  color="咨詢按鈕顏色"
  icon="咨詢按鈕圖片url，例如：https://xxx/service.png"
/>

?tips: 企業(yè)編碼、聊天窗編碼在：

?

tips：?contact-button本身無(wú)法修改樣式，若想達(dá)到自己想要的效果如：

?方法：父元素設(shè)置相對(duì)定位 + overflow: hidden超出隱藏，子元素里循環(huán)很多個(gè)contact-button出來(lái)，絕對(duì)定位，并使用opacity:0隱藏，代碼：

<view style="position: relative;width: 100%;overflow: hidden;display: flex;">
	<view>官方客服</view>
	<view class="iconfont iconfanhui1"></view>
	<view class="alipyContact" style="opacity:0; position: absolute;">
		<contact-button size="40rpx" v-for="(item,index) in 15" :key="index" />
	</view>
</view>

?參考：小程序文檔 - 支付寶文檔中心

6、position: fixed在支付寶小程序會(huì)被彈出的鍵盤頂上去

?如下圖：?“同意《服務(wù)和隱私協(xié)議》”被彈起的鍵盤帶上來(lái)了

?

7、uniapp小程序超出限制：Error: 分包大小超過(guò)限制,main package source size 4199KB exceed max limit 2MB

改了幾行代碼上傳時(shí)發(fā)現(xiàn)超過(guò)限制，解決方法：?

參考：?

https://www.cnblogs.com/Denny_Yang/p/16769455.html

?8、uniapp 使用 require 絕對(duì)路徑引入文件時(shí)，報(bào)錯(cuò)“文件查找失敗”

?我在 main.js 中使用絕對(duì)路徑引入：

// 引入請(qǐng)求封裝，將app參數(shù)傳遞到配置中
require('/config/request.js')(app)

?出現(xiàn)：

原因：

參考：js 文件引入 | uni-app官網(wǎng)

解決方案：使用相對(duì)路徑即可

// 以下兩種方式都可以
require('config/request.js')(app)
require('./config/request.js')(app)

9、頁(yè)面跳轉(zhuǎn)時(shí)，絕對(duì)路徑和相對(duì)路徑的區(qū)別

以`uni.navigateTo`舉例：

uni.navigateTo({
	url: 'pagesB/pages/publishQues'
})
uni.navigateTo({
	url: '/pagesB/pages/publishQues'
})

`uni.navigateTo` 的 `url` 參數(shù)支持相對(duì)路徑和絕對(duì)路徑兩種方式。

相對(duì)路徑是相對(duì)于當(dāng)前頁(yè)面的位置進(jìn)行計(jì)算，而絕對(duì)路徑是從根目錄開(kāi)始計(jì)算

- `uni.navigateTo({ url: 'pagesB/pages/publishQues' })` 使用的是相對(duì)路徑。
如果當(dāng)前頁(yè)面路徑是 `pagesB/pages/index`，那么相對(duì)路徑 `pagesB/pages/publishQues` 
會(huì)拼接在當(dāng)前頁(yè)面路徑的基礎(chǔ)上，
得到最終跳轉(zhuǎn)路徑為 `pagesB/pages/pagesB/pages/publishQues`。

- `uni.navigateTo({ url: '/pagesB/pages/publishQues' })` 使用的是絕對(duì)路徑。
無(wú)論當(dāng)前頁(yè)面路徑是什么，絕對(duì)路徑 `/pagesB/pages/publishQues` 都是從根目錄開(kāi)始計(jì)算，
因此最終的跳轉(zhuǎn)路徑是 `pagesB/pages/publishQues`。

10、報(bào)錯(cuò)SyntaxError: Unexpected token } in JSON at position 264

報(bào)錯(cuò)：

Module build failed (from ./node_modules/@dcloudio/webpack-uni-pages-loader/lib/index.js):
08:58:30.510 SyntaxError: Unexpected token } in JSON at position 264
08:58:30.513 ? ? at JSON.parse (<anonymous>)

在小程序編譯時(shí)，有些會(huì)報(bào)上述錯(cuò)誤，有些不會(huì)，很難察覺(jué)這個(gè)錯(cuò)誤，錯(cuò)誤代碼示例：?

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "標(biāo)題",
		"enablePullDownRefresh": false,
		"navigationStyle": "custom",
		// #ifdef MP-TOUTIAO
		"navigationStyle": "default"
		// #endif
	}
},

原因：在JSON中，對(duì)象的最后一個(gè)元素后面不應(yīng)該有逗號(hào)。

例如，{"key1": "value1", "key2": "value2",}?這樣的寫(xiě)法是錯(cuò)誤的。?假設(shè)在微信小程序中運(yùn)行上述代碼，就是多了一個(gè)逗號(hào)

改正：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-617840.html

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "標(biāo)題",
		"navigationStyle": "custom",
		// #ifdef MP-TOUTIAO
		"navigationStyle": "default",
		// #endif
        "enablePullDownRefresh": false
	}
},

到了這里，關(guān)于uniapp兼容微信小程序和支付寶小程序遇到的坑的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！