朱工

朱工 查看完整档案

福州编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

朱工 提出了问题 · 2019-08-16

求解答一下python方法的返回

有这样一个方法:

def moving_average(a, w=10):
    if len(a) < w: 
        return a[:]    
    return [val if idx < w else sum(a[(idx-w):idx])/w for idx, val in enumerate(a)]

我想知道这个返回后面是什么意思,求详细说明下,if else ,for迭代我都懂,但是还是看不懂

关注 4 回答 3

朱工 回答了问题 · 2019-01-08

ajax请求传中文字符给后台,返回乱码

中文乱码好弄吧,要么配置文件统一弄,要么在字符那里统一设置。

关注 5 回答 4

朱工 回答了问题 · 2019-01-08

两个月的时间,java ee和android哪个好入门?

肯定是java ee比较快。 我做java7年了,自学android还是觉得很麻烦,安卓东西很多,日志文件太大。

java程序一般就是100行日志,哪里有错,一眼就能看到,安卓太多日志,看不过来,有时候有错误运行发现也没问题,反正感觉是有点乱。

关注 6 回答 6

朱工 回答了问题 · 2019-01-08

解决生产环境,是一台性能更强大的服务器好,还是多台性能相对较小的服务器更好。

如果说高并发的程度一般,且用户量不是特别大的话,用一台机器当然好,方便,易操作。

如果是真正的大并发,难道要用超级电脑?

关注 5 回答 4

朱工 回答了问题 · 2019-01-08

Weex 初始化项目就报错

不清楚,可以node weex toolkit重装试试

关注 4 回答 4

朱工 提出了问题 · 2019-01-08

我用weex-devtool命令开始调试,出现的页面

clipboard.png

这个图片是我输入weex-devtool命令或者 weex debugx命令的图片

用官方的weex debug命令得到:

clipboard.png

我之前都是用weex-devtool命令,得到的是devlist页面,还有个二维码,然后手机连接测试后,debug运行app,则会启动调试页面,出现两栏,现在升级了node和weex toolkit,就不知道怎么不太对了。

关注 2 回答 1

朱工 收藏了文章 · 2019-01-04

在weex里面使用chart图表

weex web端使用chart图表简单,但原生端使用起比较坑,原生没有dom等问题,echart没办法在weex里面显示。

最近看到一篇文章 《聊一聊 F2 与小程序》,里面封装的思路给了启发,打算使用 @antv f2 + gcanvas 在weex里面使用chart图表。

1.首先使用weex-toolkit新建项目,如果项目存在跳过次步骤。

2.需要npm三个包

npm install @antv/f2 -s
npm install wolfy87-eventemitter -s
npm install gcanvas.js -s

gcanvas.js 是类似于 H5 Canvas 标准的 JavaScript API


3.F2 默认的运行环境是 HTML5,需要使用 <canvas> 标签,GCanvas 和 canvas 完全是匹配的。
按照封装的思路新建renderer.js文件

import EventEmitter from 'wolfy87-eventemitter';

export default class Renderer extends EventEmitter {
  constructor(myCtx) {
    super();
    const self = this;
    self.ctx = myCtx;
    self.style = {}; // just mock
    // self._initContext(myCtx);
  }
  getContext(type) {
    if (type === '2d') {
      return this.ctx;
    }
  }
}

4.再新建个chart.js,对缺失的API进行mock

import Renderer from './renderer';
import F2 from '@antv/f2';

function strLen(str) {
  let len = 0;
  for (let i = 0; i < str.length; i++) {
    if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
      len++;
    } else {
      len += 2;
    }
  }

  return len;
}
// 由于GCanvas不支持 measureText 方法,故用此方法 mock
F2.Util.measureText = function (text, font) {
  let fontSize = 12;
  if (font) {
    fontSize = parseInt(font.split(' ')[3], 10);
  }
  fontSize /= 2;
  return {
    width: strLen(text) * fontSize
  };
};

由于weex的手势的回调是changedTouches,需要修改下createEvent来处理坐标。

F2.Util.createEvent = function (event, chart) {
  const pixelRatio = chart.get('pixelRatio') || 1;
  const type = event.type;
  let x = 0;
  let y = 0;
  const touches = event.changedTouches;
  if (touches && touches.length > 0) {
    x = touches[0].pageX;
    y = touches[0].pageY;
  }

  return {
    type,
    chart,
    x: x * pixelRatio,
    y: y * pixelRatio
  };
};

