微信小程序表格制作怎么弄
微信小程序开发的资料小编介绍过很多，可是关于小程序表格，似乎很多朋友还不了解。由于微信小程序框架本身存在一些限制，所以微信小程序表格制作比较困难，但是也是有两种方案是可以进行微信小程序表格制作的：
1、服务器端渲染图表之后输出图片，如果想要在微信小程序中直接显示渲染好的图片，比如highcharts提供了服务端渲染的能力hightcharts server render，那还需要小程序后台有一套渲染服务，并且有一定的网络开销。
2、微信小程序API中提供了canvas的支持，大家可以利用canvas自行绘制图表。
微信小程序表格制作的步骤如下：
关注我的 github项目 查看完整代码。
API
查看微信小程序详细 Canvas API 文档
在模板文件中使用声明一个canvas组件
使用wx.createContext获取绘图上下文 context
调用wx.drawCanvas进行绘制
wx.drawCanvas({
canvasId: 'firstCanvas',
actions: context.getActions() // 获取绘图动作数组
});
开始图表的绘制
绘制折线图
// 获取绘图上下文 context
var context = wx.createContext();
// 设置描边颜色
context.setStrokeStyle("#7cb5ec");
// 设置线宽
context.setLineWidth(4);
context.moveTo(50, 70);
context.lineTo(150, 150);
context.lineTo(250, 30);
context.lineTo(350, 120);
context.lineTo(450, 150);
context.lineTo(550, 95);
// 对当前路径进行描边
context.stroke();
wx.drawCanvas({
canvasId: 'testCanvas',
actions: context.getActions()
});
说明：moveTo方法不记录到路径中
好像没有想象中难，看上去效果还不错
绘制每个数据点的标识图案
...
context.beginPath();
// 设置描边颜色
context.setStrokeStyle("#ffffff");
// 设置填充颜色
context.setFillStyle("#7cb5ec");
context.moveTo(50 + 7, 70);
// 绘制圆形区域
context.arc(50, 70, 8, 0, 2 * Math.PI, false);
context.moveTo(150 + 7, 150);
context.arc(150, 150, 8, 0, 2 * Math.PI, false);
...
context.closePath();
// 填充路径
context.fill();
context.stroke();
说明：避免之前绘制的折线路径影响到标识图案的路径，这里包裹在了beginPath和closePath中
绘制横坐标
规定我们的参数格式是这样的
opts = {
width: 640, // 画布区域宽度
height: 400, // 画布区域高度
categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017']
}
我们根据参数中的categories来绘制横坐标
稍微整理下思路：
1、根据categories数均分画布宽度
2、计算出横坐标中每个分类的起始点
3、绘制文案(这儿会多一些代码，后面会具体提到)
var eachSpacing = Math.floor(opts.width / opts.categories.length);
var points = [];
// 起始点x坐标
var startX = 0;
// 起始点y坐标
var startY = opts.height - 30;
// 终点x坐标
var endX = opts.width;
// 终点y坐标
var endY = opts.height;
// 计算每个分类的起始点x坐标
opts.categories.forEach(function(item, index) {
points.push(startX + index * eachSpacing);
});
points.push(endX);
// 绘制横坐标
context.beginPath();
context.setStrokeStyle("#cccccc");
context.setLineWidth(1);
// 绘制坐标轴横线
context.moveTo(startX, startY);
context.lineTo(endX, startY);
// 绘制坐标轴各区块竖线
points.forEach(function(item, index) {
context.moveTo(item, startY);
context.lineTo(item, endY);
});
context.closePath();
context.stroke();
context.beginPath();
// 设置字体大小
context.setFontSize(20);
// 设置字体填充颜色
context.setFillStyle('#666666');
opts.categories.forEach(function(item, index) {
context.fillText(item, points[index], startY + 28);
});
context.closePath();
context.stroke();
查看微信小程序开发文档并没有提供html5 canvas中的mesureText(获取文案宽度)方法，下面我们自己简单的实现，并不是绝对精确，但是误差基本可以忽略
function mesureText (text) {
var text = text.split('');
var width = 0;
text.forEach(function(item) {
if (/[a-zA-Z]/.test(item)) {
width += 14;
} else if (/[0-9]/.test(item)) {
width += 11;
} else if (/./.test(item)) {
width += 5.4;
} else if (/-/.test(item)) {
width += 6.5;
} else if (/[u4e00-u9fa5]/.test(item)) {
width += 20;
}
});
return width;
}
这里分别处理了字母, 数字, ., -, 汉字这几个常用字符
上面的代码稍微修改下：
opts.categories.forEach(function(item, index) {
var offset = eachSpacing / 2 - mesureText(item) / 2;
context.fillText(item, points[index] + offset, startY + 28);
});
这样就大功告成了，微信小程序表格制作就彻底完成了。大家看完上面微信小程序商店提供的教程和代码之后都学会制作小程序表格了吗?如果你开发的是商家小程序，那么表格对你来说用处就很大了，所以大家赶紧学习吧，希望都能一次*开发成功。
微信小程序表格布局怎么做?
微信小程序表格布局实例操作
微信小程序如何做简易table表格?