目录结构

/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

 {str}}"  arr="{{arr}}"bind:onFund="onFund"> 

/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

/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

 {weburl}}" bindmessage="onMessageHandle">

/pages/web/web.js

Page({/*** 页面的初始数据*/data: {},// 用户消息 处理onMessageHandle: function(e) {// 注意： 由于微信小程序接收h5传来的数据，都是push到数组尾部的， 所以在取数据时，要取数组最后一条var type = e.detail.data[[e.detail.data.length - 1]].typevar 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