init

README.md

@@ -0,0 +1,12 @@
+# 云开发 quickstart
+
+这是云开发的快速启动指引，其中演示了如何上手使用云开发的三大基础能力：
+
+- 数据库：一个既可在小程序前端操作，也能在云函数中读写的 JSON 文档型数据库
+- 文件存储：在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
+- 云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写业务逻辑代码
+
+## 参考文档
+
+- [云开发文档](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html)
+

cloudfunctions/login/index.js

@@ -0,0 +1,31 @@
+// 云函数模板
+// 部署：在 cloud-functions/login 文件夹右击选择 “上传并部署”
+
+const cloud = require('wx-server-sdk')
+
+// 初始化 cloud
+cloud.init()
+
+/**
+ * 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端
+ * 
+ * event 参数包含小程序端调用传入的 data
+ * 
+ */
+exports.main = (event, context) => {
+  console.log(event)
+  console.log(context)
+
+  // 可执行其他自定义逻辑
+  // console.log 的内容可以在云开发云函数调用日志查看
+
+  // 获取 WX Context (微信调用上下文)，包括 OPENID、APPID、及 UNIONID（需满足 UNIONID 获取条件）
+  const wxContext = cloud.getWXContext()
+
+  return {
+    event,
+    openid: wxContext.OPENID,
+    appid: wxContext.APPID,
+    unionid: wxContext.UNIONID,
+  }
+}

cloudfunctions/login/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "login",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "wx-server-sdk": "latest"
+  }
+}

miniprogram/app.js

@@ -0,0 +1,15 @@
+//app.js
+App({
+  onLaunch: function () {
+    
+    if (!wx.cloud) {
+      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
+    } else {
+      wx.cloud.init({
+        traceUser: true,
+      })
+    }
+
+    this.globalData = {}
+  }
+})

miniprogram/app.json

@@ -0,0 +1,17 @@
+{
+  "pages": [
+    "pages/index/index",
+    "pages/setting/setting",
+    "pages/self/self",
+    "pages/bind/bind",
+    "pages/details/details",
+    "pages/time-filter/time-filter"
+  ],
+  "window": {
+    "backgroundColor": "#F6F6F6",
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#ffffff",
+    "navigationBarTitleText": "view-app",
+    "navigationBarTextStyle": "black"
+  }
+}

miniprogram/app.wxss

@@ -0,0 +1,3 @@
+/**app.wxss**/
+@import "/style/style.wxss";
+@import "/style/components/black.wxss";

miniprogram/ec-canvas/ec-canvas.js

