布局 – gitweixin

多媒体 1月 2,2019

功能介绍

滚动到视频一半的位置，进行切换视频播放
记录所有视频的播放位置，再次切换回来的时候继续播放。
当播放视频滚出可见范围的时候，立刻停止播放（声音停止）。滚动停止的时候新的视频开始播放。
全屏播放。（这里存在一个坑，全屏的时候会立刻自动退出全屏）
基础上拉加载，上拉刷新（demo中未提现，配置下app.json即可实现）

代码解读

/* global getApp Page wx */
const app = getApp()

// 基础版的防抖函数
let timeout
function debounce (func, wait) {
  return function () {
    clearTimeout(timeout)
    timeout = setTimeout(func, wait)
  }
}

// 基础版的节流函数
let timeout2 = null
function throttle (func, wait) {
  return function () {
    if (!timeout2) {
      timeout2 = setTimeout(function () {
        clearTimeout(timeout2)
        timeout2 = null
        func()
      }, wait)
    }
  }
}

Page({
  data: {
    width: wx.getSystemInfoSync().windowWidth,
    height: wx.getSystemInfoSync().windowHeight,

    videoLoading: false,
    videoList: [],

    location: [],
    isLock: false,  // 当前栗子无用，如果有些弹窗控制不住背后的视频列表滚动的话，isLock的作用就发挥出来了。
    localIndex: 0,
    noPageScroll: false
  },
  info: {
    videoPlayDetail: {} // 存放所有视频的播放位置
  },
  onLoad (options) {
    this.getVideoList(1)
  },
  /**
   * 分页获取视频
   */
  getVideoList (initPage) {
    const { videoLoading, videoList } = this.data
    if (videoLoading) {
      return
    }
    this.setData({
      videoLoading: true
    })
    // 制造模拟数据
    let data = [{
      cover: 'https://wx4.sinaimg.cn/mw690/ec4d7780ly1fsvx1996xoj20da07in0t.jpg',
      src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
      width: 480,
      height: 272,
      title: '腾讯大学视频',
      isPlay: false
    }]
    data = data.concat(data)
    data = data.concat(data)
    data = data.concat(data)

    console.log(data)
    // 模拟请求
    setTimeout(() => {
      this.setData({
        videoList: videoList.concat(this.formatVideoList(data)),
        videoLoading: false
      })
      // 给数据足够的渲染时间，之后进行视频位置的测量
      setTimeout(() => {
        this.getLocationInfo()
        if (initPage) { // 如果是首次进入，就自动播放第一个视频
          this.showVideoList(0)
        }
      }, 1000)
    }, 1000)
  },
  /**
   * 格式化视频列表
   * @param {Array} videoList 需要格式化的视频列表
   */
  formatVideoList (videoList) {
    const { width, height } = this.data
    return videoList.map(value => {
      let styleHight = width * value.height / value.width
      styleHight = styleHight > 0.7 * height ? 0.7 * height : styleHight
      return {
        ...value,
        styleHight: Math.floor(styleHight),
        currentTime: 0,
        isPlay: false
      }
    })
  },
  // 点击播放
  eventPlay (event) {
    const { index } = event.currentTarget.dataset
    this.showVideoList(index)
  },
  // 视频更新的时候不断的去记录播放的位置
  eventPlayupdate (event) {
    const { detail: { currentTime }, currentTarget: { dataset: { index } } } = event

    this.info.videoPlayDetail[index] = currentTime
  },
  // 到底加载更多
  onReachBottom () {
    this.getVideoList()
  },
  // 设置播放的视频
  showVideoList (index) {
    console.log(index)
    let { videoList } = this.data
    videoList = videoList.map(value => {
      value.isPlay = false
      return value
    })
    if (index >= 0 && videoList[index]) {
      videoList[index].isPlay = true
    }
    this.setData({
      videoList
    })
  },
  // 全屏播放，设置当前页面滚动无效，全屏的时候，会触发滚动事件。
  eventFullScreen (event) {
    console.log(event)
    const { fullScreen } = event.detail
    this.setData({
      noPageScroll: fullScreen
    })
  },
  onPageScroll ({ scrollTop }) {
    if (this.data.noPageScroll) {
      return
    }
    // 获取数据分别放置到各自的节流防抖函数中，防止调用的时候数据已近发生改变

    // 节流，每200毫秒触发一次
    throttle(() => {
      console.log('throttle')
      let { location, localIndex, videoList } = this.data
      let index = 0
      for (let i = 0; i < location.length; i++) {
        if (location[i].start <= scrollTop && location[i].end >= scrollTop) {
          index = i
          break
        }
      }

      if (localIndex !== index) {
        videoList[localIndex].currentTime = this.info.videoPlayDetail[localIndex]
        this.setData({
          videoList
        })
        this.showVideoList()
      }
    }, 200)()

    // 防抖，只触发一次
    debounce(() => {
      console.log('debounce')
      let { location, isLock } = this.data
      if (!isLock) {
        let index = 0
        for (let i = 0; i < location.length; i++) {
          if (location[i].start <= scrollTop && location[i].end >= scrollTop) {
            index = i
            break
          }
        }

        this.showVideoList(index)
        this.setData({
          localIndex: index
        })
      }
    }, 200)()
  },
  // 测量当前的所有视频的高度，计算出视频播放与否的位置
  getLocationInfo () {
    const { videoList } = this.data
    var query = wx.createSelectorQuery()
    for (let i = 0; i < videoList.length; i++) {
      query.select(`#video${i}`).boundingClientRect()
    }

    const length = videoList.length
    const location = []
    query.exec(res => {
      console.log(res)

      let start = 0
      let end = 0
      let lei = 0
      for (let i = 0; i < length; i++) {
        if (i === 0) {
          start = 0
          end = videoList[i]['styleHight'] / 2
        } else {
          start = end
          end = lei + videoList[i]['styleHight'] / 2
        }

        location.push({
          start: start,
          end: end
        })
        lei = lei + res[i].height + 10
      }
      this.setData({
        location
      })
    })
  }
})