另外weex的像素比和H5不一样,在weex渲染出来的字体和线条非常小,需要修改整体的样式。

const color1 = '#E8E8E8'; // 坐标轴线、坐标轴网格线的颜色
const color2 = '#333333'; // 字体颜色
// 坐标轴的默认样式配置
const defaultAxis = {
  label: {
    fill: color2,
    fontSize: 24
  }, // 坐标轴文本的样式
  line: {
    stroke: color1,
    lineWidth: 1,
    top: true
  }, // 坐标轴线的样式
  grid: {
    stroke: color1,
    lineWidth: 1,
    lineDash: [ 2 ]
  }, // 坐标轴网格线的样式
  tickLine: null, // 坐标轴刻度线,默认不展示
  labelOffset: 7.5 // 坐标轴文本距离坐标轴线的距离
};

const DEFAULT_CFG = {
  itemMarginBottom: 12,
  itemGap: 10,
  showTitle: false,
  titleStyle: {
    fontSize: 26,
    fill: color2,
    textAlign: 'start',
    textBaseline: 'top'
  },
  nameStyle: {
    fill: color2,
    fontSize: 24,
    textAlign: 'start',
    textBaseline: 'middle'
  },
  valueStyle: {
    fill: color2,
    fontSize: 24,
    textAlign: 'start',
    textBaseline: 'middle'
  },
  unCheckStyle: {
    fill: '#bfbfbf'
  },
  itemWidth: 'auto',
  wordSpace: 6,
  selectedMode: 'multiple' // 'multiple' or 'single'
};

const Theme = {
  fontFamily: '"Helvetica Neue", "San Francisco", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", sans-serif', // 默认字体
  defaultColor: '#1890FF', // 默认颜色
  pixelRatio: 1, // 默认像素比,具体参数由用户自己设置
  padding: 'auto', // 图表边距,默认自动计算
  appendPadding: 18, // 默认留白,15 像素
  colors: [
    '#1890FF',
    '#2FC25B',
    '#FACC14',
    '#223273',
    '#8543E0',
    '#13C2C2',
    '#3436C7',
    '#F04864'
  ], // 默认色系
  shapes: {
    line: [ 'line', 'dash' ],
    point: [ 'circle', 'hollowCircle' ]
  },
  sizes: [ 4, 10 ], // 默认的大小范围
  axis: {
    bottom: F2.Util.mix({}, defaultAxis, {
      grid: null
    }), // 底部坐标轴配置
    left: F2.Util.mix({}, defaultAxis, {
      line: null
    }), // 左侧坐标轴配置
    right: F2.Util.mix({}, defaultAxis, {
      line: null
    }), // 右侧坐标轴配置
    circle: F2.Util.mix({}, defaultAxis, {
      line: null
    }), // 极坐标下的圆弧坐标轴配置
    radius: F2.Util.mix({}, defaultAxis, {
      labelOffset: 4
    }) // 极坐标下的半径坐标轴配置
  }, // 各种坐标轴配置
  shape: {
    line: {
      lineWidth: 2, // 线的默认宽度
      lineJoin: 'round',
      lineCap: 'round'
    }, // 线图样式配置
    point: {
      lineWidth: 0,
      size: 3 // 圆的默认半径
    }, // 点图样式配置
    area: {
      fillOpacity: 0.1
    } // 区域图样式配置
  },
  legend: {
    right: F2.Util.mix({}, DEFAULT_CFG),
    left: F2.Util.mix({}, DEFAULT_CFG),
    top: F2.Util.mix({}, DEFAULT_CFG),
    bottom: F2.Util.mix({}, DEFAULT_CFG),
    marker: {
      symbol: 'circle', // marker 的形状
      radius: 10 // 半径大小
    }
  },
  tooltip: {
    triggerOn: [ 'touchstart', 'touchmove' ],
    // triggerOff: 'touchend',
    showTitle: false,
    showCrosshairs: false,
    crosshairsStyle: {
      stroke: 'rgba(0, 0, 0, 0.25)',
      lineWidth: 2
    },
    showTooltipMarker: true,
    background: {
      radius: 1,
      fill: 'rgba(0, 0, 0, 0.65)',
      padding: [ 3, 5 ]
    },
    titleStyle: {
      fontSize: 26,
      fill: '#fff',
      textAlign: 'start',
      textBaseline: 'top'
    },
    nameStyle: {
      fontSize: 26,
      fill: 'rgba(255, 255, 255, 0.65)',
      textAlign: 'start',
      textBaseline: 'middle'
    },
    valueStyle: {
      fontSize: 26,
      fill: '#fff',
      textAlign: 'start',
      textBaseline: 'middle'
    },
    showItemMarker: true,
    itemMarkerStyle: {
      radius: 5,
      symbol: 'circle',
      lineWidth: 1,
      stroke: '#fff'
    },
    layout: 'horizontal'
  },
  _defaultAxis: defaultAxis // 用于获取默认的坐标轴配置
};

