小程序和H5进行消息传参

最新推荐文章于 2024-04-19 17:13:34 发布

群峦

最新推荐文章于 2024-04-19 17:13:34 发布

阅读量1.2k

点赞数 21

分类专栏：前端文章标签：小程序 java 前端 vue uni-app vue.js html5

本文链接：https://blog.csdn.net/qq_42331569/article/details/135501606

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、跳转页面

跳转页面分为三部分，分别为触发按钮、事件、以及接收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的引用


<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>

群峦

关注

21
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
1
评论
小程序和H5进行消息传参

/ 打印接收到的数据。<u-button text='打开H5页面' @click="goToH5Page" > </u-button>console.log("在主页面中监听消息");跳转页面分为三部分，分别为触发按钮、事件、以及接收H5回传数据。//数据删除，避免下次出现。//需要打开的H5页面。', //指定监听key，全局唯一。', //定义监听的key。//引用onShow。//页面初始化时删除。
复制链接

扫一扫