收藏
回答

小程序page外setData?

问题模块 框架类型 问题类型 终端类型 微信版本 基础库版本
框架 小程序 Bug 客户端 6.53 2.20

- 当前 Bug 的表现(可附上截图)


- 预期表现


- 复现路径


- 提供一个最简复现 Demo



,最近再做echarts,官网的demo所有的initCharts全在page页面外,在page页面外的函数获取数据后,想渲染在页面上,但是不能用that.set.急急急
急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急

回答关注问题邀请回答
收藏

2 个回答

  • 灰太狼
    灰太狼
    2019-06-27

    不想传this就用箭头函数呗

    2019-06-27
    赞同
    回复 9
    • 永恒的希望
      永恒的希望
      2019-06-27

      麻烦上下代码

      2019-06-27
      回复
    • 灰太狼
      灰太狼
      2019-06-27回复永恒的希望





      不好意思,纯箭头函数this为undefined,传入this才可以正常使用page上下文

      2019-06-27
      回复
    • 永恒的希望
      永恒的希望
      2019-06-27回复灰太狼

      帅哥,谢谢你啊,我这个方法是echart官网demo,他的initChart方法就在page外,并且不是靠onload调用的方法,是不能传参数的.我给你看源码

      import * as echarts from '../../ec-canvas/echarts';
      import geoJson from './mapData.js';
      var textObj;
      const app = getApp();
       
      function initChart(canvas, width, height) {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(chart);
       
        echarts.registerMap('henan', geoJson);
       
        const option = {
          tooltip: {
            trigger: 'item'
          },
       
          visualMap: {
            min: 0,
            max: 100,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本,默认为数值文本
            calculable: true
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },
          series: [{
            type: 'map',
            mapType: 'henan',
            label: {
              normal: {
                show: true
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
       
              normal: {
                borderColor: '#389BB7',
                areaColor: '#fff',
              },
              emphasis: {
                areaColor: '#389BB7',
                borderWidth: 0
              }
            },
            animation: false,
       
            data: [
              { name: '郑州市', value: 100 },
              { name: '洛阳市', value: 10 },
              { name: '开封市', value: 20 },
              { name: '信阳市', value: 30 },
              { name: '三门峡市', value: 35 },
              { name: '济源市', value: 35 },
              { name: '焦作市', value: 35 },
              { name: '安阳市', value: 35 },
              { name: '鹤壁市', value: 35 },
              { name: '濮阳市', value: 35 },
              { name: '开封市', value: 45 }
            ]
       
          }],
       
        };
       
        chart.setOption(option);
        chart.on('click', function (param) {
          var name = param.data.name;
          var value = param.data.value;
          //在这里报错,报setData没这个方法 (this,that都试过)
          this.setData({
            name: name,
            value:value
            }
            )
       
        });
        return chart;
      }
       
      Page({
        onShareAppMessage: function (res) {
          return {
            title: 'ECharts 可以在微信小程序中使用啦!',
            path: '/pages/index/index',
            success: function () { },
            fail: function () { }
          }
        },
        data: {
          ec: {
            onInit: initChart
          },
          name:'',
          value:''
       
        },
       
        onReady() {
        }
      });


      2019-06-27
      回复
    • 怨恨LOVE
      怨恨LOVE
      2019-06-27

       //在这里报错,报setData没这个方法 (this,that都试过)

          this.setData({


      this后面这么大一个空格怎么可能成功啊

      2019-06-27
      回复
    • 灰太狼
      灰太狼
      2019-06-27回复永恒的希望

      特地下载了下,官方给的示例没有给地图绑定事件,但是官方文档中绑定事件与事件处理不是这么直接this.setData进行数据处理的,https://echarts.baidu.com/api.html#action,他是通过dispatchAction触发action弄得,你在研究研究events和actions

      2019-06-27
      回复
    查看更多(4)
  • 祺爸💎
    祺爸💎
    2019-06-27

    把this作为参数传进去

    2019-06-27
    赞同
    回复 3
    • 永恒的希望
      永恒的希望
      2019-06-27

      我用的是echart官网的demo,initCharts方法里用this是不行的,我可以把源码给你看看

      import * as echarts from '../../ec-canvas/echarts';
      import geoJson from './mapData.js';
       
      const app = getApp();
       
      function initChart(canvas, width, height) {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(chart);
       
        echarts.registerMap('henan', geoJson);
       
        const option = {
          tooltip: {
            trigger: 'item'
          },
       
          visualMap: {
            min: 0,
            max: 100,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本,默认为数值文本
            calculable: true
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },
          series: [{
            type: 'map',
            mapType: 'henan',
            label: {
              normal: {
                show: true
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
       
              normal: {
                borderColor: '#389BB7',
                areaColor: '#fff',
              },
              emphasis: {
                areaColor: '#389BB7',
                borderWidth: 0
              }
            },
            animation: false,
       
            data: [
              { name: '郑州市', value: 100 },
            ]
       
          }],
       
        };
       
        chart.setOption(option);
        chart.on('click', function (param) {
          var name = param.data.name;
          var value = param.data.value;
          //在这里报错,报setData没这个方法 (this,that都试过)
          this.setData({
            name: name,
            value:value
            }
            )
       
        });
        return chart;
      }
       
      Page({
        onShareAppMessage: function (res) {
          return {
            title: 'ECharts 可以在微信小程序中使用啦!',
            path: '/pages/index/index',
            success: function () { },
            fail: function () { }
          }
        },
        data: {
          ec: {
            onInit: initChart
          },
          name:'',
          value:''
       
        },
       
        onReady() {
        }
      });


      2019-06-27
      回复
    • 烧饼
      烧饼
      2019-07-02

      方法很多呀。最野的就是

      //页外页面指针
      let that = null;
       
      function initChart(canvas, width, height){
          //...省略...
          chart.on('click', function (param) {
              that.setData({
                  name: name,
                  value: value
              });
          });
          //...省略...
      }
       
      Page({
          //...省略...
          onLoad(){
              that = this;    //页外保存page指针
          },
          onUnload(){
              that = null;    //记得释放
          }
          //...省略...
      });

      你是在页面用的,这个基本都能搞定,但是不优雅。



      最好就在Page onLoad时才把ec这个对象setData进去,这个时候就能拿到页面的this指针。(没仔细研究过echarts,不确定onLoad时setData能否生效)。


      function initChart(page, canvas, width, height){
          chart.on('click', function (param) {
              page.setData({
                  name: name,
                  value: value
              });
          });
      }
       
      Page({
          onLoad(){
              let warpped = (function(that){
                  return function(){
                      let context = this; //保存调用者的上下文
                      initChart.apply(context, [].concat([that], arguments)); //切换为调用者的上下文调用,并把that指针传入initCharts
                  }
              })(this);
       
              this.setData({
                  ec: {
                      onInit: warpped
                  }
              });
          }
      });


      2019-07-02
      回复
    • WF He
      WF He
      02-16
      大哥!!,请问下我想把page内的data数据传到function里该怎么操作啊?
      02-16
      回复
登录 后发表内容