一、项目背景：

使用uniapp框架开发的小程序，因业务需求，要在小程序的webview里嵌入第三方的h5页面。当用户点击小程序右上角的三个点进行分享的时候，要将h5页面传过来的参数作为分享数据。

二、小程序端

先来了解一下小程序的 web-view 组件：

  • web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。
  • 小程序的 web-view 页面和本身的内容不能共存，如果想在页面上悬浮内容，可以使用 uni.showToast()、uni.showModal()来进行内容提示。

官方文档：https://uniapp.dcloud.io/component/web-view?id=web-view

属性名类型说明
srcStringwebview 指向网页的链接
@messageEventHandler网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。

分享的时候，当点击小程序右上角的三个点、发送给朋友，会触发message事件的回调。

uniapp项目webview页面给小程序传参 postMessage 接收不到参数

2.2 原生小程序开发

用微信开发者工具开发的时候，可以先用本地服务的路径来进行调试。

使用原生小程序语言开发，.wxml文件内容如下：

<!--index.wxml-->
<view class="container">
  <web-view src="http://localhost:8080/#/webview" bindmessage="getMessage"></web-view>
</view>

.js文件内容如下：

Page({
  data:{
    shareData:""
  },
  getMessage(e){
    console.log("getMessage:e>>>",e)
    this.shareData = e.detail.data[e.detail.data.length - 1];
  },
  onShareAppMessage(){
    let path=`/pages/webView/webView?link=${this.shareData.url}`
    return{
      title:this.shareData.title,
      path,
      imageUrl:this.shareData.imgUrl
    }
  }
})

2.2 uniapp小程序开发

使用uniapp框架开发的小程序，页面代码如下：

<template>
  <view>
    <web-view :src="src" @message="getMessage"></web-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      src: "http://localhost:8080/#/webview",
      sharePath: "", //二次转发的路径
      shareTitle: "", //二次转发的标题
      shareImgUrl: "" //二次转发的缩略图
    };
  },
  async onLoad(options) {
     this.src = decodeURIComponent(options.link);
  },
  methods: {
    getMessage(e) {
      console.log("getMessage:data :>> ", e.detail.data);
      let data = e.detail.data[e.detail.data.length - 1];
      this.shareTitle = data.shareTitle;
      this.shareImgUrl = data.shareImgUrl;
      this.sharePath = `${data.page}?link=${data.shareUrl}&invited_uid=${this.uid}&dl_id=${this.dl_id}`;
    },
    //小程序分享
    onShareAppMessage() {
      console.log("分享的链接 :>> ", this.sharePath);
      return {
        title: this.shareTitle,
        imageUrl: this.shareImgUrl,
        path: this.sharePath
      };
    }
  }
};
</script>

三、h5端

h5页面引入微信小程序的SDK，或者uni的SDK。通过调用 postMessage 方法将数据传递给小程序端。

  • wx.miniProgram.postMessage()，网页向应用发送消息，在小程序 web-view 的 message 事件回调 event.detail.data 中接收消息。
  • 传递的消息信息，必须写在 data 对象中。
  • event.detail.data 中的数据，以数组的形式接收每次 post 的消息，通过 e.detail.data[e.detail.data.length - 1] 获取最后一次的数据。
wx.miniProgram.postMessage({
	data: {
		page: "/pages/webView/webView",
		url: "https://www.baidu.com",
	},
});

uniapp项目webview页面给小程序传参 postMessage 接收不到参数

3.1 使用微信小程序的SDK

引入微信小程序的SDK，就可以调用 wx.miniProgram.postMessage() 方法进行数据传递。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webview</title>
  </head>
  <body>
    <div id="app">分享页面给好友</div>
    <!-- 微信小程序 的 SDK -->
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	<script type="text/javascript">
	document.getElementById("app").onclick=()=>{
		console.log('clickHandle :>> ', );
		wx.miniProgram.getEnv(function (res) {
			console.log("当前环境：" + JSON.stringify(res));
		});
		wx.miniProgram.postMessage({
			data: {
				page: "/pages/webView/webView",
				url: "https://www.baidu.com",
			},
		});
	}
    </script>
  </body>
</html>

3.2 使用uniapp的SDK

如果是使用 uniapp 开发的h5，想使用 uni 的方法，需要引入 uni.webview.js 文件。但是要注意网上下载的 uni.webview.js 文件，里面注册的就是 uni 对象，会被 uniapp 项目自带的 uni 对象覆盖。需要手动改源码，全字匹配 uni 后随便改成另外的名字。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webview</title>
  </head>
  <body>
    <div id="app">分享页面给好友</div>
    <!-- 微信小程序 的 SDK -->
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	<!-- uni 的 SDK -->
	<script type="text/javascript" src="./js/uni.webview.js"></script>
	<script type="text/javascript">
	document.getElementById("app").onclick=()=>{
		console.log('clickHandle :>> ', );
		webUni.getEnv(function(res) {
			console.log("当前环境：" + JSON.stringify(res));
		});
		webUni.postMessage({
			data: {
				page: "/pages/webView/webView",
				url: "https://www.baidu.com",
			},
		});
	}
    </script>
  </body>
</html>

四、总结

使用 postMessage() 接收不到参数，检查以下几点：

  • postMessage() 里，数据要放在 data 对象里。
  • 注意触发的时机，只有 后退、组件销毁、分享 的时候，才会触发 web-view 的message事件。
  • 使用 uni.postMessage() 方法，要改源码里的 uni 对象。
# 小程序
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区