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

目录结构

/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

/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

 /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

/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