@@ -0,0 +1,120 @@
+import WxCanvas from './wx-canvas';
+import * as echarts from './echarts';
+
+let ctx;
+
+Component({
+  properties: {
+    canvasId: {
+      type: String,
+      value: 'ec-canvas'
+    },
+
+    ec: {
+      type: Object
+    }
+  },
+
+  data: {
+
+  },
+
+  ready: function () {
+    if (!this.data.ec) {
+      console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" '
+        + 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>');
+      return;
+    }
+
+    if (!this.data.ec.lazyLoad) {
+      this.init();
+    }
+  },
+
+  methods: {
+    init: function (callback) {
+      const version = wx.version.version.split('.').map(n => parseInt(n, 10));
+      const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9)
+        || (version[0] === 1 && version[1] === 9 && version[2] >= 91);
+      if (!isValid) {
+        console.error('微信基础库版本过低，需大于等于 1.9.91。'
+          + '参见：https://github.com/ecomfe/echarts-for-weixin'
+          + '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
+        return;
+      }
+
+      ctx = wx.createCanvasContext(this.data.canvasId, this);
+
+      const canvas = new WxCanvas(ctx, this.data.canvasId);
+
+      echarts.setCanvasCreator(() => {
+        return canvas;
+      });
+
+      var query = wx.createSelectorQuery().in(this);
+      query.select('.ec-canvas').boundingClientRect(res => {
+        if (typeof callback === 'function') {
+          this.chart = callback(canvas, res.width, res.height);
+        }
+        else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
+          this.chart = this.data.ec.onInit(canvas, res.width, res.height);
+        }
+        else {
+          this.triggerEvent('init', {
+            canvas: canvas,
+            width: res.width,
+            height: res.height
+          });
+        }
+      }).exec();
+    },
+
+    canvasToTempFilePath(opt) {
+      if (!opt.canvasId) {
+        opt.canvasId = this.data.canvasId;
+      }
+
+      ctx.draw(true, () => {
+        wx.canvasToTempFilePath(opt, this);
+      });
+    },
+
+    touchStart(e) {
+      if (this.chart && e.touches.length > 0) {
+        var touch = e.touches[0];
+        this.chart._zr.handler.dispatch('mousedown', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        this.chart._zr.handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+      }
+    },
+
+    touchMove(e) {
+      if (this.chart && e.touches.length > 0) {
+        var touch = e.touches[0];
+        this.chart._zr.handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+      }
+    },
+
+    touchEnd(e) {
+      if (this.chart) {
+        const touch = e.changedTouches ? e.changedTouches[0] : {};
+        this.chart._zr.handler.dispatch('mouseup', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        this.chart._zr.handler.dispatch('click', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+      }
+    }
+  }
+});

miniprogram/ec-canvas/ec-canvas.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

miniprogram/ec-canvas/ec-canvas.wxml

@@ -0,0 +1,4 @@
+<canvas class="ec-canvas" canvas-id="{{ canvasId }}"
+bindinit="init"
+bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}">
+</canvas>

miniprogram/ec-canvas/ec-canvas.wxss

@@ -0,0 +1,4 @@
+.ec-canvas {
+  width: 100%;
+  height: 100%;
+}

miniprogram/ec-canvas/wx-canvas.js

@@ -0,0 +1,97 @@
+export default class WxCanvas {
+  constructor(ctx, canvasId) {
+    this.ctx = ctx;
+    this.canvasId = canvasId;
+    this.chart = null;
+
+    // this._initCanvas(zrender, ctx);
+    this._initStyle(ctx);
+    this._initEvent();
+  }
+
+  getContext(contextType) {
+    if (contextType === '2d') {
+      return this.ctx;
+    }
+  }
+
+  // canvasToTempFilePath(opt) {
+  //   if (!opt.canvasId) {
+  //     opt.canvasId = this.canvasId;
+  //   }
+
+  //   return wx.canvasToTempFilePath(opt, this);
+  // }
+
+  setChart(chart) {
+    this.chart = chart;
+  }
+
+  attachEvent () {
+    // noop
+  }
+
+  detachEvent() {
+    // noop
+  }
+
+  _initCanvas(zrender, ctx) {
+    zrender.util.getContext = function () {
+      return ctx;
+    };
+
+    zrender.util.$override('measureText', function (text, font) {
+      ctx.font = font || '12px sans-serif';
+      return ctx.measureText(text);
+    });
+  }
+
+  _initStyle(ctx) {
+    var styles = ['fillStyle', 'strokeStyle', 'globalAlpha', 
+      'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
+      'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'];
+
+    styles.forEach(style => {
+      Object.defineProperty(ctx, style, {
+        set: value => {
+          if (style !== 'fillStyle' && style !== 'strokeStyle' 
+            || value !== 'none' && value !== null
+          ) {
+            ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
+          }
+        }
+      });
+    });
+
+    ctx.createRadialGradient = () => {
+      return ctx.createCircularGradient(arguments);
+    };
+  }
+
+  _initEvent() {
+    this.event = {};
+    const eventNames = [{
+      wxName: 'touchStart',
+      ecName: 'mousedown'
+    }, {
+      wxName: 'touchMove',
+      ecName: 'mousemove'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'mouseup'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'click'
+    }];
+
+    eventNames.forEach(name => {
+      this.event[name.wxName] = e => {
+        const touch = e.touches[0];
+        this.chart._zr.handler.dispatch(name.ecName, {
+          zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
+          zrY: name.wxName === 'tap' ? touch.clientY : touch.y
+        });
+      };
+    });
+  }
+}

miniprogram/pages/bind/bind.js

@@ -0,0 +1,66 @@
+// miniprogram/pages/bind/bind.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

miniprogram/pages/bind/bind.json

@@ -0,0 +1 @@
+{}

miniprogram/pages/bind/bind.wxml

@@ -0,0 +1,28 @@
+<view class="black-head">
+  <text class="tit">绑定账号</text>
+</view>
+
+<view class="black-body diy-time">
+
+  <view class="time-item block">
+    <label for="phone">
+      手机号:
+    </label>
+    <input class="ele" id="phone" type="number"></input>
+  </view>
+
+  <view class="time-item block">
+    <label for="code">
+      验证码:
+    </label>
+    <view class="code-box">
+    <input class="ele code-ele" id="code" type="number"></input>
+
+    <button class="get-code" disabled>获 取</button>
+    </view>
+  </view>
+
+  <button class="on-ok">确定</button>
+</view>
+
+<view class="remarks">没有找到您的手机号，请联系您的客服为您添加账号后再绑定。</view>

miniprogram/pages/bind/bind.wxss

@@ -0,0 +1,40 @@
+@import "/pages/time-filter/time-filter.wxss";
+
+.remarks {
+  padding-top: 40rpx;
+  font-size: 26rpx;
+  color: #999;
+  line-height: 1.4;
+}
+.block{
+  flex-direction:column;
+  align-items: flex-start;
+}
+.block label{
+  padding-bottom: 10rpx;
+}
+.block .ele,.block label{
+  width: 100%;
+}
+
+.block .code-ele{
+  width: calc(100% - 210rpx);
+}
+.get-code{
+  width: 200rpx;
+  box-sizing: border-box;
+  padding: 20rpx;
+  background: #e72120;
+  border: none;
+  height: 88rpx;
+  border-radius: 3px;
+  color: #fff;
+  font-size: 30rpx;
+  line-height: inherit;
+  margin-left: 10rpx;
+}
+.code-box{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}

miniprogram/pages/details/details.js

@@ -0,0 +1,66 @@
+// miniprogram/pages/details/details.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

miniprogram/pages/details/details.json

@@ -0,0 +1 @@
+{}

miniprogram/pages/details/details.wxml

@@ -0,0 +1,68 @@
+<view class="black-head">
+  <text class="tit">今日流量详情统计</text>
+</view>
+
+<view class="black-body details-list">
+
+  <view class="item">
+    <text class="details-key">浏览量</text>
+    <text class="details-val">95</text>
+  </view>
+  
+  <view class="item">
+    <text class="details-key">访客数</text>
+    <text class="details-val">95</text>
+  </view>
+  
+  <view class="item">
+    <text class="details-key">跳出率</text>
+    <text class="details-val">95</text>
+  </view>
+  
+  <view class="item">
+    <text class="details-key">平均访问时长</text>
+    <text class="details-val">95</text>
+  </view>
+  
+  <view class="item">
+    <text class="details-key">平均访问页面数</text>
+    <text class="details-val">95</text>
+  </view>
+
+</view>
+
+<view class="black-body data-list">
+
+  <view class="data-item">
+    <text class="tit">新访客数</text>
+    <view class="info">
+      <view class="num">
+        <!-- 最多4位数 -->
+        9999
+      </view>
+      <view class="trend">
+        <image mode="widthFix" src="/images/up.png"></image>
+        <view class="text">
+          100% 今日
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <view class="data-item">
+    <text class="tit">老访客数</text>
+    <view class="info">
+      <view class="num">
+        <!-- 最多4位数 -->
+        32
+      </view>
+      <view class="trend">
+        <image mode="widthFix" src="/images/down.png"></image>
+        <view class="text">
+          3% 今日
+        </view>
+      </view>
+    </view>
+  </view>
+
+</view>

miniprogram/pages/details/details.wxss

@@ -0,0 +1,17 @@
+@import "/pages/index/index.wxss";
+
+.details-list {
+  padding: 20rpx 0;
+}
+
+.details-list  .item {
+  font-size: 28rpx;
+  display: flex;
+  justify-content: space-between;
+  align-self: center;
+  padding: 20rpx 0;
+}
+
+.details-list  .details-key {
+  color: #999;
+}

miniprogram/pages/index/index.js

@@ -0,0 +1,107 @@
+import * as echarts from '../../ec-canvas/echarts';
+import {
+  getToDayChartOpt
+} from './today-chart-opt.js';
+import {
+  getSourceChartOpt
+} from './source-chart-opt.js';
+
+//模拟toDay数据
+let toDayAata = {
+  dayTime: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
+  visitorNum: [17, 6, 12, 7, 9, 12, 19, 8, 14, 15, 17, 8, 18],
+  clickNum: [7, 19, 5, 15, 6, 11, 17, 14, 12, 16, 9, 11, 14]
+}
+
+Page({
+  data: {
+    //今日浏览统计chart type
+    toDayChartType: 'line', //line | bar
+    //今日浏览统计 chart
+    todayEc: {
+      lazyLoad: true,
+      isLoaded: false
+    },
+    //访客来源 chart
+    sourceEc: {
+      lazyLoad: true,
+      isLoaded: false
+    }
+  },
+
+  //今日浏览统计 chart切换
+  switchToDayChartType: function() {
+    if (this.data.toDayChartType === 'line') {
+      this.setData({
+        toDayChartType: 'bar',
+      })
+    } else {
+      this.setData({
+        toDayChartType: 'line',
+      })
+    }
+
+    if (this.toDayChart) {
+      this.toDayChart.setOption(getToDayChartOpt(toDayAata,this.data.toDayChartType))
+    }
+  },
+
+  //init 今日浏览统计 chart
+  initToDayChart: function() {
+    this.toDayComponent.init((canvas, width, height) => {
+      // 获取组件的 canvas、width、height 后的回调函数
+      // 在这里初始化图表
+      const chart = echarts.init(canvas, null, {
+        width: width,
+        height: height
+      });
+      chart.setOption(getToDayChartOpt(toDayAata, this.data.toDayChartType));
+
+      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
+      this.toDayChart = chart;
+
+      this.setData({
+        isLoaded: true,
+        isDisposed: false
+      });
+
+      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
+      return chart;
+    });
+  },
+
+  //init 访客来源 chart
+  initSourceChart: function () {
+    this.sourceComponent.init((canvas, width, height) => {
+      // 获取组件的 canvas、width、height 后的回调函数
+      // 在这里初始化图表
+      const chart = echarts.init(canvas, null, {
+        width: width,
+        height: height
+      });
+      chart.setOption(getSourceChartOpt([100,500,450]));
+
+      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
+      this.sourceDayChart = chart;
+
+      this.setData({
+        isLoaded: true,
+        isDisposed: false
+      });
+
+      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
+      return chart;
+    });
+  },
+
+  onReady() {
+    this.toDayComponent = this.selectComponent('#today-chart');
+    this.sourceComponent = this.selectComponent('#source-chart');
+    
+    //模拟异步
+    setTimeout(()=>{
+      this.initToDayChart();
+      this.initSourceChart();
+    },300)
+  }
+});

miniprogram/pages/index/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "ec-canvas": "../../ec-canvas/ec-canvas"
+  }
+}

