第一坑EventChannel通信功能
原生小程序中跳转页面传数据方式如下(官方案例):
wx.navigateTo({
url: 'test?id=1',
events: {
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
})
//test.js
Page({
onLoad: function(option){
console.log(option.query)
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
eventChannel.emit('someEvent', {data: 'test'});
// 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)
})
}
})
如果报错 this.getOpenerEventChannel is not Founction,请在跳转的目标页面对应的json文件中添加{ "usingComponents": {} },并且检查基础库版本在2.7.3以上(具体修改位置在微信开发者工具右上角 详情->本地设置)
注意 在mpvue框架中,获取方式有所不同:
const eventChannel = this.$mp.page.getOpenerEventChannel()
第二坑本地测试号环境请求数据时报错xxxx不在以下 request 合法域名列表中,请参考文档xxxx
最简单临时的解决方法:详情->本地设置->选中 不校验合法域名XXXXX以及HTTPS证书
第三坑image图片资源的引入
在mpvue中
<image src="../../static/wx.jpg"></image>
或者
<image src="/static/wx.jpg"></image>
这两种引用方式都报错,找不到图片 目前我了解的有效的方式只有通过引入:
<template>
<image :src="imgUrl"></image>
</template>
<script>
import imgUrl from '../../static/wx.jpg'
export default {
data(){
return{
imgUrl,
}
}
}
</script>