微信小程序开发记录

微信小程序开发记录，做个笔记后面不踩坑

1、终端npm安装插件前需要使用 npm init生成包管理文件
且需要配置

//project.config.json
 "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ],

2、 微信小程序中方便使用的contUp数字滚动插件
使用示例
下例需求是8s更新数据，所以记录了老的值，这样每次更新会从老的值滚动到新的值

//  {{today.payAmount}} 万元
// components/card-1/index.js
const {dcApi} = require('../../api/index.js');
const {formatNumber} = require('../../utils/util');
import WxCountUp from '../../plugins/wx-countup/WxCountUp';

Component({
  options: {
    addGlobalClass: true
  },
  data: {
    today: {
      payAmount: 0, //今日成交金额
      payMemberNum: 0, //今日支付人数
      totalMemberNum: 0, //总会员数
      old_payAmount:0,
      old_payMemberNum:0,
      old_totalMemberNum:0,

    },
    yesterday: {
      increaseMember: 0, //昨日新增人数
      payAmount: 0, //昨日成交金额
      payMember: 0, //昨日支付人数
      permeability: 0 //昨日会员渗透率
    }
  },
  lifetimes: {
    attached() {
      this.getToday();
      this.startInterval();
    },
    detached() {
      this.stopInterval();
    }
  },
  methods: {
    getToday() {
      dcApi.online_member().then((res) => {
        this.start('today.payAmount',res.data.payAmount,2, this.data.today.old_payAmount,'today.old_payAmount');
        this.start('today.payMemberNum',res.data.payMemberNum,0,this.data.today.old_payMemberNum,'today.old_payMemberNum');
        this.start('today.totalMemberNum', res.data.totalMemberNum,0, this.data.today.old_totalMemberNum ,'today.old_totalMemberNum');
      });
    },

    start(target, endVal, fixed, oldVal = 0,old_target) {
      let option = {
        startVal: oldVal,
        decimalPlaces: fixed,
        duration: 2
      };
      this.countUp = new WxCountUp(target, endVal, option, this);
      this.countUp.start(() => {
        this.setData({
          [old_target]: endVal
        });
      });
    },

    startInterval() {
      const that = this; // 缓存 this
      this.intervalId = setInterval(() => {
        that.getToday();
      }, 8000);
    },

    stopInterval() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    },
   
  }
});

3、微信小程序中的echatrs

1. ec-canvas版本要和echarts版本对应
2. 可以在echarts指定下载所需要的图标以减小体积
3. 小程序的图表format返回无法识别xxx这种标签
4. echatrs容器一定要指定宽高否则无法显示
5. 真机调试需要域名白名单，真机调试1.0会有各种奇怪的bug，建议用2.0
6. 抖音小程序头部自定义需要主体满足条件，微信小程序不需要（截至目前）
7. 区分各种页面跳转方式（是否需要保存上一个页面），wx.reLaunch()删除所有页面跳转新页面，防止用户用手机自带返回返回到上一张页面
8. 代码使用示例 (组件中的echatrs+定时更新数据)

import * as echarts from '../../ec-canvas/echarts';
const {dcApi} = require('../../api/index.js');
const {getColForCollection} = require('../../utils/util');

Component({
  data: {
    ec: {
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    }
  },
  options: {
    addGlobalClass: true
  },
  lifetimes: {
    attached: function () {
      // 获取组件
      this.ecComponent = this.selectComponent('#mychart-fourth');
      this.init();
      this.startInterval();
    },
    detached() {
      this.stopInterval();
    }
  },
  methods: {
    init() {
      this.ecComponent.init((canvas, width, height, dpr) => {
        // 获取组件的 canvas、width、height 后的回调函数
        // 在这里初始化图表
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        this.setOption(chart);
        // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
        this.chart = chart;
        this.setData({
          isLoaded: true,
          isDisposed: false
        });
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return chart;
      });
    },
    setOption(chart) {
      dcApi.online_summary().then((res) => {
        const data = getColForCollection(
          res.data,
          ['brand', 'amt'],
          ['name', 'value']
        );
        let option = {...}
        this.ecComponent.chart.setOption(option)
      });
    },
    startInterval() {
      const that = this; // 缓存 this
      this.intervalId = setInterval(() => {
        that.setOption();
      }, 8000);
    },
    stopInterval() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    }
  }
});