miniprogram/pages/index/index.wxml

@@ -0,0 +1,120 @@
+<!-- 今日浏览量 -->
+<view class="black-head">
+  <text class="tit">今日浏览统计</text>
+  <view class="oper">
+    <navigator class="link" url="/pages/time-filter/time-filter">查询时间</navigator>
+  </view>
+</view>
+
+<view class="black-body data-list">
+
+  <view class="data-item">
+    <text class="tit">询盘书</text>
+    <view class="info">
+      <view class="num">
+        <!-- 最多4位数 -->
+        9999
+      </view>
+      <view class="trend">
+        <image mode="widthFix" src="/images/up.png"></image>
+        <view class="text">
+          100% 今日
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <view class="data-item">
+    <text class="tit">询盘率</text>
+    <view class="info">
+      <view class="num">
+        <!-- 最多4位数 -->
+        32
+      </view>
+      <view class="trend">
+        <image mode="widthFix" src="/images/down.png"></image>
+        <view class="text">
+          3% 今日
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <view class="data-item">
+    <text class="tit">询盘率</text>
+    <view class="info">
+      <view class="num">
+        <!-- 最多4位数 -->
+        32
+      </view>
+      <view class="trend">
+        <image mode="widthFix" src="/images/up.png"></image>
+        <view class="text">
+          3% 今日
+        </view>
+      </view>
+    </view>
+  </view>
+
+</view>
+
+<!-- 折线图 -->
+<view class="today-chart">
+  <text class="switch link" bindtap="switchToDayChartType"> {{toDayChartType==='line'?'切换柱状图':'切换折线图'}}</text>
+  <ec-canvas id="today-chart" canvas-id="today-chart" ec="{{ todayEc }}"></ec-canvas>
+</view>
+
+
+
+
+<!--访客来源 -->
+<view class="black-head">
+  <text class="tit">访客来源</text>
+</view>
+
+<view class="black-body source-chart">
+
+  <ec-canvas id="source-chart" canvas-id="source-chart" ec="{{ sourceEc }}"></ec-canvas>
+
+  <!-- <view class="source-info">
+    <view class="tit">搜狗访客</view>
+    <view class="des">
+      <view class="des-num">2222</view>
+      <view class="percentage">访客比例:
+        <text class="num">50%</text>
+      </view>
+    </view>
+  </view> -->
+
+</view>
+
+
+
+<!-- 访客页面 -->
+<view class="black-head">
+  <text class="tit">访客页面</text>
+</view>
+
+<view class="black-body visit-pages">
+
+  <view class="item">
+    <view class="head">
+      <text class="pv">PV:16</text>
+      <text class="date">今天</text>
+    </view>
+    <view class="info">
+      北京网站建设，北京微信开发，营销型网站建设北京微 信开发，营销型网站建设
+    </view>
+  </view>
+
+  <view class="item">
+    <view class="head">
+      <text class="pv">PV:16</text>
+      <text class="date">今天</text>
+    </view>
+    <view class="info">
+      北京网站建设，北京微信开发，营销型网站建设北京微 信开发，营销型网站建设
+    </view>
+  </view>
+
+</view>

