yuetianyu2016
yuetianyu2016
  • 发布:2024-11-29 14:32
  • 更新:2024-11-29 15:38
  • 阅读:40

在uni-app编译的小程序中使用webview加载uni-app编译的H5,无法使用uni.webview对象上的方法

分类:uni-app

问题在于微信小程序中,打印出的环境是当前环境:{"h5":true},如果是单独的html文件则会正常显示小程序环境;
在goBack方法中,uni.webView对象存在,navigateBack方法也在,但不会生效;
附件是该工程
初步分析wxJdk里面的wx对象被影响了,在app.vue中动态增加wx的jdk,然后使用wx.miniProgram.navigateBack()。

// 这是 index.html:  
<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8" />  
        <script>  
            var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||  
                CSS.supports('top: constant(a)'))  
            document.write(  
                '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +  
                (coverSupport ? ', viewport-fit=cover' : '') + '" />')  
        </script>  
        <title></title>  
        <!--preload-links-->  
        <!--app-context-->  
    </head>  
    <body>  
        <div id="app"><!--app-html--></div>  
        <script type="module" src="/main.js"></script>  
    </body>  
    <!-- #ifdef H5 -->  
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>  
    <script type="module" src="./lib/uni-webview.js"></script>  
    <!-- #endif -->  
</html>  
//这是main.js  
import App from './App'  

// #ifndef VUE3  
import Vue from 'vue'  
import './uni.promisify.adaptor'  
Vue.config.productionTip = false  
App.mpType = 'app'  
const app = new Vue({  
    ...App  
})  
app.$mount()  
// #endif  
// #ifdef H5  
document.addEventListener('UniAppJSBridgeReady', function() {  
    uni.webView.getEnv(function(res) {  
        console.log('当前环境:' + JSON.stringify(res));  
    });  
    // uni.webView.navigateTo(...)  
});  
// #endif  
console.log('main')  
// #ifdef VUE3  
import {  
    createSSRApp  
} from 'vue'  
export function createApp() {  
    const app = createSSRApp(App)  
    return {  
        app  
    }  
}  
// #endif  
//这是小程序页面:  
<script setup>  
    import {  
        onLoad  
    } from '@dcloudio/uni-app';  
    import {  
        ref  
    } from "vue"  
    const viewUrl = ref('');  
    const handleMessage = e => {  
        console.log(e);  
    };  
    onLoad(({}) => {  
        viewUrl.value = 'http://localhost:5174/#/pages/index/h5';  
    });  
</script>  

<template>  
    <web-view :src="viewUrl" @message="handleMessage"></web-view>  
</template>  
//这是h5页面  
<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  
        <button @click="goBack">后退</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        mounted() {  
            // #ifdef H5  
            document.addEventListener('UniAppJSBridgeReady', function() {  
                uni.webView.getEnv(function(res) {  
                    console.log('当前环境:' + JSON.stringify(res));  
                });  
                // uni.webView.navigateTo(...)  
            });  
            // #endif  
        },  
        methods: {  
            goBack() {  
                console.log(uni.webView)  
                uni.webView.navigateBack()  
            },  
        }  
    }  
</script>
2024-11-29 14:32 负责人:无 分享
已邀请:
蔡cai

蔡cai

微信小程序webview文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html#%E7%9B%B8%E5%85%B3%E6%8E%A5%E5%8F%A3-1
jssdk地址:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#3

要回复问题请先登录注册