github地址:https://github.com/kuckboy1994/mp_scroll_play_demo

作者 east

12月 25,2018

仿分答小程序代码

王思聪的一元试听引爆了分答。本小程序模仿分答，

功能：

flex布局

基本使用官方推荐的flex来写布局，结合margin和padding能实现大部分的样式要求。

动态刷新

tabBar的第一个菜单「收听」使用了微信提供的组件scroll-view可滚动视图区域，页面加载后从网络上拉取数据填入视图层同时写入Storage（应该就是html5中的localStorage），滚动到底部时触发更新事件，同时设置标志位防止重复触发。应用官方的加载提示动画。

tip：滚动视图组件的上下滚动用鼠标滚轮，使用鼠标拖动的话很容易触发下拉事件，哪怕并没有到达顶部。滚动视图组件内不要放与内容无关的元素

带参切换页面

点击某个问题进入问题的详情页，同时导航网址带有该问题的编号，具体数据优先从Storage抓取，查询不到就请求后台。同样的，点击个人头像或者个人简介bar进入个人详情页。（未完全完成）

template写视图层模板

找人页面的两个榜单均使用template渲染

github地址:https://github.com/davedavehong/fenda-mock

作者 east

12月 17,2018

功能简介

本着便利的理念，实现了商城类APP的主要功能。

用户能够根据点击不同的商品分类，跳转页面看到各种商品的列表。
点击商品可以加入购物车，在购物车中还能实现对商品的增加或者减少数量、全选反选商品、删除购物车商品等操作。
首页中，点击左上角的按钮能够添加默认收货地址。
点击右上角的扫一扫标志，还能扫描二维码（下面的gif介绍是模拟器的效果，只能打开电脑中的图片进行扫描，真机可以打开相机进行扫描）。
首页中最顶上实现了图片轮播及自动切换，底部实现了滚动视图，能够横着滑动展示商品信息。

我们先来看看效果图，稍后再仔细介绍每一点的实现方式。

GitHub源码地址：https://github.com/TeanLee/hema

作者 east

7月 6,2018

功能介绍

好奇微信小程序是如何制作的，也对盒马app感兴趣，就尝试写了这个盒马小程序。实现了app的部分功能，还有部分功能未实现，和大家一起学习
文章末有GitHub源项目代码地址

已实现的功能

购物车的操作。添加商品、删除商品
新增收货地址
点击二维码图片能扫一扫
图片轮播效果
滚动视图展示商品详情

项目效果图

页面简介

购物车的操作

添加购物车

添加收货地址

部分功能点实现介绍

将商品加入购物车

我使用easymock构建了一些数据，用于商品在列表展示。
这是wxml，用于商品的展示。

<scroll-view scroll-y>
    <block wx:for="{{goods}}" wx:key="index" wx:for-index="index">
        <view class="weui-cells">
            <view class="weui-cell">
                <view class="weui-cell__hd">
                    <image src="{{item.image}}" />
                </view>
                <view class="weui-cell__bd">
                    <view class="goodsList__bd__intro">{{item.name}}</view>
                    <view class="view__bd__price">
                        <text class="price left">￥{{item.price}}/{{item.unit}}</text>
                        <text class="add right" bindtap="addInCart" id="{{index}}">+</text>
                    </view>
                </view>
            </view>
        </view>
    </block>
</scroll-view>

在执行for循环遍历数据内容的时候，为每一个商品添加了index，用于确定用户将哪一件商品加入了购物车。给加号添加了一个绑定事件，用户点击加号，能将该商品放入购物车列表。
js部分代码：
这里最重要的是在app.js中添加了一个全局变量cardList，用于存储用户加入购物车的商品。这样，就能实现多个页面都能对购物车列表的数据进行操作了。