miniprogram/pages/index/index.wxss

@@ -0,0 +1,156 @@
+.data-list {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.data-list .data-item {
+  width: calc((100% - 20rpx) / 2);
+  border: 1rpx solid rgba(224, 224, 224, 0.5);
+  background-color: #fff;
+  min-height: 160rpx;
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 20rpx 26rpx;
+  margin-bottom: 20rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.data-list .tit {
+  padding-bottom: 14rpx;
+}
+
+.data-list .info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.data-list .num {
+  font-size: 40rpx;
+  font-weight: bold;
+  line-height: 1;
+  max-width: 50%;
+  word-break: break-all;
+}
+
+.data-list .trend {
+  font-size: 24rpx;
+  color: #999;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+}
+
+.data-list .trend image {
+  width: 26rpx;
+  margin-right: 5rpx;
+  display: inline-block;
+}
+
+.data-list .trend .text {
+  display: inline-block;
+}
+
+/* 访客数 点击数 echart */
+
+.today-chart {
+  position: relative;
+  margin-bottom: 60rpx;
+}
+
+.today-chart .switch {
+  font-size: 28rpx;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 5;
+}
+
+ec-canvas {
+  display: block;
+  width: 100%;
+  height: 500rpx;
+}
+
+/* 访客来源 */
+.source-chart{
+  margin-bottom: 30rpx;
+}
+.source-chart .source-info {
+  background-color: #fff;
+  width: 440rpx;
+  min-height: 140rpx;
+  padding: 20rpx;
+  box-sizing: border-box;
+  margin: 20rpx auto 100rpx;
+}
+
+.source-chart .tit {
+  font-size: 26rpx;
+  color: #666;
+}
+
+.source-chart .des {
+  display: flex;
+  justify-content: space-between;
+  align-self: center;
+  line-height: 48rpx;
+  padding-top: 20rpx;
+}
+
+.source-chart .des .des-num {
+  /* @include dan(45%); */
+  font-size: 48rpx;
+  font-weight: bold;
+  align-self: flex-end;
+  max-width: 55%;
+  word-break: break-all;
+}
+
+.source-chart .des .percentage {
+  /* @include dan(55%); */
+  font-size: 24rpx;
+  align-self: flex-end;
+  width: 45%;
+  text-align: right;
+}
+.source-chart .des .num{
+    color: #29cc24;
+}
+
+/* 访客页面 */
+
+.visit-pages .item {
+  background-color: #fff;
+  padding: 30rpx;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.09);
+}
+
+.visit-pages .item~.item {
+  margin-top: 30rpx;
+}
+
+.visit-pages .head {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 10rpx;
+}
+
+.visit-pages   .pv {
+  font-size: 30rpx;
+  color: #e72120;
+  font-weight: bold;
+}
+
+.visit-pages  .date {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.visit-pages .info {
+  font-size: 26rpx;
+  line-height: 40rpx;
+}

miniprogram/pages/index/source-chart-opt.js

@@ -0,0 +1,118 @@
+
+/**
+ * 获取访客来源chart'opt
+ * 
+ * data:number[]    [百度,360,搜狗]
+ * 
+ */
+
+export let getSourceChartOpt =function(dataArr){
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: "{a} {b}: {c} ({d}%)"
+    },
+    legend: {
+      data: [
+        {
+          name: '百度',
+          icon: 'rect',
+          itemStyle: {
+            color: 'red'
+          }
+        },
+        {
+          name: '360',
+          icon: 'rect'
+        },
+        {
+          name: '搜狗',
+          icon: 'rect'
+        }
+      ],
+      textStyle: {
+        fontSize: 14
+      },
+      left: 0,
+      top: 0,
+      itemGap: 30,
+      itemWidth: 20,
+      itemHeight: 6
+    },
+    series: [
+      {
+        name: '访问来源',
+        type: 'pie',
+        radius: ['50%', '70%'],
+        avoidLabelOverlap: false,
+        legendHoverLink: false,
+        label: {
+          normal: {
+            show: false,
+            formatter: '{c}',
+            position: 'center'
+          },
+          emphasis: {
+            show: true,
+            textStyle: {
+              fontSize: '24',
+              fontWeight: 'bold'
+            }
+          }
+        },
+        labelLine: {
+          normal: {
+            show: false
+          }
+        },
+        data: [
+          {
+            value: dataArr[0],
+            name: '百度',
+            itemStyle: {
+              color: {
+                type: 'linear',
+                colorStops: [{
+                  offset: 0, color: '#B84592' // 0% 处的颜色
+                }, {
+                  offset: 1, color: '#FF4F81' // 100% 处的颜色
+                }],
+                globalCoord: false // 缺省为 false
+              }
+            }
+          },
+          {
+            value: dataArr[1],
+            name: '360',
+            itemStyle: {
+              color: {
+                type: 'linear',
+                colorStops: [{
+                  offset: 0, color: '#9AFFC2' // 0% 处的颜色
+                }, {
+                  offset: 1, color: '#7F7BFF' // 100% 处的颜色
+                }],
+                globalCoord: false // 缺省为 false
+              }
+            }
+          },
+          {
+            value: dataArr[2],
+            name: '搜狗',
+            itemStyle: {
+              color: {
+                type: 'linear',
+                colorStops: [{
+                  offset: 0, color: '#7FA5FF' // 0% 处的颜色
+                }, {
+                  offset: 1, color: '#855EFF' // 100% 处的颜色
+                }],
+                globalCoord: false // 缺省为 false
+              }
+            }
+          },
+        ]
+      }
+    ]
+  };
+} 

miniprogram/pages/index/today-chart-opt.js

@@ -0,0 +1,144 @@
+//mock
+// {
+//   dayTime: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
+//   visitorNum: [17, 6, 12, 7, 9, 12, 19, 8, 14, 15, 17, 8, 18],
+//   clickNum: [7, 19, 5, 15, 6, 11, 17, 14, 12, 16, 9, 11, 14]
+// }
+
+
+/**
+ * 获取 toDay chart opt
+ * 
+ * data:{
+ *    dayTime:number[]     日期
+ *    visitorNum:number[]  访客数
+ *    clickNum:number[]    点击数
+ * }
+ * 
+ * type:string    显示方式   line | bar
+ */
+export let getToDayChartOpt = function(data, type) {
+  return {
+    legend: {
+      data: [{
+          name: '访客数',
+          icon: 'rect'
+        },
+        {
+          name: '点击数',
+          icon: 'rect'
+        }
+      ],
+      textStyle: {
+        fontSize: 14
+      },
+      left: 0,
+      top: 0,
+      itemGap: 30,
+      itemWidth: 20,
+      itemHeight: 6
+    },
+    grid: {
+      left: '0',
+      right: '0',
+      bottom: '0',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line',
+        lineStyle: {
+          color: 'rgba(0, 0, 0, 0.4)',
+          // width:30,
+          // shadowColor:'rgba(0, 0, 0, 0.5)',
+          // shadowBlur:1
+        }
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: data.dayTime,
+      boundaryGap: false, //从0开始
+      axisLine: { //坐标线
+        show: false
+      }, //刻度线
+      axisTick: {
+        show: false
+      }, //文字
+      axisLabel: {
+        color: '#666'
+      }
+    },
+    yAxis: {
+      show: false
+    },
+    series: [{
+        name: '访客数',
+        data: data.visitorNum,
+        type: type || 'line',
+        itemStyle: {
+          color: '#028DFF', //颜色
+        },
+        lineStyle: {
+          width: 2
+        },
+        showSymbol: false, //是否显示转折符号
+        // smooth:true,    //平滑显示
+        areaStyle: { //区域样式
+          opacity: '0.3',
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+                offset: 0,
+                color: '#028DFF' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,255,255,1)' // 100% 处的颜色
+              }
+            ],
+            globalCoord: false // 缺省为 false
+          }
+        }
+      },
+      {
+        name: '点击数',
+        data: data.clickNum,
+        type: type,
+        itemStyle: {
+          color: '#E72120', //颜色
+        },
+        lineStyle: {
+          width: 2
+        },
+        showSymbol: false, //是否显示转折符号
+        // smooth:true,    //平滑显示
+        areaStyle: { //区域样式
+          opacity: '0.3',
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+                offset: 0,
+                color: '#E72120' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,255,255,1)' // 100% 处的颜色
+              }
+            ],
+            globalCoord: false // 缺省为 false
+          }
+        }
+      }
+    ]
+  }
+};

