UI控件 – gitweixin

7月 7,2018

股票分时图K线图小程序源码

说明

本示例K线交易量（底部柱子）的颜色变化规则为：当前现价（收盘价） – 前一条现价（收盘价）决定的，大于等于0为红（涨），小于0为绿（跌）。这里可能有的计算规则是以交易量来计算的。
数据为真实接口数据，处理后存储在模块里。由于使用者不同，接口数据格式肯定有不同，所以绘前的metadata1()和metadata2()方法为数据转化接口。
js设置的canvas大小实际上是以px为单位的，100%宽度的可设置’auto’，如页面中要指定canvas大小，则在js里需按规则先计算绘图的canvas大小。具体规则可以参考官方文档：WXSS尺寸单位
正在施工中：在图上手势移动显示坐标线和数据明细。

文档配置文档参考：wiki

代码示例：

<font style="color:rgb(51, 51, 51)"><font face="-apple-system, BlinkMacSystemFont,">/**
 * Created by ChenChao on 2016/9/27.
 */
 
var app = getApp();
var storage = require('../../utils/storage');
var kl = require('../../utils/wxChart/k-line');
var getOptionKline1 = function (type) {
    return {
        name: type || 'dk',
        width: 'auto',
        height: 160,
        average: [5, 10, 20],
        axis: {
            row: 4,
            col: 5,
            showX: false,
            showY: true,
            showEdg: true,
            paddingTop: 0,
            paddingBottom: 1,
            paddingLeft: 0,
            paddingRight: 0,
            color: '#cdcdcd'
        },
        xAxis: {
            data: [],
            averageLabel: []
        },
        yAxis: [],
        callback: function (time) {
            var page = getCurrentPages();
            page = page[page.length - 1];
            page.setData({
                kl1RenderTime: time
            });
        }
    };
};
var getOptionKline2 = function (type) {
    return {
        name: type || 'dk',
        width: 'auto',
        height: 80,
        average: [5, 10, 20],
        axis: {
            row: 1,
            col: 5,
            showX: false,
            showY: true,
            showEdg: true,
            paddingTop: 0,
            paddingBottom: 14,
            paddingLeft: 0,
            paddingRight: 0,
            color: '#cdcdcd'
        },
        xAxis: {
            times: [],
            data: [],
            averageLabel: []
        },
        yAxis: [],
        callback: function (time) {
            var page = getCurrentPages();
            page = page[page.length - 1];
            page.setData({
                kl2RenderTime: time
            });
        }
    };
};
var kLine, kLineB;
var ma5Arr, ma10Arr, ma20Arr,
    ma5bArr, ma10bArr, ma20bArr;
 