F2.Global.setTheme(Theme);

最后为F2添加一个Renderer类。

F2.Renderer = Renderer;
export default F2;

接下来我们就可以写个DEMO把图表渲染出来了。

<gcanvas ref="canvas_1" style="width:750px;height:400px;"></gcanvas>
import {enable, WeexBridge, Image as GImage} from "gcanvas.js";
import F2 from './chart';
setBarChart() {
  let ref = this.$refs.canvas_1;
  ref = enable(ref, {bridge: WeexBridge});
  let ctx = ref.getContext("2d");
  const canvas = new F2.Renderer(ctx); //使用封装好的Renderer类匹配canvas上下文
  const chart = new F2.Chart({
    el: canvas, // 将第三步创建的 canvas 对象的上下文传入
    width: 750, // 必选,图表宽度,同 canvas 的宽度相同
    height: 400 // 必选,图表高度,同 canvas 的高度相同
  });
  chart.source(data1);
  // Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
  chart.interval().position('genre*sold').color('genre');
  chart.legend('genre', {
    marker: {
      radius: 6 // 半径大小
    }
  });
  // Step 4: 渲染图表
  chart.render();
}

启起来后用palyground扫描一下就能看效果了。这是因为palyground已经集成GCanvas sdk了。如果你的weex应用没有集成GCanvas sdk,也是渲染不了的,集成方法在这里GCanvas

图片描述

图表使用方法参考@antv F2,基本上H5能画的图表,weex都能画,只是一些使用Dom的功能不能使用,比如:tooltip ,所以写了 tooltip 方法去touchstart

touchstart(ev) {
                const plot = this.chart.get('plotRange');
                const { x, y } = F2.Util.createEvent(ev, this.chart);
                /*if (!(x >= plot.tl.x && x <= plot.tr.x && y >= plot.tl.y && y <= plot.br.y)) { // not in chart plot
                  this.chart.hideTooltip();
                  return;
                }*/
                const lastTimeStamp = this.timeStamp;
                const timeStamp = +new Date();
                if ((timeStamp - lastTimeStamp) > 16) {
                    this.chart.showTooltip({ x, y });
                    this.timeStamp = timeStamp;
                }
            },
            touchend(ev){
                this.chart.hideTooltip();
            }

详细的demo在此,

封装比较简单,主要还是F2多端支持不错。

查看原文

朱工 赞了文章 · 2019-01-04

在weex里面使用chart图表

weex web端使用chart图表简单,但原生端使用起比较坑,原生没有dom等问题,echart没办法在weex里面显示。

最近看到一篇文章 《聊一聊 F2 与小程序》,里面封装的思路给了启发,打算使用 @antv f2 + gcanvas 在weex里面使用chart图表。

1.首先使用weex-toolkit新建项目,如果项目存在跳过次步骤。

2.需要npm三个包

npm install @antv/f2 -s
npm install wolfy87-eventemitter -s
npm install gcanvas.js -s

gcanvas.js 是类似于 H5 Canvas 标准的 JavaScript API


3.F2 默认的运行环境是 HTML5,需要使用 <canvas> 标签,GCanvas 和 canvas 完全是匹配的。
按照封装的思路新建renderer.js文件

import EventEmitter from 'wolfy87-eventemitter';

export default class Renderer extends EventEmitter {
  constructor(myCtx) {
    super();
    const self = this;
    self.ctx = myCtx;
    self.style = {}; // just mock
    // self._initContext(myCtx);
  }
  getContext(type) {
    if (type === '2d') {
      return this.ctx;
    }
  }
}

4.再新建个chart.js,对缺失的API进行mock

import Renderer from './renderer';
import F2 from '@antv/f2';

function strLen(str) {
  let len = 0;
  for (let i = 0; i < str.length; i++) {
    if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
      len++;
    } else {
      len += 2;
    }
  }

  return len;
}
// 由于GCanvas不支持 measureText 方法,故用此方法 mock
F2.Util.measureText = function (text, font) {
  let fontSize = 12;
  if (font) {
    fontSize = parseInt(font.split(' ')[3], 10);
  }
  fontSize /= 2;
  return {
    width: strLen(text) * fontSize
  };
};

