2018-01-29 微信小程序小程序页面节点最大数量、ECh

作者: 胡諾 | 来源:发表于2018-01-30 08:52 被阅读0次

2018-01-29 微信小程序小程序页面节点最大数量、ECh
7款相见恨晚的微信小程序，款款都是黑科技，请你低调收藏
微信小程序从零开始开发步骤阅读链接
微信，支付宝小程序实现原理概述
微信小程序组件探究和应用
小程序的Flex弹性布局
微信小程序前端页面逆向反解脚本
小程序开发注意事项
微信小程序基础
2019-01-15 微信小程序从子页面退回父页面时的数据传递

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

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

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

在网上查了一下，看了看前辈们踩的坑，发现大量数据直接扔到小程序模板里面去遍历(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 good
date 格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
number 格式化（保留小数）
{{149016.1945000 | number:2}}
currency货币格式化
{{ 250 | currency }} // 结果：$250.00
{{ 250 | currency:"RMB ￥ " }} // 结果：RMB ￥ 250.00
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'} }}
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' }}

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

2018-01-29 微信小程序小程序页面节点最大数量、ECh
第一组：杨昊微信小程序小程序页面节点最大数量做前端开发的同学，都遇到过页面节点过多，从而导致页面加载很慢...
7款相见恨晚的微信小程序，款款都是黑科技，请你低调收藏
自从微信小程序这个概念被提出了，微信小程序的发展就越来越快，到目前为止微信小程序的数量不可预估，之所以微信小程序发...
微信小程序从零开始开发步骤阅读链接
阅读链接：微信小程序从零开始开发步骤（一）搭建开发环境微信小程序从零开始开发步骤（二）创建小程序页面微信小程...
微信，支付宝小程序实现原理概述
微信小程序项目结构上图为微信小程序的项目结构，pages下面包含了小程序中的每一个页面，每一个页面由页面结构，...
微信小程序组件探究和应用
把玩微信小程序组件微信小程序把玩《二》：页面生命周期，模块化，数据绑定，view组件微信小程序把玩《三》：sc...
小程序的Flex弹性布局
参考：微信小程序页面布局微信小程序开发详解（九）---微信小程序布局基础 1.Flex布局的特点 1.任意方向的伸...
微信小程序前端页面逆向反解脚本
微信小程序前端页面逆向反解脚本写个微信小程序前端页面逆向反解，下载到的小程序包 wxapkg 解压后得到一个重要...
小程序开发注意事项
小程序开发注意事项小程序分享微信小程序的分享只能分享到朋友不能分享到朋友圈微信小程序的分享可以指定分享页面...
微信小程序基础
微信小程序介绍微信小程序开发工具的使用微信小程序框架文件微信小程序逻辑层微信小程序视图层微信小程序组件介绍微信小程...
2019-01-15 微信小程序从子页面退回父页面时的数据传递
微信小程序从子页面退回父页面时的数据传递 wx.navigateBack() 我们知道，在微信小程序中，从一个页面...