miniprogram/pages/self/self.js

@@ -0,0 +1,66 @@
+// miniprogram/pages/self/self.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

miniprogram/pages/self/self.json

@@ -0,0 +1 @@
+{}

miniprogram/pages/self/self.wxml

@@ -0,0 +1,23 @@
+<view class="self-head">
+  <image class="logo" mode="widthFix" src="/images/logo.png"></image>
+  <navigator class="link" url="//www.chuangzhikeji.com" target="_balck">www.chuangzhikeji.com</navigator>
+</view>
+
+<view class="info-list">
+
+  <view class="item">
+    <text class="key">项目经理</text>
+    <text class="val">杨经理</text>
+  </view>
+
+  <view class="item">
+    <text class="key">项目经理</text>
+    <text class="val">杨经理</text>
+  </view>
+
+  <view class="item">
+    <text class="key">项目经理</text>
+    <text class="val">杨经理</text>
+  </view>
+
+</view>

miniprogram/pages/self/self.wxss

@@ -0,0 +1,46 @@
+.self-head {
+  background-color: #fff;
+  padding: 60rpx 30rpx 70rpx;
+  text-align: center;
+  margin: -30rpx;
+  margin-bottom: 0;
+}
+
+.self-head  .logo {
+  display: block;
+  width: 80rpx;
+  max-height: 80rpx;
+  margin: 0 auto;
+  margin-bottom: 30rpx;
+}
+
+.info-list {
+  background-color: #fff;
+  margin-left: -30rpx;
+  margin-right: -30rpx;
+  margin-top: 20rpx;
+  padding: 0 30rpx;
+}
+
+.info-list .item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 60rpx;
+  padding: 20rpx 0;
+}
+
+.info-list .item~.item {
+  border-top: 1px solid #e0e0e0;
+}
+
+.info-list .val {
+  color: #999;
+}
+
+.info-list .key {
+  max-width: 50%;
+  flex-shrink: 0;
+  margin-right: 10rpx;
+  overflow: hidden;
+}

