| | |
| | | ```js |
| | | /** |
| | | * 创建页面选项 |
| | | * @param {Object} dataAdd - 需要添加到 vue data 中的额外数据 |
| | | * @param {Object} [dataAdd] - 需要添加到 vue data 中的额外数据 |
| | | * @returns {Object} 页面选项对象 |
| | | */ |
| | | createOptions(dataAdd) {} |
| | | createOptions(dataAdd = {}) {} |
| | | |
| | | /** |
| | | * 转换静态图片引用 |
| | |
| | | ### 页面能力扩展:跨页面通讯 |
| | | |
| | | Taro 的跨页面通讯能力,仅小程序可用,非小城不能跨页通讯非常不方便 |
| | | 因此,给页面的 Vue 实例,增加了跨页面通讯的方法,兼容所有平台 |
| | | 因此,使用 createOptions 创建合并对象时,给页面的 Vue 实例,增加了跨页面通讯的方法,兼容所有平台 |
| | | |
| | | **跨页发送:$poster** |
| | | |
| | |
| | | |
| | | ### 页面能扩展:跨端通讯 |
| | | |
| | | 当我们进混合 APP 开发时,我们需要与 java 层进行通讯,增加了跨通讯的能力 |
| | | 当我们进混合 APP 开发时,我们需要与 java 层进行通讯,使用 createOptions 创建合并对象时,增加了跨通讯的能力 |
| | | |
| | | (更多跨端通讯明细待续) |
| | | |
| | | ## 转换静态图片引用 |
| | | |
| | | 在目前项目体系设计下,由于不同项目(公众号、小程序、混合app)图片加载机制的不同,设置了一个统一的图片地址转换入口 |
| | | * 移动端的图片不能使用背景,只能使用 image 图片元素 |
| | | * 图片地址需经过静态方法 transAssets 转换而来 |
| | | * createOptions 的参数 dataAdd 中,如果包含 assets 属性,会自动调用 transAssets 全部转换 |
| | | |
| | | 例如: |
| | | |
| | | ```HTML |
| | | <template> |
| | | <image :src="assets.homeNav1" mode="aspectFit" /> |
| | | </template> |
| | | ``` |
| | | |
| | | ```js |
| | | export default { |
| | | name: 'index', |
| | | ...new PIndex().createOptions({ |
| | | // 首页菜单图片,会全部经过 transAssets 进行路径转换,转换为图片实际发布的地址 |
| | | assets: { |
| | | homeNav1: 'assets/img/home-nav-01.png', |
| | | homeNav2: 'assets/img/home-nav-02.png', |
| | | homeNav3: 'assets/img/home-nav-03.png', |
| | | }, |
| | | }), |
| | | }; |
| | | ``` |