由于weex的手势的回调是changedTouches,需要修改下createEvent来处理坐标。

F2.Util.createEvent = function (event, chart) {
  const pixelRatio = chart.get('pixelRatio') || 1;
  const type = event.type;
  let x = 0;
  let y = 0;
  const touches = event.changedTouches;
  if (touches && touches.length > 0) {
    x = touches[0].pageX;
    y = touches[0].pageY;
  }

  return {
    type,
    chart,
    x: x * pixelRatio,
    y: y * pixelRatio
  };
};

另外weex的像素比和H5不一样,在weex渲染出来的字体和线条非常小,需要修改整体的样式。

const color1 = '#E8E8E8'; // 坐标轴线、坐标轴网格线的颜色
const color2 = '#333333'; // 字体颜色
// 坐标轴的默认样式配置
const defaultAxis = {
  label: {
    fill: color2,
    fontSize: 24
  }, // 坐标轴文本的样式
  line: {
    stroke: color1,
    lineWidth: 1,
    top: true
  }, // 坐标轴线的样式
  grid: {
    stroke: color1,
    lineWidth: 1,
    lineDash: [ 2 ]
  }, // 坐标轴网格线的样式
  tickLine: null, // 坐标轴刻度线,默认不展示
  labelOffset: 7.5 // 坐标轴文本距离坐标轴线的距离
};

const DEFAULT_CFG = {
  itemMarginBottom: 12,
  itemGap: 10,
  showTitle: false,
  titleStyle: {
    fontSize: 26,
    fill: color2,
    textAlign: 'start',
    textBaseline: 'top'
  },
  nameStyle: {
    fill: color2,
    fontSize: 24,
    textAlign: 'start',
    textBaseline: 'middle'
  },
  valueStyle: {
    fill: color2,
    fontSize: 24,
    textAlign: 'start',
    textBaseline: 'middle'
  },
  unCheckStyle: {
    fill: '#bfbfbf'
  },
  itemWidth: 'auto',
  wordSpace: 6,
  selectedMode: 'multiple' // 'multiple' or 'single'
};

const Theme = {
  fontFamily: '"Helvetica Neue", "San Francisco", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", sans-serif', // 默认字体
  defaultColor: '#1890FF', // 默认颜色
  pixelRatio: 1, // 默认像素比,具体参数由用户自己设置
  padding: 'auto', // 图表边距,默认自动计算
  appendPadding: 18, // 默认留白,15 像素
  colors: [
    '#1890FF',
    '#2FC25B',
    '#FACC14',
    '#223273',
    '#8543E0',
    '#13C2C2',
    '#3436C7',
    '#F04864'
  ], // 默认色系
  shapes: {
    line: [ 'line', 'dash' ],
    point: [ 'circle', 'hollowCircle' ]
  },
  sizes: [ 4, 10 ], // 默认的大小范围
  axis: {
    bottom: F2.Util.mix({}, defaultAxis, {
      grid: null
    }), // 底部坐标轴配置
    left: F2.Util.mix({}, defaultAxis, {
      line: null
    }), // 左侧坐标轴配置
    right: F2.Util.mix({}, defaultAxis, {
      line: null
    }), // 右侧坐标轴配置
    circle: F2.Util.mix({}, defaultAxis, {
      line: null
    }), // 极坐标下的圆弧坐标轴配置
    radius: F2.Util.mix({}, defaultAxis, {
      labelOffset: 4
    }) // 极坐标下的半径坐标轴配置
  }, // 各种坐标轴配置
  shape: {
    line: {
      lineWidth: 2, // 线的默认宽度
      lineJoin: 'round',
      lineCap: 'round'
    }, // 线图样式配置
    point: {
      lineWidth: 0,
      size: 3 // 圆的默认半径
    }, // 点图样式配置
    area: {
      fillOpacity: 0.1
    } // 区域图样式配置
  },
  legend: {
    right: F2.Util.mix({}, DEFAULT_CFG),
    left: F2.Util.mix({}, DEFAULT_CFG),
    top: F2.Util.mix({}, DEFAULT_CFG),
    bottom: F2.Util.mix({}, DEFAULT_CFG),
    marker: {
      symbol: 'circle', // marker 的形状
      radius: 10 // 半径大小
    }
  },
  tooltip: {
    triggerOn: [ 'touchstart', 'touchmove' ],
    // triggerOff: 'touchend',
    showTitle: false,
    showCrosshairs: false,
    crosshairsStyle: {
      stroke: 'rgba(0, 0, 0, 0.25)',
      lineWidth: 2
    },
    showTooltipMarker: true,
    background: {
      radius: 1,
      fill: 'rgba(0, 0, 0, 0.65)',
      padding: [ 3, 5 ]
    },
    titleStyle: {
      fontSize: 26,
      fill: '#fff',
      textAlign: 'start',
      textBaseline: 'top'
    },
    nameStyle: {
      fontSize: 26,
      fill: 'rgba(255, 255, 255, 0.65)',
      textAlign: 'start',
      textBaseline: 'middle'
    },
    valueStyle: {
      fontSize: 26,
      fill: '#fff',
      textAlign: 'start',
      textBaseline: 'middle'
    },
    showItemMarker: true,
    itemMarkerStyle: {
      radius: 5,
      symbol: 'circle',
      lineWidth: 1,
      stroke: '#fff'
    },
    layout: 'horizontal'
  },
  _defaultAxis: defaultAxis // 用于获取默认的坐标轴配置
};