Page({
    data: {
        ma5: '',
        ma10: '',
        ma20: '',
        ma5b: '',
        ma10b: '',
        ma20b: '',
        tabName: '',
        stock: '',
        code: '',
        time: '',
        yc: '',
        kl1RenderTime: 0,
        kl2RenderTime: 0,
        minIndex: 3,
        minArray: ['5分钟', '15分钟', '30分钟', '60分钟']
    },
    onLoad: function () {
        //默认切换到日K
        this.tabChart({
            target: {
                dataset: {
                    type: 'dk'
                }
            }
        });
    },
    tabChart: function (e) {
        var type = e.target.dataset.type;
        var getDataByType = function (type) {
            return {
                'dk': function () {
                    return storage.getDkData();
                },
                'wk': function () {
                    return storage.getWkData();
                },
                'mk': function () {
                    return storage.getMkData();
                }
            }[type]();
        };
        var data = getDataByType(type);
        this.setData({
            tabName: type,
            stock: data.name,
            code: data.code,
            time: data.info.time,
            yc: data.info.yc
        });
        this.draw(data, type);
    },
    tabMinChart: function (e) {
        var type = 'mink';
        var index = e.detail.value;
        index = index=== '' ? 3 : index;
        var getDataByType = function (type) {
            return {
                'mink-5': function () {
                    return storage.getMin5Data();
                },
                'mink-15': function () {
                    return storage.getMin15Data();
                },
                'mink-30': function () {
                    return storage.getMin30Data();
                },
                'mink-60': function () {
                    return storage.getMin60Data();
                }
            }[type]();
        };
        var typeList = [5, 15, 30, 60];
        var minType = type + '-' + typeList[index];
        var data = getDataByType(minType);
        this.setData({
            tabName: type,
            minIndex: index,
            stock: data.name,
            code: data.code,
            time: data.info.time,
            yc: data.info.yc
        });
        this.draw(data, minType);
    },
    draw: function (data, type) {
        kLine = kl('k-line').init(getOptionKline1(type));
        kLine.metaData1(data, getOptionKline1(type));
        kLine.draw();
 
        kLineB = kl('k-line-b').init(getOptionKline2(type));
        kLineB.metaData2(data, getOptionKline2(type));
        kLineB.draw();
 
        var yAxis1 = kLine.options.yAxis;
        var yAxis2 = kLineB.options.yAxis;
        ma5Arr = yAxis1[1].dataShow;
        ma10Arr = yAxis1[2].dataShow;
        ma20Arr = yAxis1[3].dataShow;
        ma5bArr = yAxis2[1].dataShow;
        ma10bArr = yAxis2[2].dataShow;
        ma20bArr = yAxis2[3].dataShow;
        this.showLastAverage();
    },
    showLastAverage: function () {
        this.setData({
            ma5: ma5Arr[ma5Arr.length - 1],
            ma10: ma10Arr[ma10Arr.length - 1],
            ma20: ma20Arr[ma20Arr.length - 1],
            ma5b: ma5bArr[ma5bArr.length - 1],
            ma10b: ma10bArr[ma10bArr.length - 1],
            ma20b: ma20bArr[ma20bArr.length - 1]
        });
    }
});
</font></font>

项目地址及下载：

https://github.com/Shaman05/wxCharts

作者 east

6月 27,2018

小程序地图定位例子

微信小程序地图操作比较简单，api也很少，使用map组件来展示。说到地图，那就先来看基础定位：
定位用到wx.getLocation(OBJECT)函数，代码如下：

wx.getLocation({
  type: 'wgs84',
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy
  }
})

这里我只用了一个markers，就是定位当前位置的红色markers，用法如下：

 wx.getLocation({
      type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
      success: function (res) {

        _this.setData({
          latitude: res.latitude,
          longitude: res.longitude,
          markers: [{
            id: "1",
            latitude: res.latitude,
            longitude: res.longitude,
            width: 50,
            height: 50,
            iconPath: "/assests/imgs/my.png",
            title: "哪里"

          }],
          circles: [{
            latitude: res.latitude,
            longitude: res.longitude,
            color: '#FF0000DD',
            fillColor: '#7cb5ec88',
            radius: 3000,
            strokeWidth: 1
          }]

        })
      }

    })

这里加了circles，半径是3000米，具体的api可自行看官网。

注意看示例图的右上角，有两个按钮，加减号，是控制地图scale的数值变化，动态缩放地图的，controls用法也很简单：

 controls: [{
      id: 1,
      iconPath: '/assests/imgs/jian.png',
      position: {
        left: 320,
        top: 100 - 50,
        width: 20,
        height: 20
      },
      clickable: true
    },
    {
      id: 2,
      iconPath: '/assests/imgs/jia.png',
      position: {
        left: 340,
        top: 100 - 50,
        width: 20,
        height: 20
      },
      clickable: true
    }
    ]

下载地址：地图定位

作者 east

工具类 6月 26,2018

微信小程序倒班日历简洁实用demo完整源码

设计思路

日期选择器,单个View 一共有42个元素当月的日期以及前后月份的部分日期
月份选择器这个简单一年一共12个月
年份选择器这个需要根据当前年份前后生成一系列的年份

日期选择器大致实现思路

当我们需要选择日期的时候，也就是日期选择器出现的时候，我们需要展示当前时间（年月日）的月历视图，所以我们可以根据当前时间来对日历初始化数据来入手。

固定的部分

1. 一周有7天

2. 一年有12个月

