微信小程序webview与小程序页面交互

天马3798

2324人浏览 · 2025-04-08 16:03:16

天马3798 · 2025-04-08 16:03:16 发布

一、web-view 组件

功能描述

承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。

属性说明

属性	类型	必填	说明	最低版本
src	string	否	webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。	1.6.4
bindmessage	eventhandler	否	网页向小程序 postMessage 时，会在以下特定时机触发并收到消息：小程序后退、组件销毁、分享、复制链接（2.31.1）。e.detail = { data }，data是多次 postMessage 的参数组成的数组。	1.6.4
bindload	eventhandler	否	网页加载成功时候触发此事件。e.detail = { src }	1.6.4
binderror	eventhandler	否	网页加载失败的时候触发此事件。e.detail = { url, fullUrl }，其中 fullUrl 为加载失败时的完整 url	1.6.4

二、web-view JSSDK 相关接口

web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。支持的接口有：

接口名	说明	最低版本
wx.miniProgram.navigateTo	参数与小程序接口一致	1.6.4
wx.miniProgram.navigateBack	参数与小程序接口一致	1.6.4
wx.miniProgram.switchTab	参数与小程序接口一致	1.6.5
wx.miniProgram.reLaunch	参数与小程序接口一致	1.6.5
wx.miniProgram.redirectTo	参数与小程序接口一致	1.6.5
wx.miniProgram.postMessage	向小程序发送消息，会在以下特定时机触发组件的message事件：小程序后退、组件销毁、分享、复制链接（2.31.1）	1.7.1
wx.miniProgram.getEnv	获取当前环境	1.7.1

三、web-view 使用交互案例

1.html 网页端代码编写


@{
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试使用</title>
    <script src="//cdn.jnqianle.cn/jquery/jquery1.12.4.min.js"></script>
    <link rel="stylesheet" async href="//cdn.jnqianle.cn/cover/cover3.0.min.css" />
    <script async src="//cdn.jnqianle.cn/cover/cover3.0.min.js"></script>
    <link rel="stylesheet" async href="//cdn.jnqianle.cn/uploader/uploader7.min.css" />
    <script async src="//cdn.jnqianle.cn/uploader/uploader7.min.js"></script>

    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <style>
        .uploader_file{
            border:1px solid red;
            width:100px;
            height:100px;
        }
    </style>
</head>

<body>

<div class="uploader uploader-primary" id="uploadOne">上传文件</div>
<div style="height:50px;" id="divOne"></div>

    <script>
          $('#divOne').click(function(){
             alert(3);
          });

        $(function(){
              $('#uploadOne').uploader({
               url:'wss://haam37.qianlekh.com/upload/common',
              text: "上传图片",
              fileExts: "jpg;png",
              more: true, //是否可以上传多个
              auto: true, //是否自动上传
              onSuccess:function(data){
              alert(JSON.stringify(data));

              //传递参数
                 wx.miniProgram.postMessage({data:{name:'张三'}});
                wx.miniProgram.postMessage({data:data});
              //上传成功后，返回到首页
              //wx.miniProgram.navigateTo({url: '/pages/index/index'})
                wx.miniProgram.navigateBack();
              }
          });
        });
    </script>

</body>

</html>

2.小程序 web-view 页面参数接收

<web-view src="http://localhost:50001/upload/test1" bindmessage="onMessage"/>

// pages/upload/test1/test1.js
Page({

	/**
	 * 页面的初始数据
	 */
	data: {

  },
  //当见听到信息触发
  onMessage(e){
    console.info(e);
    //获取传递参数
    var data=e.detail.data;
    //上传文件保存
    wx.setStorageSync('key',data)
  },
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {

	},

	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady() {

	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {

	},
})

微信小程序上传组件封装uploadHelper2.0使用整理

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模