miniprogram/pages/setting/setting.js

@@ -0,0 +1,75 @@
+// miniprogram/pages/setting/setting.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    pickerArr: ['每日推送1', '每日推送2', '每日推送4', '每日推送3'],
+    index:0,
+    
+  },
+
+  bindPickerChange(e) {
+    this.setData({
+      index: e.detail.value
+    })
+  },
+
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

miniprogram/pages/setting/setting.json

@@ -0,0 +1 @@
+{}

miniprogram/pages/setting/setting.wxml

@@ -0,0 +1,8 @@
+
+		<view class="input-tit">流量报告推送</view>
+		<view class="pos-r">
+			<picker class="ele" value="{{index}}" range="{{pickerArr}}" bindchange="bindPickerChange">
+        <view class="picker">当前选择：{{pickerArr[index]}}</view>
+      </picker>
+			<span class="app-r-icon"></span>
+		</view>

miniprogram/pages/setting/setting.wxss

@@ -0,0 +1,12 @@
+.input-tit {
+  padding-bottom: 20rpx;
+}
+
+.ele {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20rpx;
+  background: white;
+  border: 1px solid #e0e0e0;
+  height: 88rpx;
+}

miniprogram/pages/time-filter/time-filter.js

@@ -0,0 +1,66 @@
+// miniprogram/pages/time-filter/time-filter.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