F2.Global.setTheme(Theme);

最后为F2添加一个Renderer类。

F2.Renderer = Renderer;
export default F2;

接下来我们就可以写个DEMO把图表渲染出来了。

<gcanvas ref="canvas_1" style="width:750px;height:400px;"></gcanvas>
import {enable, WeexBridge, Image as GImage} from "gcanvas.js";
import F2 from './chart';
setBarChart() {
  let ref = this.$refs.canvas_1;
  ref = enable(ref, {bridge: WeexBridge});
  let ctx = ref.getContext("2d");
  const canvas = new F2.Renderer(ctx); //使用封装好的Renderer类匹配canvas上下文
  const chart = new F2.Chart({
    el: canvas, // 将第三步创建的 canvas 对象的上下文传入
    width: 750, // 必选,图表宽度,同 canvas 的宽度相同
    height: 400 // 必选,图表高度,同 canvas 的高度相同
  });
  chart.source(data1);
  // Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
  chart.interval().position('genre*sold').color('genre');
  chart.legend('genre', {
    marker: {
      radius: 6 // 半径大小
    }
  });
  // Step 4: 渲染图表
  chart.render();
}

启起来后用palyground扫描一下就能看效果了。这是因为palyground已经集成GCanvas sdk了。如果你的weex应用没有集成GCanvas sdk,也是渲染不了的,集成方法在这里GCanvas

图片描述

图表使用方法参考@antv F2,基本上H5能画的图表,weex都能画,只是一些使用Dom的功能不能使用,比如:tooltip ,所以写了 tooltip 方法去touchstart

touchstart(ev) {
                const plot = this.chart.get('plotRange');
                const { x, y } = F2.Util.createEvent(ev, this.chart);
                /*if (!(x >= plot.tl.x && x <= plot.tr.x && y >= plot.tl.y && y <= plot.br.y)) { // not in chart plot
                  this.chart.hideTooltip();
                  return;
                }*/
                const lastTimeStamp = this.timeStamp;
                const timeStamp = +new Date();
                if ((timeStamp - lastTimeStamp) > 16) {
                    this.chart.showTooltip({ x, y });
                    this.timeStamp = timeStamp;
                }
            },
            touchend(ev){
                this.chart.hideTooltip();
            }

详细的demo在此,

封装比较简单,主要还是F2多端支持不错。

查看原文

赞 10 收藏 6 评论 23

朱工 关注了用户 · 2019-01-04

多罗罗 @sakuracld

关注 13

朱工 关注了专栏 · 2019-01-04

前端多罗罗

刚发现专栏只能建一个,那就只好名字区分了,后续还想再开一个系列。 1、weex系列:成功开发并上线了两个App,中间遇到了很多问题,也学到了很多,好东西当然是要跟大家一起分享了,所以就想写这么一个系列,给大家做点参考,自己也积累沉淀进步一点点 2、前端小工具:主要就是一些常用方法,封装一下,拿来就可以用 3、前端小笔记:常识基本知识一类的,长时间不用就忘记。从现在开始遇到了,就总结下来。下次再遇到了,就可以翻出来直接用了。

关注 29

认证与成就

  • 获得 0 次点赞
  • 获得 3 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 3 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-01-04
个人主页被 137 人浏览