一、跳转页面
跳转 页面分为三部分,分别为触发按钮、事件、以及接收H5回传数据
1、触发按钮
<u-button text='打开H5页面' @click="goToH5Page" > </u-button>
2、事件
const goToH5Page =() =>{
uni.navigateTo({
url: '/subPages/home/h5file'
});
}
3、接收数据
//引用onShow import { onShow,onLoad } from "@dcloudio/uni-app";//初始化回传信息 onShow((e) => { uni.getStorage({ key: 'ossResVo', //指定监听key,全局唯一 success: function (res) { //将上传值处理 console.log("在主页面中监听消息"); console.log(res); const ossResVo = JSON.parse(res.data); //数据格式化 console.log(ossResVo); //数据处理 writ.completeCaseVO.addCaseFileVoList.push({ "fileName":ossResVo.fileName, "ossKey":ossResVo.ossKey, "ossUrl":ossResVo.ossUrl }); //数据删除,避免下次出现 uni.removeStorageSync('ossResVo'); } }); })
//页面初始化时删除
onLoad((e) => { uni.removeStorageSync('ossResVo'); });
二、中间页面
1、新建个vue页面
h5file.vue
<template>
<view class="login-privacy">
<web-view :src="path" @message="handleMessage" ></web-view>
</view>
</template>
<script lang='ts' setup>
//需要打开的H5页面
const path='https://jjjjj/updateFile.html?api_token='+ token;
//H5回传数据
const handleMessage = (event) => {
console.log("event"+event.target.data[0]); // 打印接收到的数据
uni.setStorage({
key: 'ossResVo', //定义监听的key
data: event.target.data[0],
success: function () {
console.log('success');
}
});
};
</script>
三、H5页面
1、主要知识点:
#1、jssdk的引用
<!-- 公众号 JSSDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>#2、地址值的接收
const token = new URLSearchParams(window.location.search).get("api_token");
#3、业务完成后返回
wx.miniProgram.navigateBack({deta: 1});
#4、数据回传
wx.miniProgram.postMessage({data: resultString});
2、页面demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>文件上传</title>
<style>
html,body{
padding:0;
margin:0;
overflow: hidden;
}
body {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
background-color: #f2f2f2;
}
.content{
padding:60px;
box-sizing: border-box;
text-align: center;
}
h1 {
font-size: 36px;
color: #333;
}
input[type="file"] {
margin: 20px auto;
padding: 20px 10px;
border: 1px solid #ccc;
border-radius: 8px;
}
button {
margin: 20px auto;
padding: 10px 20px;
background-color: #56cabe;
color: #fff;
border: none;
cursor: pointer;
width:100%;
border-radius: 8px;
font-size:18px;
}
#fileInput::file-selector-button{
color:#333;
}
</style>
</head>
<body>
<div class="content">
<h1>文件上传</h1>
<input type="file" id="fileInput">
<button onclick="uploadFile()">上传文件</button>
</div>
<!-- 公众号 JSSDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
function uploadFile() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
//获取地址传入值
const token = new URLSearchParams(window.location.search).get("api_token");
console.log("token" + token); // 输出获取到的token值
fetch('https://fjj/upload/0', {
method: 'POST',
headers: {
'Authorization': 'Bearer ' + token // 将token加入到请求头中
},
body: formData,
})
.then(response => response.json())
.then(data => {
if (data.returncode == '0') {
var resultString = JSON.stringify(data.result, null, 2); // 缩进2个空格
wx.miniProgram.navigateBack({deta: 1});
wx.miniProgram.postMessage({data: resultString});
} else {
alert('文件上传失败:' + data.message);
}
})
.catch(error => {
console.error('Error:', error);
});
}
</script>
</body>
</html>