miniprogram/pages/time-filter/time-filter.json

@@ -0,0 +1 @@
+{}

miniprogram/pages/time-filter/time-filter.wxml

@@ -0,0 +1,31 @@
+<view class="quick-time">
+  <text class="on">今天</text>
+  <text>最近7天</text>
+  <text>最近30天</text>
+  <text>昨天</text>
+  <text>本周</text>
+  <text>本月</text>
+</view>
+
+<view class="black-head">
+  <text class="tit">自定义</text>
+</view>
+
+<view class="black-body diy-time">
+
+  <view class="time-item">
+    <label for="start">
+      开始:
+    </label>
+    <picker class="ele" mode="date" id="start"></picker>
+  </view>
+
+  <view class="time-item">
+    <label for="end">
+      结束:
+    </label>
+    <picker class="ele" mode="date" id="end"></picker>
+  </view>
+
+  <button class="on-ok">确定</button>
+</view>

miniprogram/pages/time-filter/time-filter.wxss

@@ -0,0 +1,56 @@
+.quick-time {
+  display: flex;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  justify-content: space-between;
+  padding-bottom: 50rpx;
+}
+
+.quick-time text {
+  width: 200rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  text-align: center;
+  background: rgba(255, 255, 255, 1);
+  border: 1px solid rgba(224, 224, 224, 1);
+  color: #999;
+  font-size: 30rpx;
+  margin-bottom: 16rpx;
+  transition: all 0.3s ease;
+}
+
+.quick-time text.on {
+  color: #e72120;
+  background: rgba(231, 33, 32, 0.2);
+  border: 1px solid rgba(231, 33, 32, 1);
+}
+
+.diy-time {
+  padding-top: 20rpx;
+}
+
+.time-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30rpx;
+}
+
+.time-item label {
+  width: 100rpx;
+}
+
+.time-item .ele {
+  width: calc(100% - 100rpx);
+  box-sizing: border-box;
+  padding: 20rpx;
+  background: white;
+  border: 1px solid #e0e0e0;
+  height: 88rpx;
+  border-radius: 3px;
+}
+.diy-time .on-ok{
+  background: #e72120;
+  color:#fff;
+  border: none;
+}

