微信小程序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: {

  }
})

上述代碼是個人的一個組件，父頁面引用該組件，並傳遞值到組件，父頁面代碼

 

 上述折疊代碼中，核心代碼如下：

        /*為解決Echarts二次渲染失敗的問題，需要顯式調用initChart方法來重新渲染組件*/
        if (canvas1) {
          initChart(canvas1, width1, height1, dpr1);
        }
       /*為解決Echarts二次渲染失敗的問題，需要顯式調用initChart方法來重新渲染組件*/

 

 JS中，將initChart 的畫布，寬高等屬性對外暴露，並賦值為全局變量，如下

 

 最后，調用上述核心代碼即可重新渲染。

 @天才卧龍的博客