globalData: {
  cardList: []
}

商品展示界面：页面开始加载的时候，就请求数据，用于商品列表的显示。

wx.request({
  url: "https://www.easy-mock.com/mock/5a223b51707056548f086d8b/hema/getGoods",
  success: (res) => {
    console.log(res.data.data.goods);
    this.setData({
      goods: res.data.data.goods
    })
  }
})

用户将商品加入购物车执行的操作

addInCart: function(e) {
  const good = this.data.goods[e.currentTarget.id]; // 根据index，判断用户点击了哪个商品加入购物车
  const cart = app.globalData.cardList; // 获取购物车列表
  cart.push(good); // 用户选择商品加入购物车后，将该商品加入购物车列表
},

调整商品的购买数量

将商品加入购物车后，还有可能对添加的商品进行加减，调整购买数量。
购物车wxml界面：

<block wx:for="{{goodsList}}" wx:key="index" data-index="index">
    <view class="weui-cell">
        <view class="weui-cell__hd">
            <icon type="success" color="#23a3ff"></icon>
        </view>
        <view class="weui-cell__bd">
            <image src="{{item.image}}" />
        </view>
        <view class="weui-cell__ft right">
            <text class="proIntr left">{{item.name}}</text>
            <text class="price left">￥{{item.price}}/{{item.unit}}</text>
            <view class="count">
                <text class="reduce left" bindtap="reduceCount" id="{{index}}">-</text>
                <text class="number left">{{item.count}}</text>
                <text class="add left" bindtap="addCount" id="{{index}}">+</text>
            </view>
        </view>
    </view>
</block>

给加号减号分别添加了点击事件，循环时还要用index标出用户对购物车的哪一件商品进行了加减操作。
js部分：

onLoad: function (options) {
  this.setData({
    // 页面加载时就给购物车显示商品数量
    goodsList: app.globalData.cardList
  });
  this.sumMoney();
},
// 增加商品数量
addCount:function (e) {
  var that = this;
  console.log(e);
  const goodId = e.currentTarget.id;
  console.log(that.data.goodsList[goodId]);
  that.data.goodsList[goodId].count++;
  console.log(that.data.goodsList[goodId]);
  this.setData({
    goodsList: that.data.goodsList
  })
  this.sumMoney();
},
// 减少商品数量
reduceCount: function(e) {
  var that = this;
  const goodId = e.currentTarget.id;
  // console.log(that.data.goodsList[goodId]);
  if(that.data.goodsList[goodId].count <= 1) {
    that.data.goodsList[goodId].count = 1;
    wx.showModal({
      title: '数量小于1',
      content: '不允许操作',
      duration: 2000
    })
  } else {
    that.data.goodsList[goodId].count--;
  }
  // console.log(that.data.goodsList[goodId]);
  this.setData({
    goodsList: that.data.goodsList
  })
  this.sumMoney();
},
// 计算所有商品的钱数
sumMoney: function() {
  var count = 0;
  const goods = this.data.goodsList;
  console.log(goods);
  for(let i = 0; i < goods.length; i++) {
    // console.log(goods[i].count);
    // console.log(goods[i].price);
    count += goods[i].count*goods[i].price;
  }
  // console.log(count);
  this.setData({
    sum: count
  })
},

这个界面，我不确定获得的数据是什么，就反复测试了多次。

新增默认收货地址

在输入地址的界面，为每一个输入框都添加了监听输入的事件，用于监听用户输入的内容。
例如：

<view class="weui-cell">
    <view class="weui-cell__hd">
        <text class="weui-label mr60">收货地址</text>
    </view>
    <view class="weui-cell__bd">
        // 绑定的监听输入框事件 bindinput="getAddress"
        <input bindinput="getAddress" class="weui-input" placeholder="请输入收货地址" />
    </view>
</view>

我将获得的用户输入的默认地址存储到了storage中。
【划重点：微信小程序的storage存储大小是由限制的，不能将大量数据放在storage中】
js部分：

