微信小程序组件、web-view、h5之间交互

目录结构

/component
    /index-page
        /index.js
        /index.wcss
        /index.wxml
        /index.json
/pages
    /index
        /index.wcss
        /index.wxml
        /index.js
        /index.json
    /web
        /web.wcss
        /web.wxml
        /web.js
        /web.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

小程序

/pages/index/index.wxml

 <cny-index-page 
      id="index_page"
      str="{{str}}"  
      arr="{{arr}}"
      bind:onFund="onFund"
      > 
   cny-index-page>
1
2
3
4
5
6
7

/pages/index/index.js

Page({
	/**
	 * 页面的初始数据
	 */
	data: {
		str:'',
		arr:[]
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function(options) {
		// 父调子
		// 页面获取自定义组件实例
		let countDown = that.selectComponent('#index_page'); 
		countDown.music_click(); // 通过实例调用组件事件  

	},
	onFun: function(that) {

	},

	
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/pages/index/index.json

{
  "usingComponents": {
    "cny-index-page": "../../component/index-page/index"
  }
}
1
2
3
4
5

组件

/component/index-page/index.wxml

<view><view>
1

/component/index-page/index.js

Component({
	// 父组件传值，给默认值
	properties: {
		arr: {
			type: Object,
			value: {}
		},
		str: {
			type: String,
			value: ''
		},
	},
	// 组件本地值
	data: {

	},
	// 组件加载完成触发
	ready: function() {
		// 使用父的变量
		this.data.str
		// 使用父方法
		this.triggerEvent('onFun',e)
	
	},
	// 在组件实例被从页面节点树移除时执行
	detached: function() {

	},
	methods: {
		// 播放音乐
		music_click() {

		},

	}

})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

/component/index-page/index.json

{
  "component": true
}
1
2
3

web-view

/pages/web/web.wxml

 <web-view web-view src="{{weburl}}" bindmessage="onMessageHandle">
   web-view>

1
2
3

/pages/web/web.js

Page({

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

	},

	// 用户消息 处理
	onMessageHandle: function(e) {
		// 注意： 由于微信小程序接收h5传来的数据，都是push到数组尾部的， 所以在取数据时，要取数组最后一条
		var type = e.detail.data[[e.detail.data.length - 1]].type
		
		var pages = getCurrentPages();
		for (var i = 0; i < pages.length; ++i) {
			var currentPage = pages[i];
			let currentPage_url = currentPage.route;
			if (currentPage_url == 'pages/index/index') {
				// 获取页面组件
				let countDown = currentPage.selectComponent('#index_page');
				// countDown.music_click(); // 通过实例调用组件事件  
				countDown.setData({
					datas: datas,
				})
				break;
			}

		}

	},


})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

h5

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>h5 向支付宝小程序传参数title>
		
		<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js">script>
		<script>
			// 无解的是， 只有当页面小程序后退、组件销毁、分享时 数据才能触发message事件，进行传输数据，其他不能
			// 这种只能符合新开页面进行修改数据，然后修改成功进行回退使用
			wx.miniProgram.postMessage({ data: {foo: 'bar'} })
		script>
	head>
	<body>
	body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

相关阅读:
增加网站搜索引擎排名的6个准则
mybatis入门
纯js实现录屏并保存视频到本地的尝试
迁移学习 & 凯明初始化
pytest（二）框架实现一些前后置（固件，夹具）的处理，常用三种
服务器防火墙的应用技术有哪些
2022/7/20 LocalDateTime将年月日转化为时间戳
图论基础学习笔记
处理器 Handler 详解
Spark开源REST服务——Apache Livy（Spark 客户端）

原文地址：https://blog.csdn.net/YuYan_wang/article/details/128064854