支付宝小程序组件 web-view h5交互

最新推荐文章于 2026-01-05 01:13:15 发布

原创最新推荐文章于 2026-01-05 01:13:15 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #支付宝小程序 #小程序组件 #小程序与h5交互

小程序专栏收录该内容

2 篇文章

订阅专栏

本文介绍了支付宝小程序中组件的使用，包括子组件与父组件的通信，以及如何通过`web-view`与H5页面进行交互。通过示例展示了`index-page`组件的结构，`onFun`方法的调用，以及H5如何通过`my.postMessage`传递消息给小程序，并在小程序中接收并处理这些消息。

目录结构

/component
    /index-page
        /index.js
        /index.acss
        /index.axml
        /index.json
/pages
    /index
        /index.acss
        /index.axml
        /index.js
        /index.json
    /web
        /web.acss
        /web.axml
        /web.js
        /web.json

支付宝小程序

/pages/index/index.axml

<cny-index-page id="{{id}}"  arr="{{arr}}" ref="saveRef" onFun="onFun"   />

/pages/index/index.js

Page({
   data: {
    id:'',
    arr:[],
    
  },
  onLoad(query) {
     
     // 调用子组件方法
     this.ref.music_click();


     // 子组件的变量只能通过xml进行传递

  },
  onReady() {
    // 页面加载完成
  },
  onShow() {
    // 页面显示
    
  },
  onHide() {
    // 页面隐藏
  },
  onUnload() {
    // 页面被关闭
  },
  onTitleClick() {
    // 标题被点击
  },
  onPullDownRefresh() {
    
  },
  onReachBottom() {
    // 页面被拉到底部
  },
  onShareAppMessage() {
    // 返回自定义分享信息
    
  },
  onFun(){

      // 子调用父
  },
  // 父调用子
  saveRef(ref){
      // 将ref存起来，在想要调用的地方使用
      this.ref = ref
  },

});

/pages/index/index.json

{
 
  "usingComponents": {
    "index-page": "/component/index-page/index"    // 引入组件
  }
}

组件

/component/index-page/index.axml

<view></view>

/component/index-page/index.js

Component({

	/**
	 * 组件的初始数据
	 */
	data: {
		

	},
	// 父传子组件 给值默认值
	props: {
		id: Number, // 活动ID
		arr: Object, // 加载数据
		onFun: () => {}, // 用户定位
	},
    // 在组件创建时触发
	onInit() {
        // 页面初始化加载
        
        // 使用父级变量
        this.props.id

        // 使用父级方法
        this.props.onFun()

	},
    // 自定义组件首次渲染完毕后的回调
	didMount() {
	     
	},
    // 自定义组件被卸载后的回调
	didUnmount() {

	},

	/**
	 * 组件的方法列表
	 */
	methods: {
        // 播放音乐
        music_click(){
            
        }

	}
})

/component/index-page/index.json

{
  "allowsBounceVertical": "NO"
}

web-view

/pages/web/web.axml

<web-view src="{{weburl}}"onMessage="onmessage">
</web-view>

/pages/web/web.js

Page({
	data: {
		weburl: '',

	},
	onLoad(options) {

	},
	//监听来自于h5页面的消息  
	onmessage(e) {
		// e.detail.变量
		var music = e.detail.music;
		// 获取所有页面
		var pages = getCurrentPages();
		for (var i = 0; i < pages.length; ++i) {
			var currentPage = pages[i];;
			let currentPage_url = currentPage.route;
			if (currentPage_url == 'pages/theme/theme') {
				// 操作该页面的数据
				currentPage.onFun()

				if(music == 'music'){
				    // 操作该页面子组件的方法
				    currentPage.ref.music_click();
                }

				break;
			}

		}

	},
});

h5

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>h5 向支付宝小程序传参数</title>
		<!-- 引入支付宝js -->
		<script type="text/javascript" src="https://appx/web-view.min.js" rel="external nofollow"  ></script>
		<script>
			// 保留当前页面，跳转到新页面。
			my.navigateTo({
				url: '/pages/theme/theme?rid=2941&lid='+vifnn.lid+'&fromname=mini' //路径可以使用相对路径或绝对路径的方式进行传递
			})
			
			// 是关闭当前页面，返回上一级或多级页面的 API。
			my.navigateBack()
			
			// 传参数
			my.postMessage({
				music: 'music',
			});
		</script>
	</head>
	<body>
	</body>
</html>