117 lines
2.5 KiB
Vue
117 lines
2.5 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="header">
|
||
<view class="title">WV测试（WebView）</view>
|
||
<button size="mini" type="primary" @click="sendSavedText">发送文本</button>
|
||
</view>
|
||
<view class="status">
|
||
当前存储：<text class="value">{{ savedText || '暂无' }}</text>
|
||
</view>
|
||
<web-view
|
||
class="webview"
|
||
:src="h5Url"
|
||
id="wv-webview"
|
||
@message="handleH5Message"
|
||
></web-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { STORAGE_KEYS } from '@/common/env';
|
||
import { ensureAppConfig, getWebviewBaseUrl } from '@/common/app-config';
|
||
|
||
const STORAGE_KEY = 'demo_saved_text';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
h5Url: '',
|
||
savedText: '',
|
||
baseUrl: ''
|
||
};
|
||
},
|
||
async onShow() {
|
||
const token = uni.getStorageSync(STORAGE_KEYS.TOKEN);
|
||
if (!token) {
|
||
uni.navigateTo({ url: '/pages/login/login' });
|
||
return;
|
||
}
|
||
try {
|
||
await ensureAppConfig();
|
||
} catch (e) {
|
||
return;
|
||
}
|
||
this.savedText = uni.getStorageSync(STORAGE_KEY) || '';
|
||
this.initH5Url();
|
||
},
|
||
methods: {
|
||
initH5Url() {
|
||
const baseUrl = getWebviewBaseUrl();
|
||
if (!baseUrl) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '配置获取失败，请退出小程序重新打开。',
|
||
showCancel: false
|
||
});
|
||
return;
|
||
}
|
||
this.baseUrl = baseUrl;
|
||
this.refreshH5Url();
|
||
},
|
||
handleH5Message(e) {
|
||
const detail = e.detail || {};
|
||
const payload = Array.isArray(detail.data) ? detail.data[0] : detail.data;
|
||
if (!payload) return;
|
||
|
||
console.log('H5消息：', payload.type);
|
||
},
|
||
refreshH5Url() {
|
||
if (!this.baseUrl) return;
|
||
const text = encodeURIComponent(this.savedText || '');
|
||
const sep = this.baseUrl.includes('?') ? '&' : '?';
|
||
// this.baseUrl = `https://zsb.yitisheng.vip`;
|
||
this.h5Url = `${this.baseUrl}`+`${sep}text=${text}&t=${Date.now()}`;
|
||
},
|
||
sendSavedText() {
|
||
this.savedText = uni.getStorageSync(STORAGE_KEY) || '';
|
||
this.refreshH5Url();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
background: #f6f7fb;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 32rpx 0;
|
||
}
|
||
|
||
.title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.status {
|
||
padding: 8rpx 32rpx 16rpx;
|
||
font-size: 24rpx;
|
||
color: #5b6777;
|
||
}
|
||
|
||
.value {
|
||
color: #1f2d3d;
|
||
}
|
||
|
||
.webview {
|
||
flex: 1;
|
||
}
|
||
</style>
|