更新记录

1.0.0(2024-10-21) 下载此版本

uniapp内部没有实现页面预览pdf只能通过api打开预览,插件市场也有很多差不多的插件,这款插件可维护性高,理念是使用webview加载该项目签名预览合同,目前测试APP、微信小程序、H5三端兼容,app可能版本较低加载空白,目前主流手机测试都没什么问题。


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.29 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×
<template>
    <view>
        <view style="height: 100rpx;">&nbsp;</view>
        <web-view :webview-styles="webviewStyles" :style="{width:'100vw',}" :src="webviewUrl" @message="handleMessage"></web-view>
    </view>
</template>

<script lang="ts" setup>
    import { tnNavBack } from '@/uni_modules/tuniaoui-vue3/utils'
    import { onLoad, onReady, onShow, } from '@dcloudio/uni-app';
    import { ref } from 'vue';
    import { baseURL,isencrypt,version,WebviewBaseUrl } from "@/utils/request/http";
    import { authUserStore as authUserStoreAlias } from "@/stores/authUser";
    let authUserStore = authUserStoreAlias();
    const platform = ref('')
    const webviewStyles = ref({
        top: 0,
        height:null
    })
    // 获取屏幕信息
    const getSystemInfo = () => {
        uni.getSystemInfo({
            success: ({
                screenHeight,
                statusBarHeight
            }) => {
                webviewStyles.value.top = statusBarHeight
                webviewStyles.value.height = screenHeight - statusBarHeight
            }
        });
    }
    const webviewUrl = ref('')
    const handleMessage = (e) => {
        console.log(e,'---------------eeeeeeeee');
        let action = ''
        let data = {}
        // #ifdef H5
        data = e.data
        action = data?.type || 'Back'
        // #endif
        // #ifdef APP-PLUS
        data = e.detail?.data?.[0]
        action = data?.type || 'Back'
        // #endif
        // #ifdef MP-WEIXIN
        data = e.detail?.data?.[0]
        action = data?.type || 'Back'
        // #endif
        // data.signUrl = 'http://oss.hfjpxh.com/pdf/c1e74396f420463edd223745a67377f.pdf'
        console.log(action,'---------------data');
        if (action === 'Back') {
            navigateBack()
        }
        if(data.signUrl){
            uni.$emit('submitContract', data)
        }
        //没有权限
        if(action === 'Logout'){
            authUserStore.Logout(true)
        }
    }
    const navigateBack = () => {
        tnNavBack()
    }
    const getEnv = () => {
        // #ifdef MP-WEIXIN
        return 'MP-WEIXIN'
        // #endif
        // #ifdef APP-PLUS
        return 'APP-PLUS'
        // #endif
        // #ifdef H5
        return 'H5'
        // #endif
    }
    onLoad((option)=>{
        // #ifdef H5
        window.onmessage = handleMessage
        // #endif
        // #ifdef APP-PLUS | MP-WEIXIN
        platform.value = uni.getSystemInfoSync().platform;
        console.log(platform,'---------platform');
        if(platform.value !== 'ios'){
            getSystemInfo()
        }
        // #endif
        const parseObj =  option.obj && JSON.parse(option.obj)
        const pageUrl = parseObj?.path || ''
        const env = getEnv()
        const obj = JSON.stringify({...parseObj,env})
        const token = authUserStore.getToken || ''
        webviewUrl.value = `${WebviewBaseUrl}${pageUrl}?obj=${obj}&token=${token}&baseURL=${baseURL}&isencrypt=${isencrypt}&version=${version}&env=${env}`
    })
</script>

<style>
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问