问题在于微信小程序中,打印出的环境是当前环境:{"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>