微信小程序Echarts 二次渲染失败 及 组件监听父页面传递值的变化 及 wx.navigateBack 目标页面Onload 不加载问题
作者：互联网
十年河东，十年河西，莫欺少年穷
学无止境，精益求精
我其实是一个Net后台开发，后来学会了物联网开发及网络编程，再后来学会了VUE及熟悉了React，现在我又做起了小程序开发，
学会小程序我只用了三周时间，期间学了Flex布局/Position定位，微信官方文档，哔哩哔哩视频教程,、ES6等
人呐，必须充实自己，挑战自我
1、 wx.navigateBack 跳转，目标页面OnLoad不加载问题。 https://www.cnblogs.com/chenwolong/p/15582100.html
// wx.navigateBack({
// delta: 1
// })
上述代码，跳转至目标页面后，目标页面onload事件不执行，要解决此问题，需改为：
wx.navigateBack({
delta: 1,
success: function (e) {
var page = getCurrentPages().pop();
if (page == undefined || page == null) return;
page.onLoad();
}
})
2、 组件监听父页面传递值的变化 observer: function (newValue, oldValue) 。
Component({
/**
* 组件的属性列表
*/
properties: {
sucesslvData: {
type: Array,
value: [],
observer: function (newValue, oldValue) {
let that = this;
//console.log(newValue)
data = newValue;
var nowTime = dayjs().format("YYYY-MM-DD");
let day = dayjs(nowTime).format("DD") + '日';
let ef = data.filter(A => A.X == day);
//console.log(ef)
if (ef && ef.length > 0) {
that.setData({
TodayInfo: ef[0].Y + "%"
})
}
if (canvas1) {
initChart(canvas1, width1, height1, dpr1);
}
}
}
},
/**
* 组件的初始数据
*/
data: {
ec: {
onInit: initChart
},
TodayInfo: ""
},
lifetimes: {
attached: function () {
}
},
/**
* 组件的方法列表
*/
methods: {
}
})
重点代码：
sucesslvData: {
type: Array,
value: [],
observer: function (newValue, oldValue) { //侦听父页面传递值的变化
通过 observer 方法，我们可以监听父页面传值的变化，当父页面因传递不同参数请求接口，导致父页面传递值变化时，可做到及时侦听并更新子组件数据。
父页面示例代码：
<sucesslv title="最近7天换电成功率" sucesslvData="{{sucesslvData}}"></sucesslv>
传递的值为：sucesslvData
3、解决Ecahts二次渲染失败的问题。
var dayjs = require('dayjs')
import * as echarts from '../../pages/ec-canvas/echarts';
// 数据
var data = [{
X: "12日",
Y: 100
}, {
X: "13日",
Y: 100
}, {
X: "14日",
Y: 100
}, {
X: "15日",
Y: 100
}, {
X: "16日",
Y: 100
}, {
X: "17日",
Y: 100
}, {
X: "18日",
Y: 100
}]
// 存储住首次调用函数的参数 方便后续调用时传参取值
var unit = '%'
var canvas1 = ''
var width1 = ''
var height1 = ''
var dpr1 = ''
function initChart(canvas, width, height, dpr) {
canvas1 = canvas
width1 = width
height1 = height
dpr1 = dpr
const chart = echarts.init(canvas, null, {
width: 375,
height: height,
devicePixelRatio: dpr
});
canvas.setChart(chart);
var option = {
color: "#6c5ce7",
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: "8%",
},
xAxis: [{
type: 'category',
data: data.map(A => A.X),
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '换电次数',
type: 'bar',
barWidth: '60%',
data: data.map(A => A.Y),
}]
};
chart.setOption(option);
return chart;
//柱状图
}
Component({
/**
* 组件的属性列表
*/
properties: {
title: {
type: String,
value: ""
},
changeData: {
type: Array,
value: [],
observer: function (newValue, oldValue) {
let that = this;
data = newValue;
var nowTime = dayjs().format("YYYY-MM-DD");
let day = dayjs(nowTime).format("DD") + '日';
let ef = data.filter(A => A.X == day);
if (ef && ef.length > 0) {
that.setData({
TodayInfo: ef[0].Y + "次"
})
}
/*为解决Echarts二次渲染失败的问题，需要显式调用initChart方法来重新渲染组件*/
if (canvas1) {
initChart(canvas1, width1, height1, dpr1);
}
/*为解决Echarts二次渲染失败的问题，需要显式调用initChart方法来重新渲染组件*/
}
}
},
/**
* 组件的初始数据
*/
data: {
ec: {
onInit: initChart
},
TodayInfo: ""
},
lifetimes: {
attached: function () {
// 在组件实例进入页面节点树时执行
}
},
/**
* 组件的方法列表
*/
methods: {
}
})
View Code
上述代码是个人的一个组件，父页面引用该组件，并传递值到组件，父页面代码
上述折叠代码中，核心代码如下：
/*为解决Echarts二次渲染失败的问题，需要显式调用initChart方法来重新渲染组件*/
if (canvas1) {
initChart(canvas1, width1, height1, dpr1);
}
/*为解决Echarts二次渲染失败的问题，需要显式调用initChart方法来重新渲染组件*/
JS中，将initChart 的画布，宽高等属性对外暴露，并赋值为全局变量，如下
最后，调用上述核心代码即可重新渲染。
@天才卧龙的博客
标签：Onload,ef,navigateBack,initChart,组件,var,data,页面 来源： https://www.cnblogs.com/chenwolong/p/15625564.html