目录结构
/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>
<!-- 引入支付宝js -->
<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>
转载：https://blog.csdn.net/YuYan_wang/article/details/128064854
查看评论