微信小程序组件、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

小程序

/pages/index/index.wxml

 <cny-index-page 
      id="index_page"
      str="{{str}}"  
      arr="{{arr}}"
      bind:onFund="onFund"
      > 
   cny-index-page>

/pages/index/index.js

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

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

	},
	onFun: function(that) {

	},

	
})

/pages/index/index.json

{
  "usingComponents": {
    "cny-index-page": "../../component/index-page/index"
  }
}

组件

/component/index-page/index.wxml

<view><view>

/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() {

		},

	}

})

/component/index-page/index.json

{
  "component": true
}

web-view

/pages/web/web.wxml

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

/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;
			}

		}

	},


})

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>

你可能感兴趣的:(小程序,微信小程序,前端,交互)