草庐IT

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

YuYan_wang 2025-02-10 原文

目录结构

/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]].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之间交互的更多相关文章

  1. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前,我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它,但这似乎不是“ruby方式”,我将需要在不久的将来访问更多模型。这可能会变得很脏,是否有针对这种情况的任何技术?注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展,本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向,这似乎很麻烦。最终从任何

  2. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller,client和test_client。客户端Controller已经构建,我想创建一个test_clientController,我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集,然后呈现客户端Controller的索引View,以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  3. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如,一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情,所以我什至不知道从哪里开始。任何帮助,将不胜感激。谢谢! 最佳答案 无论Rails是什么,几乎所有Web应用程序都有您的要求,大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去,网站不应直接访问彼此

  4. ruby-on-rails - 如何在 ruby​​ 交互式 shell 中有多行? - 2

    这可能是个愚蠢的问题。但是,我是一个新手......你怎么能在交互式ruby​​shell中有多行代码?好像你只能有一条长线。按回车键运行代码。无论如何我可以在不运行代码的情况下跳到下一行吗?再次抱歉,如果这是一个愚蠢的问题。谢谢。 最佳答案 这是一个例子:2.1.2:053>a=1=>12.1.2:054>b=2=>22.1.2:055>a+b=>32.1.2:056>ifa>b#Thecode‘if..."startsthedefinitionoftheconditionalstatement.2.1.2:057?>puts"f

  5. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容? - 2

    我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  6. ruby-on-rails - 如何在 Rails View 上显示错误消息? - 2

    我是rails的新手,想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围,如果不在范围内则返回错误信息。我可以检查上面代码的范围,但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单,一种显示ActiveRecord模型实例属性的表单。c

  7. ruby - #之间? Cooper 的 *Beginning Ruby* 中的错误或异常 - 2

    在Cooper的书BeginningRuby中,第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee

  8. ruby-on-rails - `a ||= b` 和 `a = b if a.nil 之间的区别? - 2

    我正在检查一个Rails项目。在ERubyHTML模板页面上,我看到了这样几行:我不明白为什么不这样写:在这种情况下,||=和ifnil?有什么区别? 最佳答案 在这种特殊情况下没有区别,但可能是出于习惯。每当我看到nil?被使用时,它几乎总是使用不当。在Ruby中,很少有东西在逻辑上是假的,只有文字false和nil是。这意味着像if(!x.nil?)这样的代码几乎总是更好地表示为if(x)除非期望x可能是文字false。我会将其切换为||=false,因为它具有相同的结果,但这在很大程度上取决于偏好。唯一的缺点是赋值会在每次运行

  9. ruby-on-rails - 复数 for fields_for has_many 关联未显示在 View 中 - 2

    目前,Itembelongs_toCompany和has_manyItemVariants。我正在尝试使用嵌套的fields_for通过Item表单添加ItemVariant字段,但是使用:item_variants不显示该表单。只有当我使用单数时才会显示。我检查了我的关联,它们似乎是正确的,这可能与嵌套在公司下的项目有关,还是我遗漏了其他东西?提前致谢。注意:下面的代码片段中省略了不相关的代码。编辑:不知道这是否相关,但我正在使用CanCan进行身份验证。routes.rbresources:companiesdoresources:itemsenditem.rbclassItemi

  10. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

随机推荐