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

目录结构

/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><!-- 引入支付宝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之间交互相关推荐

微信小程序组件、路由、组件通信、侦听器
一.微信小程序组件组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件组件是视图层的基本组成单元. 组件自带一 ...
小程序开发.微信小程序.组件.视图容器
小程序开发.微信小程序中的组件.视图容器组件 note:当前本文编辑中- 20220731 jcLee95 的个人博客邮箱 :291148484@163.com CSDN 主页:https://bl ...
微信小程序与web页面制作的区别
前言最近在做一个微信小程序版的个人博客,本来我还有点胆颤,毕竟也没正儿八经的去学一下,不过我之前接触过,而且web方面(网页制作)的基础还可以,所以斗胆就试一试咯,到今天为止,微信小程序页面终于算是 ...
微信小程序组件库开发记录
微信小程序组件库开发记录背景前言技术选型环境搭建安装 gulp 将`scss`编译为`wxss` 压缩`wxml`,`js`,`json`文件和图片拷贝文件到另一个目录删除目录整合创 ...
java webpack web项目_官方出品，微信小程序和 Web 端同构解决方案——kbone
介绍最近在琢磨一些小程序开发和移动web开发,偶然间在Github上看到了这样一个项目--kbone,一个致力于微信小程序和 Web 端同构的解决方案.微信小程序的底层模型和 Web 端不同,我们想 ...
实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)
实现微信小程序内嵌H5中的下载功能一.项目场景: 难点解决方案: 1.H5微信小程序: a.首先必不可少的是安装jweixin-module模块: b.在main.js中将依赖绑定: c.H5对应 ...
【微信小程序】三、微信小程序组件的基本使用
五.微信小程序组件微信小程序框架为开发者提供了一系列组件,开发者可以通过组合这些组件进行快速开发. (1)微信小程序组件基础概念什么是组件? 组件是视图层的基本组成单元. 组件自带一些功能与微信风 ...
微信小程序与web前端的区别
1 引言刚接触小程序,会有很多错误的思路去编写,为了避免在代码方面出错,本文将对前端和小程序做一个区分. 2 问题描述微信小程序与web前端的区别. 3 算法描述在web的html中我们一般都是 ...
小程序跳到h5页面_微信小程序跳转到H5页面实战篇
有些场景需要从微信小程序跳转到H5页面,通常网上的教程会告诉你使用web-view组件就可以了,但实际开发中还有很多需要注意的地方,尤其是很多概念往往会把初学者弄糊涂了,下面就让我们从概念开始吧!微信 ...
android img标签属性_微信小程序组件叠加效果（如 Android 中的添加蒙层）
实现的效果如下: 可以看出这是由image组件和text组件叠加到一块组成的蒙层效果. 在小程序中实现这个效果主要用到z-index属性和position属性 z-index的使用必须是双方组件都设置 ...

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

目录结构

小程序

组件

web-view

h5

微信小程序组件、web-view、h5之间交互相关推荐

最新文章

热门文章