目录结构
/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文章来源:https://www.toymoban.com/news/detail-414855.html
<web-view web-view src="{{weburl}}" bindmessage="onMessageHandle">
</web-view>
/pages/web/web.js文章来源地址https://www.toymoban.com/news/detail-414855.html
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>
到了这里,关于微信小程序组件、web-view、h5之间交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!