miniprogram/style/components/black.wxss

@@ -0,0 +1,22 @@
+
+.black {
+  margin-top: 30rpx;
+}
+
+.black-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 20rpx;
+}
+
+.black-head .tit {
+  font-size:28rpx;
+  font-weight: bold;
+  border-left: 6rpx solid #e72120;
+  padding-left: 14rpx;
+}
+
+.black-head  .oper {
+  font-size: 28rpx;
+}

miniprogram/style/style.wxss

@@ -0,0 +1,12 @@
+
+page{
+  padding: 30rpx;
+  box-sizing: border-box;
+  background-color: #f8f8f8;
+  font-size: 28rpx;
+}
+
+
+.link{
+  color: #2679F1;
+}

project.config.json

@@ -0,0 +1,41 @@
+{
+	"miniprogramRoot": "miniprogram/",
+	"cloudfunctionRoot": "cloudfunctions/",
+	"setting": {
+		"urlCheck": true,
+		"es6": true,
+		"postcss": true,
+		"minified": true,
+		"newFeature": true
+	},
+	"appid": "wxcd573b7e3315494b",
+	"projectname": "we_view_app",
+	"libVersion": "2.2.5",
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"plugin": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"list": []
+		},
+		"miniprogram": {
+			"current": 0,
+			"list": [
+				{
+					"id": -1,
+					"name": "db guide",
+					"pathName": "pages/databaseGuide/databaseGuide"
+				}
+			]
+		}
+	}
+}