小程序组件传值
父子传值
小程序官方文档： https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html.
父级
1.json文件引入
{
"navigationBarTitleText": "我的",
"usingComponents": {
"longRange":"/packageC/pages/aboutMe/longRange/longRange"
}
}
2.wxml调用 + 传值
/*
InterviewRecord="{{InterviewRecord}}"
InterviewRecord 属性名
"{{InterviewRecord}}" 值
*/
<view wx:if="{{listType == 2}}">
<longRange InterviewRecord="{{InterviewRecord}}"></longRange>
</view>
3.js获取数据
data: {
InterviewRecord:[]
},
// 获取相关列表
getSignUpList(){
wx.axios.get(config.appointmentListTwo, {
queryMonth: this.data.yearMouth
}).then(res => {
if (res.data.code === 0) {
this.setData({
InterviewRecord: res.data.page.list
})
} else {
wx.showToast({
title: res.data.msg,
icon: "none"
})
}
})
},
子级
1.js文件接受数据
// 组件的属性列表
properties: {
InterviewRecord:{ // 接收的属性名
type: Array
},
},
// 监听
observers: {
InterviewRecord(data) {}
},
2.wxml
<view class="dutyCont" wx:for="{{InterviewRecord}}" wx:key='key'>
<view class="{{item.met ? 'dutyContview greyColor' : 'dutyContview'}}">{{item.meetingType}}</view>
</view>
子父传值
1.父级
<longRange bind:alertSure="alertSure" InterviewRecord="{{InterviewRecord}}"></longRange>
alertSure(e){
console.log('父级测试数据，触发',e) // 可接受到子级的 8888
},
2.子级
<view bindtap="sure">子传父</view>
data: {
answer:null
},
methods: {
sure(){
this.triggerEvent('alertSure', {
answer: 8888,
})
}
}
h5传给小程序
通过wx.miniProgram.postMessage + web-view
// 网页代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>postMessage</title>
</head>
<body>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script type="text/javascript">
wx.miniProgram.postMessage({ data: '获取成功' })
wx.miniProgram.navigateBack({delta: 1})
</script>
</body>
</html>
// 小程序代码
<web-view bindmessage="handleGetMessage" src="test.html"></web-view>
const app = getApp(); // 通过挂着app.js上获取
Page({
handleGetMessage: function(e) {
console.log(e.target.data)
//app.globalData.break.appointmentStatus=e.detail.data[0].message.appointmentStatus
}
})
希望能帮助到大家，同时祝愿大家在开发旅途中愉快！！！