2018-01-29 微信小程序小程序页面节点最大数量、ECharts使用、Ajax 返回任意类型值、窗体设计中设置表格某一列数据长度、AngularJS 过滤器

第一组:杨昊 微信小程序小程序页面节点最大数量

做前端开发的同学,都遇到过页面节点过多,从而导致页面加载很慢,或者浏览器直接崩溃。

在小程序开发中,下拉刷新数据的用法应该比较多,那么小程序页面节点最大数量又是多大呢?

在网上查了一下,看了看前辈们踩的坑,发现大量数据直接扔到小程序模板里面去遍历(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 格式化字符串为大写。
  1. uppercase,lowercase 大小写转换
    {{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING
    {{ "TANK is GOOD" | lowercase }} // 结果:tank is good

  2. date 格式化
    {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25

  3. number 格式化(保留小数)
    {{149016.1945000 | number:2}}

  4. currency货币格式化
    {{ 250 | currency }} // 结果:$250.00
    {{ 250 | currency:"RMB ¥ " }} // 结果:RMB ¥ 250.00

  5. filter查找:输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。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'} }}

  6. limitTo 截取
    {{"1234567890" | limitTo :6}} // 从前面开始截取6位
    {{"1234567890" | limitTo:-4}} // 从后面开始截取4位

  7. 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' }}

数据来源:http://www.runoob.com/angularjs/angularjs-filters.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,600评论 18 139
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,588评论 0 3
  • 转载文章 angularjs 过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回...
    飞将军阅读 596评论 0 2
  • 近来,身边的很多好友都发来了邀请,参加他们的婚礼。一个个红色的像“炸弹”一样的消息袭击了我这位单身人士。在电话中...
    飞鱼跳跳阅读 475评论 3 0
  • 写意小品画人生 画:傅云石 文:绿衣 一人一钓一长天, 碧水浮舟自得闲。 枕浪抛开心烦事, 清凉风里梦犹酣。
    绿衣香阅读 262评论 5 7