在手机上怎么制作网站_编程外包_互联网搜索引擎有哪些_4p营销理论

主应用向子应用发送数据 setData

方式1 – 通过动态属性发送

vue

<template><micro-appname='my-app'url='xx':data='dataForChild' // data只接受对象类型，数据变化时会重新发送/>
</template><script>
export default {data () {return {dataForChild: {type: '发送给子应用的数据'}}}
}
</script>

react

/** @jsxRuntime classic */
/** @jsx jsxCustomEvent */
import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event'

<micro-appname='my-app'url='xx'data={this.state.dataForChild} // data只接受对象类型，采用严格对比(===)，当传入新的data对象时会重新发送
/>

方式2 – 手动发送 setData

import microApp from '@micro-zoe/micro-app'// 发送数据给子应用 my-app，setData第二个参数只接受对象类型
microApp.setData('my-app', {type: '新的数据'})

• setData 发送的数据都会被缓存下来，如果数据有变化（只会遍历第一层key）则将新旧值进行合并后发送。

• setData 是异步执行的，多个setData会在下一帧合并为一次执行

• setData 的第三个参数为回调函数，会在数据发送结束后执行

microApp.setData('my-app', {city: 'HK'}, () => {console.log('数据已经发送完成')
})

主应用的强制发送 forceSetData

forceSetData方法拥有和setData一样的参数和行为，唯一不同的是forceSetData会强制发送数据，无论数据是否变化。

// 强制发送数据，无论缓存中是否已经存在 name: 'jack' 的值
microApp.forceSetData('my-app', {name: 'jack'}, () => {console.log('数据已经发送完成')
})

子应用接收主应用发送的数据 getData

方式1 – getData

const data = window.microApp.getData() // 返回主应用下发的data数据

方式2 – 绑定监听函数

// 监听函数
function dataListener (data) {console.log('来自主应用的数据', data)
}// 监听数据变化
window.microApp.addDataListener(dataListener)// 监听数据变化，初始化时如果有数据则主动触发一次
window.microApp.addDataListener(dataListener, true)// 解绑监听函数
window.microApp.removeDataListener(dataListener)// 清空当前子应用的所有绑定函数(全局数据函数除外)
window.microApp.clearDataListener()

• 数据监听函数有返回值时，会作为主应用中 setData 回调函数的入参

  子应用

  window.microApp.addDataListener((data) => {console.log('来自主应用的数据', data)return '返回值1'
  })window.microApp.addDataListener((data) => {console.log('来自主应用的数据', data)return '返回值2'
  })
  

  主应用

  // 返回值会放入数组中传递给setData的回调函数
  microApp.setData('my-app', {city: 'HK'}, (res: any[]) => {console.log(res) // ['返回值1', '返回值2']
  })
  

子应用向主应用发送数据 dispatch

// dispatch只接受对象作为参数
window.microApp.dispatch({type: '子应用发送给主应用的数据'})

• dispatch只接受对象作为参数，它发送的数据都会被缓存下来。

• 数据有变化（只会遍历第一层key）则将新旧值进行合并后发送

• dispatch是异步执行的，多个dispatch会在下一帧合并为一次执行

• dispatch第二个参数为回调函数，它会在数据发送结束后执行

  window.microApp.dispatch({city: 'HK'}, () => {console.log('数据已经发送完成')
  })
  

子应用的强制发送 forceDispatch

forceDispatch方法拥有和dispatch一样的参数和行为，唯一不同的是forceDispatch会强制发送数据，无论数据是否变化。

// 强制发送数据，无论缓存中是否已经存在 name: 'jack' 的值
window.microApp.forceDispatch({name: 'jack'}, () => {console.log('数据已经发送完成')
})

主应用接收子应用发送的数据 getData

方式1 – getData

import microApp from '@micro-zoe/micro-app'const childData = microApp.getData(appName) // 返回子应用的data数据

方式2 – 监听自定义事件 (datachange)

datachange 绑定函数的返回值不会作为子应用dispatch回调函数的入参，它的返回值没有任何作用。

vue

<template><micro-appname='my-app'url='xx'// 数据在事件对象的detail.data字段中，子应用每次发送数据都会触发datachange@datachange='handleDataChange'/>
</template><script>
export default {methods: {handleDataChange (e) {console.log('来自子应用的数据：', e.detail.data)}}
}
</script>

react

/** @jsxRuntime classic */
/** @jsx jsxCustomEvent */
import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event'

<micro-appname='my-app'url='xx'// 数据在event.detail.data字段中，子应用每次发送数据都会触发datachangeonDataChange={(e) => console.log('来自子应用的数据：', e.detail.data)}
/>

方式3 – 绑定监听函数

import microApp from '@micro-zoe/micro-app'// 监听函数
function dataListener (data) {console.log('来自子应用my-app的数据', data)
}// 监听来自子应用my-app的数据
microApp.addDataListener('my-app', dataListener)// 解绑监听my-app子应用的函数
microApp.removeDataListener('my-app', dataListener)// 清空所有监听my-app子应用的函数
microApp.clearDataListener('my-app')

