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

这篇具有很好参考价值的文章主要介绍了微信小程序组件、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文章来源地址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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)

    微信小程序的开发框架是uniapp,使用uniapp脚手架搭建,其中有页面是展示另一个小程序,在这个页面主体内容使用了标签将H5的页面内容展示,H5中有页面存放了下载的路径。点击下载按钮下载文件,或者预览文件让用户手动保存。 如果是pc端,下载用一个 a 标签就很容易,但

    2024年02月10日
    浏览(148)
  • 关于微信小程序<web-view>组件跳转报错问题-解决!

    报错以上的问题 尝试了好久--发现的问题-官网上文章看完了也没有看到   当点击 itemClick1 的时候 就报以上的 错误 当点击 itemClick2 的时候就能成功 跳转 原因是:  itemClick1和当前跳转的位置是同级,应该是web-view组件不能跳转到同级以外的地方! 总结:  所有想要使用 web-view 组

    2024年02月16日
    浏览(56)
  • uniapp微信小程序在web-view嵌入的uniapp H5页面中预览word文件

    在小程序中预览文件可以使用uni.uploadFile下载后再uni.openDocument打开预览,但uni.openDocument API是不支持H5的,这时候可能会想到使用微软在线预览,但是实际出来的效果会存在各种兼容性问题。因此我们需要在h5页面中跳回小程序然后走小程序的预览文件逻辑。

    2024年02月11日
    浏览(67)
  • 微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?

     微信小程序appId查看方法: 1)有后台登录权限的情况下:登录微信公众平台后, 微信公众平台 微信公众平台,给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。 https://mp.weixin.qq.com/ 点击右上角logo,在“帐号信息”中找到AppID(小程序ID) 2)没有后台登录权

    2024年02月11日
    浏览(81)
  • 微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?

    1)找到企业ID,登录 企业微信 企业微信 https://work.weixin.qq.com/wework_admin/loginpage_wx  2)找到接入链接  功能-客服-微信客服 微信公众平台,给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。 https://mp.weixin.qq.com/

    2024年02月11日
    浏览(68)
  • 微信小程序web-view上覆盖原生组件,解决cover-view点击事件无法触发问题

    结合了以下文章,都没有找到办法 https://blog.csdn.net/WEIGUO19951107/article/details/94305964 https://blog.csdn.net/weixin_39461487/article/details/80075140 https://developers.weixin.qq.com/community/develop/doc/cbd33199b42aec724e54419ebe6371d7 图片显示是这个文章给我了参考,并且成功 https://blog.csdn.net/one_girl/article/deta

    2024年02月11日
    浏览(55)
  • 微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径

    index.wxml  index.js 在H5项目的App.vue页面获取参数实现自动跳转到对应页面,包括携带的参数值

    2024年02月12日
    浏览(74)
  • 小程序内嵌web-view,web-view与微信小程序通信传值

    小程序内部嵌套web-view,所有业务逻辑都在h5页面中处理;现在需要通过 转发分享好友 来实现绑定邀请人这个功能。 需要在小程序触发分享操作,来获取网页向小程序端传递的数据。 网页端 安装微信sdk包 引入 使用 小程序端 通过更改当前web-view的URL来实现。

    2024年01月15日
    浏览(67)
  • 微信小程序web-view跳转

    h5项目中跳转外部连接可使用的web-view标签解决 官网连接:web-view | 微信开放文档 1.添加事件 2.新页面中的跳转链接(一行即可,默认会会自动铺满整个小程序页面) src就是路径,写需要跳转的网页地址即可! 3.配置路由,app.jason中 4.小程序后台配置域名 开发管理=开发设置=业务域名中

    2024年02月11日
    浏览(69)
  • 微信小程序如何使用web-view

           有时我们的业务需求是小程序内部跳转到其他h5项目的页面,这是我们就会用到web-view标签,这个标签可以帮助我们完成h5页面的渲染。下面,就是使用方法: 第一步: 首先现在小程序建一个新的page用来使用web-view  在wxml文件中写入web-view标签,src属性为你要跳转h5线

    2024年02月14日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包