3. 1,3,5,7,8,10,12 每月31天，2月 28或29(闰年) 其余的30天

变化部分

1. 当前日历卡中的数据

2. 当前时间年份可选择范围

综上我们可以先设计固定部分的实现

固定部分实现


   //星期数组

  var weeks = ["日", "一", "二", "三", "四", "五", "六",];

   //当前年份中每个月的天数

  var dayCountOfMonth = [31, 28 + util.isLeapYear(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

  //一年中月份组数

  var monthCount = 12;

变化部分实现*

当前日历卡数据实现，这里实现比较简单按照 6行 7列来设计，这样既能保证当前月份 Day的数量能够完全显示出来，也方便我们去渲染数据，不用费力去用空格来控制。首先我们取出每月的第一天对应的星期然后记录下来

，根据每月第一天的对应的星期，来填充当前月日历卡的数据例如：当前月第一天对应的日期是星期二，那么就需要在当前日历卡数据中填充 1个上个月最后一天的数据 + 当前月的总数据 + 下个月 (42 – 现有数据)


initMontData: function (dayCountOfMounth, weeksOfTheFirstDayOfEachMonth) {

      var currentYearMonthData = [];

      const cdate = this.data.calenderData.date;

      const lastYearDate = new Date();

      lastYearDate.setFullYear(this.data.calenderData.year - 1);

      var lastYearData = this.initData(lastYearDate);

      var nextYearDate = new Date();

      nextYearDate.setFullYear(this.data.calenderData.year + 1);

      var nextYearData = this.initData(nextYearDate);

      for (var i = 0; i < 12; i++) {

        var currentMonthDayCount = dayCountOfMounth[i];

        var firstDayWeek = weeksOfTheFirstDayOfEachMonth[i];

        var startIndex = firstDayWeek;

        var endIndex = firstDayWeek + dayCountOfMounth[i] - 1;

        var startArray = [];

        var endArray = [];

        var ddd = new Date();

        var cdaycount = dayCountOfMounth[i - 1];

        if (i === 0) {

          ddd.setFullYear(this.data.calenderData.year - 1);;

          ddd.setMonth(11);

          cdaycount = lastYearData.dayCountOfMonth[11];

        } else {

          ddd.setMonth(i - 1);

          cdaycount = dayCountOfMounth[i - 1];

        }

        for (var x = startIndex; x > 0; x--) {

          var temd = new Date();

          temd.setFullYear(ddd.getFullYear());

          temd.setMonth(ddd.getMonth());

          temd.setDate(cdaycount - x + 1)

          var str = util.simpleFormatTime(temd);

          var itemh = {

            date: temd,

            day: temd.getDate(),

            gray: true,

            str: str

          };

          startArray.push(itemh);

        }

        for (var x = 0; x < (42 - endIndex) - 1; x++) {

          var temd = new Date();

          if (i === 11) {

            temd.setFullYear(this.data.calenderData.year + 1);

            temd.setMonth(0);

          } else {

            temd.setFullYear(this.data.calenderData.year);

            temd.setMonth(i + 1);

          }

          temd.setDate(x + 1);

          var str = util.simpleFormatTime(temd);

          var itemh = {

            date: temd,

            day: temd.getDate(),

            gray: true,

            str: str

          };

          endArray.push(itemh);

        }

        var earchMontData = [];

        for (var j = 0; j < startArray.length; j++) {

          earchMontData.push(startArray[j]);

        }

        for (var j = 0; j < currentMonthDayCount; j++) {

          let temd = new Date();

          temd.setFullYear(this.data.calenderData.year);

          temd.setMonth(i);

          temd.setDate(j + 1);

          var str = util.simpleFormatTime(temd);

          var itemh = {

            date: temd,

            day: temd.getDate(),

            gray: false,

            str: str

          };

          earchMontData.push(itemh);

        }

        for (var j = 0; j < endArray.length; j++) {

          earchMontData.push(endArray[j]);

        }

        currentYearMonthData.push(earchMontData);

      }

      return currentYearMonthData;

    }

下载地址: 倒班日历

作者 east

标签归档UI控件