• 当数据监听函数有返回值时，会作为dispatch回调函数的入参

主应用

import microApp from '@micro-zoe/micro-app'microApp.addDataListener('my-app', (data) => {console.log('来自子应用my-app的数据', data)return '返回值1'
})microApp.addDataListener('my-app', (data) => {console.log('来自子应用my-app的数据', data)return '返回值2'
})

子应用

// 返回值会放入数组中传递给dispatch的回调函数
window.microApp.dispatch({city: 'HK'}, (res: any[]) => {console.log(res) // ['返回值1', '返回值2']
})

清空通信数据

通信的数据会被缓存，即便子应用被卸载也不会清空，必要时，需主动清空缓存数据

方式1 – clear-data

主应用中

<micro-app clear-data></micro-app>

子应用卸载时会同时清空主应用发送给当前子应用，和当前子应用发送给主应用的数据。

方式2 – clearData

主应用中

import microApp from '@micro-zoe/micro-app'// 清空主应用发送给子应用 my-app 的数据
microApp.clearData('my-app')

清空当前子应用发送给主应用的数据

子应用中

// 清空当前子应用发送给主应用的数据
window.microApp.clearData()

全局数据通信

向主应用和所有子应用发送数据

发送全局数据

主应用发送全局数据

import microApp from '@micro-zoe/micro-app'// setGlobalData只接受对象作为参数
microApp.setGlobalData({type: '全局数据'})

子应用发送全局数据

// setGlobalData只接受对象作为参数
window.microApp.setGlobalData({type: '全局数据'})

• setGlobalData只接受对象作为参数，它发送的数据都会被缓存下来。
• 数据有变化（只会遍历第一层key）则将新旧值进行合并后发送。
• setGlobalData是异步执行的，多个setGlobalData会在下一帧合并为一次执行
• setGlobalData第二个参数为回调函数，它会在数据发送结束后执行

microApp.setGlobalData({city: 'HK'}, () => {console.log('数据已经发送完成')
})

强制发送 forceSetGlobalData

forceSetGlobalData方法拥有和setGlobalData一样的参数和行为，唯一不同的是forceSetGlobalData会强制发送数据，无论数据是否变化。

// 主应用中--强制发送数据，无论缓存中是否已经存在 name: 'jack' 的值
microApp.forceSetGlobalData({name: 'jack'}, () => {console.log('数据已经发送完成')
})

// 子应用中--强制发送数据，无论缓存中是否已经存在 name: 'jack' 的值
window.microApp.forceSetGlobalData({name: 'jack'}, () => {console.log('数据已经发送完成')
})

接收全局数据

主应用接收全局数据

import microApp from '@micro-zoe/micro-app'// 直接获取数据
const globalData = microApp.getGlobalData() // 返回全局数据function dataListener (data) {console.log('全局数据', data)
}/*** 绑定监听函数* dataListener: 绑定函数* autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false*/
microApp.addGlobalDataListener(dataListener: (data: Object) => any, autoTrigger?: boolean)// 解绑监听函数
microApp.removeGlobalDataListener(dataListener: (data: Object) => any)// 清空主应用绑定的所有全局数据监听函数
microApp.clearGlobalDataListener()

子应用接收全局数据

// 直接获取数据
const globalData = window.microApp.getGlobalData() // 返回全局数据function dataListener (data) {console.log('全局数据', data)
}/*** 绑定监听函数* dataListener: 绑定函数* autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false*/
window.microApp.addGlobalDataListener(dataListener: (data: Object) => any, autoTrigger?: boolean)// 解绑监听函数
window.microApp.removeGlobalDataListener(dataListener: (data: Object) => any)// 清空当前子应用绑定的所有全局数据监听函数
window.microApp.clearGlobalDataListener()

清空全局数据

主应用中清空全局数据

import microApp from '@micro-zoe/micro-app'// 清空全局数据
microApp.clearGlobalData()

子应用中清空全局数据

// 清空全局数据
window.microApp.clearGlobalData()

关闭沙箱后的通信方式

通过手动注册通信对象实现

• 主应用中（为子应用初始化通信对象）

import { EventCenterForMicroApp } from '@micro-zoe/micro-app'// 注意：每个子应用根据appName单独分配一个通信对象
window.eventCenterForAppxx = new EventCenterForMicroApp(appName)

主应用通信方式没有任何变化

• 子应用中

// 直接获取数据
const data = window.eventCenterForAppxx.getData() // 返回data数据function dataListener (data) {console.log('来自主应用的数据', data)
}/*** 绑定监听函数* dataListener: 绑定函数* autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false*/
window.eventCenterForAppxx.addDataListener(dataListener: (data: Object) => any, autoTrigger?: boolean)// 解绑监听函数
window.eventCenterForAppxx.removeDataListener(dataListener: (data: Object) => any)// 清空当前子应用的所有绑定函数(全局数据函数除外)
window.eventCenterForAppxx.clearDataListener()// 子应用向主应用发送数据，只接受对象作为参数
window.eventCenterForAppxx.dispatch({type: '子应用发送的数据'})