文章 - 基于wepy快速开发微信小程序，适合新手入门，集合n多工具！

从第一次发布成功到现在小程序又重新大改了一遍，集合n多小工具，武侯的猫终于迭代完了，这是一个练手项目，基本覆盖所有组件（echarts，video，canvas）。组件及交互效果借鉴了很多开源项目，基本按功能全部拆分出组件，主要是了解基本的一些写法，后期可能会把后端补上。

开源地址：https://github.com/wuhou123/wxxcx，

预览地址：

一、滑动tab页
武侯的猫

</template>

export default class Forexpress extends wepy.page {
  config = {
    navigationBarTitleText: '快递查询'
  };
  components = {
    ForexpressItem,
    IdCard,
    Figure,
    MobileHome,
    PeoPleCard    
  }

data = {
    showMark: false,
    winHeight: '', //窗口高度
    currentTab: 0, //预设当前项的值
    scrollLeft: 0, //tab标题的滚动条位置,
    searchArr:['快递','身份证','银行卡号','手机号码','身材'],
    history:[]
  };

methods = {
    switchTab: function(e) {
      let title = `${this.searchArr[e.detail.current]}查询`   
      wx.setNavigationBarTitle({
        title: title
      });
      this.currentTab = e.detail.current;
      this.$apply();
      this.methods.checkCor.call(this);
    },
    // 点击标题切换当前页时改变样式
    swichNav: function(e) {
      let title = `${this.searchArr[e.detail.current]}查询`
      wx.setNavigationBarTitle({
        title: title
      });
      var cur = e.target.dataset.current;
      if (this.data.currentTaB == cur) {
        return false;
      } else {
        this.currentTab = cur;
      }
    },
    //判断当前滚动超过一屏时，设置tab标题滚动条。
    checkCor: function() {
      if (this.data.currentTab > 3) {
        this.scrollLeft = 300;
      } else {
        this.scrollLeft = 0;
      }
    },
    onShareAppMessage() {
      return {
        title: '武侯的猫-打造最简小工具',
        path: 'pages/forexpress',
        success(res) {
          console.log(res);
        },
        fail(res) {
          console.log(res);
        }
      };
    },
    onGotUserInfo(e) {
      if (e.detail.userInfo) {
        this.showMark = false;
        wx.setStorage({
          key: 'user',
          data: e.detail.userInfo
        });
      }
    }
  };
  onLoad() {
    let that = this;
    //动画
    var animation = wx.createAnimation({
      duration: 1200,
      timingFunction: 'linear'
    });

this.animation = animation;

// animation.scale(2, 2).rotate(45).step()

this.setData({
      animationData: animation.export()
    });
    try {
      var res = wx.getSystemInfoSync();
      //start
      var clientHeight = res.windowHeight,      
        clientWidth = res.windowWidth,
        rpxR = 750 / clientWidth;
      var calc = (clientHeight - 1/rpxR*80)*rpxR;
      console.log(calc);
      this.winHeight = calc;
      //end
    } catch (e) {
      console.log('获取设备信息失败' + e);
    }
  }

onShow() {
    let self = this;
    try {
      var res = wx.getStorageSync('user');
      console.log(res);
      if (res) this.showMark = false;
      if (!res) this.showMark = true;
      self.$apply();
    } catch (e) {
      this.showMark = true;
    }
    //快递历史
    this.history = wx.getStorageSync('saveList');
    this.$apply();
  }
}
</script>

二、wx-echarts

export default class planT extends wepy.page {
    config = {
      navigationBarTitleText: '计划统计'
    }

components = {
      echarts: Echarts,
    }

data = {
        ec: {
        option: {
            backgroundColor: '#ffffff',
            color: ['#37A2DA', '#FF9F7F'],
            tooltip: {},
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },
            radar: {
                // shape: 'circle',
                indicator: [{
                    name: '阅读',
                    max: 500
                },
                {
                    name: '运动',
                    max: 500
                },
                {
                    name: '学习',
                    max: 500
                },
                {
                    name: '游戏',
                    max: 500
                },
                {
                    name: '绘画',
                    max: 500
                },
                {
                    name: '休息',
                    max: 500
                }
                ]
            },
            series: [{
                name: '计划 vs 实际',
                type: 'radar',
                data: [{
                    value: [500, 500, 500, 500, 500, 500],
                    name: '计划'
                },
                {
                    value: [50, 50, 50, 50, 50, 50],
                    name: '实际'
                }
                ]
            }]
        }
    }
    }
    methods = {
      goTo(path){
        console.log(path)
        this.$navigate(path)
      },
      showTitle(title){
          wx.showToast({
            title: title,
            icon: 'none'
          })
      }
    }

三、卡片式动画
武侯的猫
四、加速器模仿微信手机摇一摇

五、video视频播放类