1200字范文 > 微信小程序组件 web-view h5之间交互

微信小程序组件 web-view h5之间交互

时间：2020-10-09 21:23:37

目录结构

/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]].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

<!DOCTYPE html><html><head><meta charset="utf-8"><title>h5 向支付宝小程序传参数</title><script src="https://res./open/js/jweixin-1.6.0.js"></script><script>// 无解的是，只有当页面小程序后退、组件销毁、分享时数据才能触发message事件，进行传输数据，其他不能// 这种只能符合新开页面进行修改数据，然后修改成功进行回退使用wx.miniProgram.postMessage({data: {foo: 'bar'} })</script></head><body></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。