uniapp 内置H5支付界面,成功后,点击按钮,返回首页(uniapp与H5之间的通信)

H5代码

<view class="success-pay bgCover">

    <view class="success-pay-content">
        <view class="success-pay-content-pay">
            <image src="/static/success-pay.png" class="success-pay-content-pay-image" />
            <view class="success-pay-content-pay-text">付款成功</view>
        </view>
        <view class="success-pay-content-btn">
            <view class="bottom-text" @click="sendMessage">返回app</view>
        </view>
        
    </view>
</view>

</template>

<script>
export default {
data() {
return {

        }
    },

    methods: {
        sendMessage() {
            console.log("------!!")

//发出支付成功通知
uni.webView.postMessage({
data: {
action: 'message'
}
})

        }
    },
}

</script>

uniapp 端代码

<template>
<view class="bgCover">

    <Header title="支付" />
    <view class="main">
        <web-view @message="getMessage" @onPostMessage="getMessage" :src="src" fullscreen="false"
            :webview-styles="webviewStyles"></web-view>
    </view>

</view>

</template>

<script setup lang="ts">
import { onMounted, reactive, ref, computed } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import Header from '../../v2/components/header/index.vue'
import { depositFeeOrderInfo } from './api/index'
import { useThemeStore } from '@/store/theme'
import { APP_USER_KIND, APP_STUDENT_USER_ID } from '@/config/constants'
import storage from '@/utils/storage'
const src = ref();
const webviewStyles = ref({
width: '100%',
height: '90%',
top: '100px',
bottom: '56px',
zIndex: 0
});
const depositFee = ref()
const theme = useThemeStore()
const statusBar = ref('')

onLoad(async (options) => {

})
const depositFeeOrderInfos = async (type: any, vipPrice: any) => {

}
onShow(() => {
});
const getMessage = (res) => {
console.log('接收到消息')
console.log('接收到消息', JSON.stringify(res.detail.data))
if (res.detail.data[0].action == 'message') {
uni.navigateTo({ url: '/v2/home/index' });
}
};
onMounted(async () => {
statusBar.value = theme.topBarHeight
})
</script>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。