第一组:杨昊 微信小程序小程序页面节点最大数量
做前端开发的同学,都遇到过页面节点过多,从而导致页面加载很慢,或者浏览器直接崩溃。
在小程序开发中,下拉刷新数据的用法应该比较多,那么小程序页面节点最大数量又是多大呢?
在网上查了一下,看了看前辈们踩的坑,发现大量数据直接扔到小程序模板里面去遍历(wx:for),开发者工具的日志里面有可能直接报错:invokeWebviewMethod 数据传输长度为 1233778 已经超过最大长度 1048576
至于为什么是1048576这个长度,恐怕要问微信团队的底层实现了,应该是考虑到性能问题,不允许一次性加载这么多节点到页面上~
注:巧的是1048576B=1M,excel的最大行数也是1048576行,也许微信这个节点长度用这个值是经过考虑之后的一个值。
第二组:叶佳意 ECharts使用
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
使用ECharts画图表步骤如下:
一、获取 ECharts
你可以通过以下几种方式获取 ECharts。
1、从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本。开发环境建议下载源代码版本,包含了常见的错误提示和警告。
2、在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
3、通过 npm 获取 echarts,npm install echarts --save。
4、cdn 引入,你可以在 cdnjs,npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。
二、引入 ECharts
ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器。因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 script 标签引入。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script></head></html>
三、绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div></body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script></head><body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script></body></html>
这样你的第一个图表就诞生了!
第三组: Ajax 返回任意类型值
在使用Ajax过程中,有的方法需要传回string,有的要传回model或model[];但是在我们最开始设置返回值result的时候只能设置一种类型,那这样返回不同类型的值就得新建一个一般处理程序,这样就会显得很不简洁。
那在设置返回值result的时候有没有一种可以设置成任意类型的方法呢?
答案是有,AjaxResult就能做到。
public class PmAsCheckTaskList: BaseHandler {
public static AjaxResult result = new AjaxResult() {
IsSuccess = true;
};
public override void ProcessRequest(HttpContext context) {
try {
switch (context.Request["method"].ToLower()) {
//获得检查条目 输入参数 标签 返回 Tid 条目 依据
case "getjctm":
result = GetJctmListBySepara(context);
break;
}
} catch(Exception e) {
//日志记录
result.IsSuccess = false;
result.Message = e.Message;
}
context.Response.Write(result.ToJson());
}
//获得检查条目 输入参数 标签 返回 Tid 条目 依据
public AjaxResult GetJctmListBySepara(HttpContext context) {
LoongAir.Model.PmAsCheckEntry[] insPace = new PmAsCheckEntry[] {};
//标签筛选分支
//选择标签返回默认带出的检查条目 Tid数组
string labels = context.Request["labels"];
if (labels != null) {
//选择的关系运算符
string relchr = string.IsNullOrEmpty(context.Request["relchr"]) ? "||": context.Request["relchr"];
long[] labelTids = Array.ConvertAll(labels.Trim(',').Split(','), s = >s.ToLong());
insPace = LoongAir.DB.PmAsCheckEntry.QueryEntryByMutiLabelsAndRelChr(labelTids, relchr);
}
//条目内容筛选分支
string entrycontent = context.Request["entrycontent"];
if (entrycontent != null) {
insPace = LoongAir.DB.PmAsCheckEntry.selectEntries(loginUser, null, new LoongAir.Model.PmAsCheckEntry() {
PmAsCheckEntryContent = entrycontent
});
}
//返回 检查条目的Tid 条目 依据
//PmAsCheckEntryContent PmAsCheckAccordance
DataTable dt = new DataTable();
dt.Columns.Add("Tid", typeof(string));
dt.Columns.Add("PmAsCheckEntryContent", typeof(string));
dt.Columns.Add("PmAsCheckAccordance", typeof(string));
foreach(var ins in insPace) {
DataRow dr = dt.NewRow();
dr["Tid"] = ins.Tid;
dr["PmAsCheckEntryContent"] = ins.PmAsCheckEntryContent;
dr["PmAsCheckAccordance"] = ins.PmAsCheckAccordance;
dt.Rows.Add(dr);
}
result.Data = dt;
return result;
}
另外,如果我们需要从两张表里分别选几个字段拼成一个类似于视图一样的表,在这里,用DataTable直接拼接就可以做到。
第四组:李俊 窗体设计中设置表格某一列数据长度
在GridView表格当中新增数据时,由于所有数据最终都要存入数据库中,而数据库表中对每个字段的数据长度进行了设置,如果对新增数据在前台不进行数据限制的话,在插入数据库的时候就会出错。因此,需要对GridView中单元格的数据长度进行设置,超过则提示过长,并且返回原值(修改时返回修改前的数据,新增时返回空数据):
/// <summary>
/// 数据长度检
/// </summary>
/// <param name="data">数据</param>
/// <param name="lengthLimit">长度限制</param>
/// <param name="caption">列名</param>
private void checkDataLength(string data, int lengthLimit, string caption, int row, string column)
{
if (data.Length > lengthLimit)
{
XtraMessageBox.Show(caption + "不能超过" + lengthLimit + "个字符");
//返回原值
UIT4007 ACTypeInfo = new UIT4007();
Loc.Support.GetT4007SearchPara SearchParam = new Loc.Support.GetT4007SearchPara
{
UIT_Model = ACTypeInfo
};
UIModelListResult<UIT4007> originalData = DispatchHandler.GetAcTypeList(SearchParam);
//对原数据进行更改失败的时候返回原值
if (row < originalData.List.Length)
{
//取对应字段的值
Model.UIT4007 test = originalData.List[row];
string testValue = "";
Type type = typeof(Model.UIT4007);
System.Reflection.PropertyInfo property = type.GetProperty(column);
if (property != null)
{
object o = property.GetValue(test, null);
testValue = (o == null ? "" : o.ToString());
}
//修改失败的单元格数据重新返回原值,方法是通过以原值进行赋值
gridView1.SetRowCellValue(row, column, testValue);
gridView1.RefreshRow(row);
}
//在新增数据过程中,对单元格增加失败时返回单元格最初空值状态
else
{
gridView1.SetRowCellValue(row, column, "");
gridView1.RefreshRow(row);
}
}
}
第五组:周倩宇 AngularJS 过滤器
过滤器可以使用一个管道字符(|)添加到表达式和指令中。可用于转换数据:
过滤器 | 描述 |
---|---|
currency | 格式化数字为货币格式。 |
filter | 从数组项中选择一个子集。 |
lowercase | 格式化字符串为小写。 |
orderBy | 根据某个表达式排列数组。 |
uppercase | 格式化字符串为大写。 |
uppercase,lowercase 大小写转换
{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} // 结果:tank is gooddate 格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25number 格式化(保留小数)
{{149016.1945000 | number:2}}currency货币格式化
{{ 250 | currency }} // 结果:$250.00
{{ 250 | currency:"RMB ¥ " }} // 结果:RMB ¥ 250.00filter查找:输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。filter 过滤器从数组中选择一个子集
// 查找name为iphone的行
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }}limitTo 截取
{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位-
orderBy 排序
// 根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}// 根据id升序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}