// 页面的初始数据，用户输入的收货地址、门牌号、姓名、联系电话
data: {
address: '',
num: '',
name: '',
phone: ''
},
backToChooseAddr: function() {
wx.navigateTo({
  url: "../chooseAddress/chooseAddress"
});
},
getAddress: function(e) {
this.setData({
  address: e.detail.value
})
},
getNum: function(e) {
this.setData({
  num: e.detail.value
})
},
getName: function(e) {
this.setData({
  name: e.detail.value
})
},
getPhone: function(e) {
this.setData({
  phone: e.detail.value
})
},
// 用户点击保存后，对输入的数据进行存储，并反馈存储状态
saveInfo: function() {
wx.setStorage({
  key: "name",
  data: [{address:this.data.address}, {num: this.data.num}, {name: this.data.name}, {phone: this.data.phone}],
  success: function() {
    wx.showToast({
      title: "地址保存成功",
      icon: 'success',
      duration: 2000
    })
    setTimeout(function(){
      wx.navigateTo({
        url: "../chooseAddress/chooseAddress"
      })
    },1000);

  }
})

用户默认收货地址的显示，就从storage中按照key-value的方式取出用户存在storage中的地址信息。
js部分：

onShow: function () {
  var that = this;
  wx.getStorage({
    key: "name",
    success: function(res) {
      console.log(res);
      if(res.data.length > 0) {
        that.setData({
          address: res.data[0].address,
          num: res.data[1].num,
          name: res.data[2].name,
          phone: res.data[3].phone
        })
      }
    }
  })

图片轮播和滚动视图部分

图片轮播
给swiper组件添加current=’{{activeIndex}}’就能判断当前展示图片的下标，再根据下标该表小圆点的展示状态（给相应的小圆点一个active类，有不同的样式）。小圆点也绑定了点击事件，能根据用户点击不同的小圆点，动态改变图片的展示状态。

<swiper class="page__bd__scroll" current='{{activeIndex}}' bindchange='swiperTab'>
  <swiper-item>
    <image class="page__scroll__item" src=""/>
  </swiper-item>
  <swiper-item>
    <image class="page__scroll__item" src=""/>
  </swiper-item>
  <swiper-item>
    <image class="page__scroll__item" src=""/>
  </swiper-item>
  <swiper-item>
    <image class="page__scroll__item" src=""/>
  </swiper-item>
  <swiper-item>
    <image class="page__scroll__item" src=""/>
  </swiper-item>
</swiper>

<ul class="page__scroll__btns">
  <li class="page__scroll__btn {{activeIndex==0?'active':''}}" bindtap="changeTag" data-index="0"></li>
  <li class="page__scroll__btn {{activeIndex==1?'active':''}}" bindtap="changeTag" data-index="1"></li>
  <li class="page__scroll__btn {{activeIndex==2?'active':''}}" bindtap="changeTag" data-index="2"></li>
  <li class="page__scroll__btn {{activeIndex==3?'active':''}}" bindtap="changeTag" data-index="3"></li>
  <li class="page__scroll__btn {{activeIndex==4?'active':''}}" bindtap="changeTag" data-index="4"></li>
</ul>

js部分：

// activeIndex 是当前播放图片的下标
data: {
  activeIndex: 0
},
// 点击不同的小圆点切换不同的图片
changeTag:  function(e){
  var type = e.target.dataset.index;
  this.setData({
    activeIndex: type
  });
},
// 滑动切换图片，获取点击的下标，改变相应小圆点的状态
swiperTab: function(e){
  var type = e.detail.current;
  this.setData({
    activeIndex: type
  });
},

遇到的问题

1、在写静态界面的时候，给子元素一个margin值，一直会影响父元素的margin值，纠结了好久才知道这个问题可以用bfc的知识解决。给父元素添加一个overflow: hidden，通过这种方法创建一个bfc，就能避免子元素的margin样式影响到父元素。
2、从后台或者从其他地方获取数据时，很难一眼看出来传值的内容是什么，我就把数据输出到控制台，一点点判断。
3、异步问题。js是异步执行的。比如执行到取数据的时候，程序不会等着取到数据再执行下一步，而是立即执行下一步。这点在输出数据和设置数据时要尤为注意。

收获

写完这些还是收获满满的。
感触最大的就是要善于查文档。微信的weui提供了很多样式，只要引入样式库，照着使用文档写，能少很多事。还有就是微信小程序的api，里面有很多微信小程序自带的api，很方便。
面对bug心理承受也更大了。学会了一些调试技巧。使用easymock构建模拟数据。
对底层的盒子模型、异步等东西有了更深一层的理解。
项目地址：
https://github.com/TeanLee/hema
如果觉得还不错的话，给个小星星start鼓励一下哦
比心

联系方式：

如果有建议，欢迎联系我，一起学习。
wechat: ltt598625763
email: 598625763@qq.com

作者 east

6月 26,2018

手势解锁小程序

手势解锁是app上常见的解锁方式，相比输入密码方式操作起来要方便许多。下面展示如何基于微信小程序实现手机解锁。最终实现效果如下图:

微信小程序开发实例（手势解锁）

整个功能基于canvas实现，首先添加画布组件，并设定样式

XML/HTML代码

<!–index.wxml–>

1. <!–index.wxml–>
2. <view class=“container”>

1. <canvas canvas-id=“id-gesture-lock” class=“gesture-lock” bindtouchstart=“onTouchStart”
2. bindtouchmove=“onTouchMove” bindtouchend=“onTouchEnd”></canvas>

1. </view>

1. .gesture-lock {
2. margin: 100rpx auto;

1. width: 300px;
2. height: 300px;

background-color: #ffffff;
}

手势解锁实现代码在gesture_lock.js中(完整源码地址见末尾)。

初始化

JavaScript代码

1. constructor(canvasid, context, cb, opt){
2. this.touchPoints = [];

1. this.checkPoints = [];
2. this.canvasid = canvasid;

1. this.ctx = context;
2. this.width = opt && opt.width || 300; //画布长度

1. this.height = opt && opt.height || 300; //画布宽度
2. this.cycleNum = opt && opt.cycleNum || 3;

1. this.radius = 0; //触摸点半径
2. this.isParamOk = false;

1. this.marge = this.margeCircle = 25; //触摸点及触摸点和画布边界间隔
2. this.initColor = opt && opt.initColor || ‘#C5C5C3’;

1. this.checkColor = opt && opt.checkColor || ‘#5AA9EC’;
2. this.errorColor = opt && opt.errorColor || ‘#e19984’;

1. this.touchState = “unTouch”;
2. this.checkParam();

1. this.lastCheckPoint = null;
2. if (this.isParamOk) {

1. // 计算触摸点的半径长度
2. this.radius = (this.width – this.marge * 2 – (this.margeCircle * (this.cycleNum – 1))) / (this.cycleNum * 2)

1. this.radius = Math.floor(this.radius);
2. // 计算每个触摸点的圆心位置

1. this.calCircleParams();
2. }

this.onEnd = cb; //滑动手势结束时的回调函数
}

主要设置一些参数，如canvas的长宽，canvas的context，手势锁的个数(3乘3, 4乘4)，手势锁的颜色，手势滑动结束时的回调函数等。并计算出手势锁的半径。

计算每个手势锁的圆心位置

JavaScript代码

1. calCircleParams() {
2. let n = this.cycleNum;

1. let count = 0;
2. for (let i = 0; i < n; i++) {

1. for (let j = 0; j < n; j++){
2. count++;

1. let touchPoint = {
2. x: this.marge + i * (this.radius * 2 + this.margeCircle) + this.radius,

1. y: this.marge + j * (this.radius * 2 + this.margeCircle) + this.radius,
2. index: count,

1. check: “uncheck”,
2. }

1. this.touchPoints.push(touchPoint)
2. }

}
}

绘制手势锁

JavaScript代码

1. for (let i = 0; i < this.touchPoints.length; i++){
2. this.drawCircle(this.touchPoints[i].x, this.touchPoints[i].y, this.radius, this.initColor)

}
this.ctx.draw(true);

接下来就是识别用户的滑动行为，判断用户划过了哪些圆圈，进而识别出用户的手势。

在touchstart和touchmove事件中检测触发并更新画布

JavaScript代码

1. onTouchStart(e) {
2. // 不识别多点触控

1. if (e.touches.length > 1){
2. this.touchState = “unTouch”;

1. return;
2. }

1. this.touchState = “startTouch”;
2. this.checkTouch(e);

1. let point = {x:e.touches[0].x, y:e.touches[0].y};
2. this.drawCanvas(this.checkColor, point);

1. }

1. onTouchMove(e) {
2. if (e.touchState === “unTouch”) {

1. return;
2. }

1. if (e.touches.length > 1){
2. this.touchState = “unTouch”;

1. return;
2. }

1. this.checkTouch(e);
2. let point = {x:e.touches[0].x, y:e.touches[0].y};

this.drawCanvas(this.checkColor, point);
}

检测用户是否划过某个圆圈

JavaScript代码

1. checkTouch(e) {
2. for (let i = 0; i < this.touchPoints.length; i++){

1. let point = this.touchPoints[i];
2. if (isPointInCycle(e.touches[0].x, e.touches[0].y, point.x, point.y, this.radius)) {

1. if (point.check === ‘uncheck’) {
2. this.checkPoints.push(point);

1. this.lastCheckPoint = point;
2. }

1. point.check = “check”
2. return;

1. }
2. }

}

更新画布

JavaScript代码

1. drawCanvas(color, point) {
2. //每次更新之前先清空画布

1. this.ctx.clearRect(0, 0, this.width, this.height);
2. //使用不同颜色和形式绘制已触发和未触发的锁

1. for (let i = 0; i < this.touchPoints.length; i++){
2. let point = this.touchPoints[i];

1. if (point.check === “check”) {
2. this.drawCircle(point.x, point.y, this.radius, color);

1. this.drawCircleCentre(point.x, point.y, color);
2. }

1. else {
2. this.drawCircle(this.touchPoints[i].x, this.touchPoints[i].y, this.radius, this.initColor)

1. }
2. }

1. //绘制已识别锁之间的线段
2. if (this.checkPoints.length > 1) {

1. let lastPoint = this.checkPoints[0];
2. for (let i = 1; i < this.checkPoints.length; i++) {

1. this.drawLine(lastPoint, this.checkPoints[i], color);
2. lastPoint = this.checkPoints[i];

1. }
2. }

1. //绘制最后一个识别锁和当前触摸点之间的线段
2. if (this.lastCheckPoint && point) {

1. this.drawLine(this.lastCheckPoint, point, color);
2. }

this.ctx.draw(true);

当用户滑动结束时调用回调函数并传递识别出的手势

JavaScript代码

1. onTouchEnd(e) {
2. typeof this.onEnd === ‘function’ && this.onEnd(this.checkPoints, false);

1. }

1. onTouchCancel(e) {
2. typeof this.onEnd === ‘function’ && this.onEnd(this.checkPoints, true);

}

重置和显示手势错误

JavaScript代码

1. gestureError() {
2. this.drawCanvas(this.errorColor)

1. }

1. reset() {
2. for (let i = 0; i < this.touchPoints.length; i++) {

1. this.touchPoints[i].check = ‘uncheck’;
2. }

1. this.checkPoints = [];
2. this.lastCheckPoint = null;

this.drawCanvas(this.initColor);
}

如何调用

在onload方法中创建lock对象并在用户触摸事件中调用相应方法

JavaScript代码

1. onLoad: function () {
2. var s = this;

1. this.lock = new Lock(“id-gesture-lock”, wx.createCanvasContext(“id-gesture-lock”), function(checkPoints, isCancel) {
2. console.log(‘over’);

1. s.lock.gestureError();
2. setTimeout(function() {

1. s.lock.reset();
2. }, 1000);

1. }, {width:300, height:300})
2. this.lock.drawGestureLock();

1. console.log(‘onLoad’)
2. var that = this

1. //调用应用实例的方法获取全局数据
2. app.getUserInfo(function(userInfo){

1. //更新数据
2. that.setData({

1. userInfo:userInfo
2. })

1. that.update()
2. })

1. },
2. onTouchStart: function (e) {

1. this.lock.onTouchStart(e);
2. },

1. onTouchMove: function (e) {
2. this.lock.onTouchMove(e);

1. },
2. onTouchEnd: function (e) {

this.lock.onTouchEnd(e);
}

下载地址: 手势解锁

作者 east

6月 26,2018

仿网易蜗牛读书小程序

项目地址：杳杳飞花/Reading

项目开发过程：

每一次的开发都是一个成长的过程。在开发过程中，我们会遇到各种问题，这就给了我们一个独立思考的空间，能够锻炼我们解决问题和查询文档的能力。当然，在思考查询之后还可以请教他人、进行探讨，这样往往能够帮助我们快速的找到盲点，甚至能够了解到更多我们忽视的点。和别人的交流也是学习中很重要的一环，所以在此分享了自己小小的一点经验，欢迎一起交流，一起学习。

1、开始项目

在项目开始时，我们首先在 app.json 文件中配置主体界面，设置好tabBar 。在这里我们对小程序设置确定了一个整体的基调。

"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "网易蜗牛读书",
"navigationBarTextStyle":"black"
  },
  "tabBar":{
"color":"#999999",
"selectedColor":"#444444",
"backgroungColor":"#ffffff",
"borderStyle":"#e0e0e0",
"list": [
  {
    "pagePath":"pages/leader/leader",
    "iconPath": "assets/icons/lingdu.png",
    "selectedIconPath": "assets/icons/lingdu_sel.png",
    "text":"领读"
  },
  {
    "pagePath":"pages/stack/stack",
    "iconPath": "assets/icons/stack.png",
    "selectedIconPath": "assets/icons/stack_sel.png",
    "text":"分类"
  },
  {
    "pagePath": "pages/bookdesk/bookdesk",
    "iconPath": "assets/icons/bookdesk.png",
    "selectedIconPath": "assets/icons/bookdesk_sel.png",
    "text":"书桌"
  },
  {
    "pagePath":"pages/mine/mine",
    "iconPath": "assets/icons/mine.png",
    "selectedIconPath": "assets/icons/mine_sel.png",
    "text":"我的"
  }
]
 }

对于 pages 页面，在开发过程中进行过很多次调整。到现在为止觉得还算整洁和便于管理了。在起初，不管是一级页面还是二级页面，我都把它们放在了 pages 目录下。这样一开始还不觉得有什么，可是到后来页面越来越多，要对之前写过的页面进行修改和调整的时候，恍然间发现一堆文件夹，查找起来就觉得眼花缭乱，还要和页面进行配对，非常恼火。于是按照页面不同的级别层次，进行了相应的调整。按照不同的tabBar确定了主体的文件夹，然后各级页面又分别在各自所属层级的目录下。另外对于页面的命名尽量通俗易懂，这样方便自己对各页面进行查看和管理。

"pages":[
"pages/index/index", 
"pages/leader/leader",  // 领读人  
"pages/leader/stories/stories", 
"pages/leader/authors/authors", 
"pages/stack/stack",  // 分类
"pages/stack/booklist/booklist", 
"pages/stack/booklist/bookdetail/bookdetail",
"pages/bookdesk/bookdesk",   // 书桌
"pages/mine/mine",   // 我的
"pages/mine/news/news",    
"pages/logs/logs" 
  ],

在分类页面下具有多层级的一个页面创建展示：

所以在项目开始时首先思考的就是文件的排版问题，一个合理的结构，能够增强项目的可读性，以后操作和维护也更加方便，能够节约一定的时间。

小技巧：在创建pages页面时，如果我们在微信开发者程序的app.json文件中创建，就会自动的生成相应的文件夹，就不用我们一个一个去创建了。

2、页面布局和样式

小程序属于轻量级的应用，所以在忠于原App的基础上，对某些页面进行了一些调整。另外，在这里所有的页面都是我切的，可能会有人说很多页面都可以引用第三方框架，没有必要写原生代码。其实都没有错，要看自己写小程序是为了什么。我做这款小程序是为了学习小程序的开发，另外自己的前端之旅还是刚刚开启，所以为了在 coding 中锻炼自己对各种结构的敏感性，加深自己对样式属性的理解，我选择了自己写原生代码。

其实第三方框架是非常好的轮子，像微信团队开发的 weui 框架就很好用，它提供了很多的组件，能够让你摆脱切页面的繁琐，减少开发时间。对于 weui 的使用我也不是很熟练，所以在后续的学习中，还会继续修改这个小程序，用不同的方法实现页面。另外，在命名时，我使用了BEM规范，这样便于对页面结构的理解，使代码更易读。BEM命名法则给我们提供了一个很好的模板，在命名中就能体现各个元素之间的关系，CSS的命名更加语义化，元素更易读懂。而且独一无二的命名方式，使得代码能够得到更好的复用。

stack.wxml

3、使用 easy-mock 造数据

写完基本样式之后，要思考的就是数据问题。我们开发的页面很少有静态的。我们把数据写在页面中没有任何意义还平白增加了工作量。此时我们就需要模拟后台数据，让这些数据能够通过请求渲染到页面上。easy-mock 就给我们提供了一个很好的平台来造假数据，然后生成URL 通过 wx.request() 方法来获取数据，实现页面加载数据。

另外还可以在本地写假数据。今天在阅读别人文章时有看到用require()方式来请求数据的。对于这个不是很懂，通过查询之后才发现这是CommonJS 中的模块实现。实现一项功能的方法有很多种，我觉得我们不能只满足于一种方法，而应该广泛的涉猎，通过对不同方法的学习，让自己的知识储备更庞大。

项目基本功能：

1、小程序启动页面的实现

在这里我使用了setInterval（）和clearInterval（）方法来实现，然后通过switchTab来实现跳转

Page({
  data: {
    time:3
  },
  onLoad: function () {
    var count = setInterval(()=>{   
      this.setData({
        time : this.data.time -1
      });
      if(this.data.time == 0) {  
        wx.switchTab({
          url:'../leader/leader',
          complete:function(res) {
          }
        })
        clearInterval(count);
      }
    },1000);
  }
})

2、跳转页面时获取id, 获取不同数据

一开始自己对数据获取还不是很熟练，只能进行简单的单页面渲染。后来通过查文档和摸索，逐渐的能够进行复杂一些的数据获取。另外，在setData时，如果不清楚结构，可以使用console.log(); 方法及时的查看数据结构，一层层的剥开找到我们需要的数据层。为了更便于理解，附上两张动图展示，可以发现当我点击不同文章之后，跳转的页面获取的数据也不一样。

领读

分类

在这里分类页面的数据更整齐一些，就以它为例来说一说我是如何通过id来动态选择数据的。首先要清楚的是stack分类页面和跳转到的booklist详情页。在这里是通过navigator来跳转的，我们在url中设置表达式来动态获取id，url=”booklist/booklist?id={{index}}”，然后在 booklist.js 中，通过获取到的id，进行数据的选择。

stack:

stack.wxml

          <view>
              <view class="page-search"></view>
              <scroll-view wx:for="{{stack}}" wx:key="{{index}}" scroll-y="true">
                  <navigator class="stack-view " url="booklist/booklist?id={{index}}">
                      <image src="{{item.typeCover}}" class="stack-image"></image>
                      <text class="stack-name">{{item.bookTypes}}</text>
                      <text class="stack-numb">{{item.bookNumb}} ></text>
                  </navigator>
                  <view class="line"></view>
              </scroll-view>
          </view>
      </view>

stack.js

      Page({
	  data: {
	    stack:[],
	    id: ""
	  }, 
	  onLoad: function () {
	      var that = this;
		wx.request({
		  url:"https://www.easy-mock.com/mock/5a23a9a2ff38a436c591b6fa/getArticInfo",
		  success: function(res) {
		    console.log(res.data.data.stack);
		    console.log(res.data.data.List);              
		    that.setData({
		      stack: res.data.data.stack,
		      id: res.data.data.List
		    })
		  }
		})
	      },   
	})

booklist:

booklist.wxml

<view>
	  <view>
	      <view wx:for="{{bookList}}" wx:key="{{index}}">
		  <view class="book-list-root" bindtap="bindViewTap">  
		      <view class="book-list-child">
			  <view>
			      <text class="book-list-name">{{item.bookName}}</text>
			  </view>
			  <view>
			      <text class="book-list-autor">{{item.authorName}}</text>
			  </view>
			  <view class="book-list-des">
			      <text>{{item.bookDes}}</text>
			  </view>
		      </view>
		  </view>
		  <view class="line"></view>            
	      </view>
	  </view>
      </view>

booklist.js

        Page({
	  data: {
	      bookList:[],
	      stack:[]
	    },
	  onLoad: function (params) {
	    var that = this;
	      wx.request({
		url:"https://www.easy-mock.com/mock/5a23a9a2ff38a436c591b6fa/getArticInfo",
		success: function(res) {
		  that.setData({
		    bookList: res.data.data.stack[params.id].List.bookList,
		  })  
		}
	      })
	      },
	  })

3、对navigationBarTitleText的动态修改

在各个页面的JSON文件中，我们能够设置页面的标题，但是当我们进入不同页面需要获取不同标题时，就需要动态的进行修改。其实实现起来很简单，我们知道通过wx.setNavigationBarTitle() 方法就能够修改页面标题，然后跟第二点所述的方式一样，通过id来达到动态获取的效果。

另外要注意的是，我们要将JSON中的navigationBarTitleText设置为空，这样在跳转的过程中就不会有原始标题和修改标题之间跳转的一个效果，而是直接显示需要的标题。

     .json
	  {
	      "navigationBarBackgroundColor": "#fff",
	      "navigationBarTitleText": " ",
	      "navigationBarTextStyle": "black"
	  }
       .js
	onLoad: function (params) {
	  var that = this;
	    wx.request({
	      url:"https://www.easy-mock.com/mock/5a23a9a2ff38a436c591b6fa/getArticInfo",
	      success: function(res) {
		var bTypes = res.data.data.stack[params.id].bookTypes;
		wx.setNavigationBarTitle({ 
		  title: bTypes,
		},1);
	      }
	    })
	  },

4、两种页面跳转方式

（1）使用 navigator 方式

navigator的跳转能够保留当前页面，可返回

    <navigator class="stack-view " url="booklist/booklist?id={{index}}">
      //  点击部位，触发即可跳转
      </navigator>

      <view class="page__bd-items page-flex" bindtap="tomyNews">
		  <view class="page-items-lt">
		      <image src="../../assets/images/mines/news.png" />
		  </view>
		  <view class="page-items-md">我的消息</view>
		  <view class="page-items-others"></view>
		  <view class="page-items-ft">></view>
      </view>

      tomyNews:function(e) {
	  wx.navigateTo({
	    url:'news/news'
	  })
	},

需要注意的是：程序中要求页面的层级最多只能有五层，因为这种方式保留当前页面，也就是说以这种方式跳转页面，最多只能打开5个页面。

（2）使用 switchTab 方法

该方法能够跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

    wx.switchTab({
              url:'../leader/leader',
              complete:function(res) {
              }
            })

5、swiper实现轮播

通过 swiper 和 swiper-item 实现了书桌页面的轮播效果。

这里的相关属性就直接使用了网上的图片：

<swiper class="swiper" indicator-dots="true" 
interval="5000" duration="1000">
        <swiper-item>
            <view class="page__bd">
                <view class="page__bd-books center">
                   <image
                    src="../../assets/images/book1.png" />
                </view>
                <view class="page__bt">
                    <view class="page__bt-readings">
                    南风知我意</view>
                    <view class="page__bt-items center">
                        <view>1186人在读</view>
                        <image 
                        src="../../assets/images/rg.png" />
                    </view>
                </view>
            </view>
        </swiper-item>
 </swiper>

其中，swiper-item 可以通过 wx:for 来循环。

总结：

这一次的小程序开发，让我学到了很多东西。我们是为了学习而开发项目。因此在coding的时候要沉住气，不要急躁，遇到问题就及时的去查文档或者请教别人，然后多想一想实现的方法，是不是还能够通过其他办法来实现。这样在不断的思考和解决问题中，在不断的踩坑中才能让自己快速的成长起来。

另外，其实还有很多功能和细节没有处理好，这一次的分享并不代表着结束，通过不断的学习，还将不断的对项目功能进行完善和处理各种细节。

作者 east

标签归档布局