微信小程序–我来投票

1、后端云选择

今天给大家分享一个自己的线上小项目,该项目是微信小程序个人开发版,所以没有微信支付等企业商用功能。微信小程序开放个人开发者权限,所以我们可以开发一些实用的工具类小程序,但是一些新手可能会想那么我不懂后台,没法写动态数据,而且还需要域名,服务器什么的一大堆东西限制了我们的开发。

 其实,我们可以使用后端云进行开发,这样我们只需关注前端,然后阅读后端云平台的api文档就行了。现在的后端云平台也很多,主要适合小程序开发的这里我推荐两个,leancloudbmob;在这里也说一下两个平台的优缺点;首先,这两个平台都提供免费开发版和企业商用版。如果你的小程序以后不想用作商用,那我建议你使用leancloud,因为leancloud文档更详细,接口性能比较稳定;如果打算商用,而且你的资金比较充裕,那就选择leancloudbmob都行,毕竟付费服务,性能应该都不错,反正我这穷丝一个是用不起付费服务的leancloud的商用最低30/天起;具体怎么选择,还是看你自己的需求。

2、项目效果图

废话了这么多,转入正题。先看项目效果图:

 

    

代码地址:https://github.com/demi520/wxapp-survey

html5 canvas绘制雷达图

前两天在群里看到一张图,图片如下,

于是自己尝试了一下,用canvas看能否动态绘制能力分布图,以下是我的思路,有不足之处还望老司机们多多指教;

可以自定义参数如下:

废话不多说,先上效果图:

1、首先是绘制多边形,现在画布中心绘制圆形,然后在园中动态获取多边形的顶点,然后使用lineTo()方法绘制正多边形;效果图如下:

2、为了有层次感,需要再绘制两个小的正多边形,而且这几个多边形是需要有透明度的,如下图:

3、依次绘制对角线及最外层图标,如下图

5、然后就是绘制橙色能力部分以及所有能力之和的均值;如下图

6,最后就是使用setTimeOut或者requestAnimationFrame实现动画效果;

存在问题:

1、当绘制图形为偶数边多边形时,小图片下的介绍文字会显示不完全,如下图:

主要原因是偶数边多边形能的图标有分布在canvas的正下方区域,解决办法是适当调整图标所在圆形的半径(iconsRadius)和中心三个多边形的半径(polygons  > radius);

2、绘制图在移动端会显示失真,图标显示会稍微不清楚;如下图:暂时没有找到解决办法

效果页面地址:http://jsh5css.cn/powerMap/

代码地址:https://github.com/demi520/powerMap

微信小程序之基于canvas绘制高铁线路图

效果图:



前几天微信小程序联盟论坛的管理员 给了我一张高铁的路线图,问我能不能用canvas画出来,所以我就试了试,我的思路可能比较复杂;如果有更简单的思路可以留言回复;下面说一下我的实现思路:

1、首先是每个站点圆角矩形的绘制,一开始想着用canvas把圆角矩形绘制出来,但发现小程序暂时还没有绘制圆角的arcTo方法,所以用canvas绘制就相对比较麻烦,最后为了方便决定用图片代替;
2、将整个路线图分为四个小图片,(1)站点圆角矩形(2)站点之间的直连线(3)站点之间右侧弯曲连线(4)站点之间左侧弯曲连线;
3、通过观察分析,将绘制过程分为两步,(1)奇数行圆角矩形、连线的绘制点x坐标是从左至右递增,y坐标值是行数乘以某个固定值(2)偶数行圆角矩形、连线的绘制点x坐标是从左至右递减,y坐标值是行数乘以某个固定值
4、奇数行,偶数行的圆角矩形的下标index+1是3的倍数的话,奇数行当前下标右侧绘制右弯曲连线图片,偶数行当前下标左侧绘制左弯曲连线图片;
5、整个canvas绘制区域在不同手机上的适配
6、具体的一些细节请参照代码注释
7、开发工具上使用drawImage重复绘制同一张图片只显示第一次绘制的位置,暂时不知道什么原因,所以请在真机上测试;

8、有什么不足之处,望大家多多指点!感激!{:3_60:}

wxml代码:

<!--pages/Gline/index.wxml-->
<view class="g-title">(G23)选择出发站点 <text class="chooseStation">{{chooseStation}}</text> </view>
<canvas  bindtouchstart="touchS"  canvas-id="map" style='width:{{canvWidth}}rpx;height:{{canvHeight}}px;background-color: #eee' />

wxss代码:

/* pages/Gline/index.wxss */
page{ background-color: #eeeeee }
.g-title{font-size: 36rpx;font-weight: 600;color: #768da4;padding: 36rpx 0;padding-left: 20rpx; background-color: #fff}
.chooseStation{color: #32b16c}

js代码:

// pages/Gline/index.js
Page({
  data:{
    canvWidth:750,
    canvHeight:750,
    stations:['北京南','天津南','济南西','泰安','滕州东','徐州东','南京南','镇江南','苏州北','上海虹桥','北京南','天津南','济南西','泰安','滕州东','徐州东','南京南','镇江南','苏州北','上海虹桥','北京南','天津南','济南西','泰安','滕州东','徐州东','南京南','镇江南','苏州北','上海虹桥'],
    chooseStation:'',//页面显示选中的车站名字
    prevChooseIdx:null,//上一次选中车站的下标
    // stations:['北京南','天津南','济南西','泰安'],
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    // this.setData({canvHeight:502});
    const ctx = wx.createCanvasContext('map');//路线图绘制的画布上下文对象
    this.ctx = ctx;//将ctx对象绑定到当前页面中
    this.column = 3;//每行显示车站数量
    this.offsetTop = 30;//绘制起始坐标的top值,也就是距离canvas顶部的距离
    this.rect={//圆角矩形对象
      img_b:'/images/rect-b.png',//初始时图片
      img_g:'/images/rect-g.png',//选中时图片
      height:32,
      width:68
    }
    this.line = {//站与站之间的连线对象
      img:'/images/line.png',
      height:6,
      width:30
    },
    this.bendLine = {//站与站之间弯曲的连线
      img_l:'/images/line_l.png',//左侧连线
      img_r:'/images/line_r.png',//右侧连线
      height:70,
      width:20
    },
    this.rectArr=[];//记录所有车站的绘制起始点的坐标的数组
    this.oddRowIndexArr=[];//记录奇数行的车站的下标数组,如[0,1,2,6,.....]
    this.evenRowIndexArr=[];//记录偶数行的车站的下标数组,如[3,4,5,9,.....]
    this.initMap();
  },
  onReady:function(){

  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  //对不同设备下图片大小的适配
  adaptiveScreenSize:function(o){
    let ww = this.data.winWidth;
    let zoom = ww/375;//375这里是按iPhone6的宽度做等比缩放
    this.setData({zoom:zoom});
    let rectW = o.width*zoom;
    let rectH = o.height*zoom;
    o.width = rectW;
    o.height = rectH;
  },
  //初始化路线图的方法
  initMap:function(){
    const that = this;
    wx.getSystemInfo({
      success: function(res){
        const ww = res.windowWidth;
        const pr = res.pixelRatio;
        that.setData({ winWidth:ww,pixelRatio:pr});//将设备的信息存入data中,供后面使用
        that.drawMap();
      }
    })
  },
  drawTxtAtPos:function(idx){
    const rectArr = this.rectArr;
    const w = this.rect.width;
    const h = this.rect.height;
    let txt = this.data.stations[idx];
    let len = txt.length;
    //当站点文本文字超过3个字,将缩小字号
    let fontSize = len>3?12:14;
    let x = rectArr[idx].x;
    let y = rectArr[idx].y;
  	//计算文本在圆角矩形中的绘制点,使文字居中显示
    let txt_x = Math.floor((w - len*fontSize)/2)+x;
    let txt_y = Math.floor(h/2+fontSize/2)+y-2;//这里额外-2,文本才能更接近垂直居中
    this.ctx.setFontSize(fontSize);
    this.ctx.setFillStyle('#ffffff')
    this.ctx.fillText(txt, txt_x, txt_y);
  },
  //在下标为idx处绘制圆角矩形
  initRect:function(idx){
    const rectArr = this.rectArr;
    let x = rectArr[idx].x;
    let y = rectArr[idx].y;
    this.ctx.drawImage(this.rect.img_b,x, y, this.rect.width, this.rect.height);
  },
  //动态计算不同屏幕大小canvas的高度
  initCanvHeight:function(){
    let len = this.data.stations.length;
//  let pr = this.data.pixelRatio;
//  let z = this.data.zoom;
    let row = Math.ceil(len/this.column);
    let h = 0;
    if(row <= 1){
      console.log(this.rect.height);
      h = (this.offsetTop*2 + this.rect.height)*2;
    }else{
       h = this.offsetTop*2+(row-1)*(this.bendLine.height-this.line.height)+this.rect.height;
    }
   this.setData({canvHeight:h});

  },
  //绘制线路这逻辑比较乱,我是把路线分为奇数段和偶数段进行绘制
  drawLine:function(){
    const rectArr = this.rectArr;
    let x=0,y=0; 
    if(rectArr.length==2){//首先当车站数量为2个的时候,只需绘制一条线段
        x = rectArr[0].x+this.rect.width;//计算绘制线段起始点的x坐标
        y = rectArr[0].y+Math.floor((this.rect.height-this.line.height)/2);//计算绘制线段起始点的y坐标
        this.ctx.drawImage(this.line.img, x, y, this.line.width, this.line.height);

    }else{
    	
      const odd = this.oddRowIndexArr;
      const even = this.evenRowIndexArr;
      
      if(odd.length>0){
        for(let i=0;i<odd.length;i++){
          if((odd[i]+1)!=rectArr.length){//判断当前下标绘制点后面是否还有绘制点
            x = rectArr[odd[i]].x+this.rect.width;
            y = rectArr[odd[i]].y+Math.floor((this.rect.height-this.line.height)/2);
            if((odd[i]+1)%this.column!=0){//判断奇数行绘制点的下标如果不是3的整数倍将绘制一条直线,反之绘制右曲线
              this.ctx.drawImage(this.line.img, x, y, this.line.width, this.line.height);
            }else{
              this.ctx.drawImage(this.bendLine.img_r, x, y, this.bendLine.width, this.bendLine.height);
            }
          }
        }
      }
      //下面逻辑同奇数行的逻辑,不同的是绘制直线和弯曲线时x的坐标会有变化
      if(even.length>0){
        for(let i=0;i<even.length;i++){
          if((even[i]+1)!=rectArr.length){
            y = rectArr[even[i]].y+Math.floor((this.rect.height-this.line.height)/2);
            if((even[i]+1)%this.column!=0){
              x = rectArr[even[i]].x-this.line.width;//绘制直线时的计算公式
              this.ctx.drawImage(this.line.img, x, y, this.line.width, this.line.height);
            }else{
              x = rectArr[even[i]].x-this.bendLine.width;//绘制弯曲线时的计算公式
              this.ctx.drawImage(this.bendLine.img_l, x, y, this.bendLine.width, this.bendLine.height);
            }
          }
        }
      }
      
    }
    
  },
  drawMap:function(){
	
    this.adaptiveScreenSize(this.rect);
    this.adaptiveScreenSize(this.line);
    this.adaptiveScreenSize(this.bendLine);
    this.initCanvHeight();
    this.createRectTopPoints();
    // setTimeout(()=>{
      const rectArr = this.rectArr; 
      for(let i=0;i<rectArr.length;i++){
        this.initRect(i);
        this.drawTxtAtPos(i);
      }
      this.ctx.draw(true);
    // },500);
    this.drawLine();
    this.ctx.draw(true);
  },
  //计算后,每行的所有绘制点的起始坐标x值是一个固定数组
  //如:奇数行[10,20,30],偶数行:[30,20,10]
  getDisXArr:function(){
    let arr = [];
    let ww = this.data.winWidth;
    let disX = Math.floor((ww-(this.column*this.rect.width+(this.column-1)*this.line.width))/2); 
    for(let i=0;i<this.column;i++){
      let x = disX+i%this.column*(this.rect.width+this.line.width);
      arr[i] = x;
    }  
    return arr;
  },
  //根据给出的车站数量,将每个车站的绘制顶点计算出来存入数组rectArr中
  createRectTopPoints:function(){
    let rectArr = [];
    let disXArr = this.getDisXArr();
    let disXArrRev = this.getDisXArr().reverse();
    let disY = this.offsetTop;//绘制初始点距离canvas顶部的高度
    let len = this.data.stations.length;
    let row = Math.ceil(len/this.column);//根据车站数量计算需要绘制的行数
    let n=0,x=0,y=0;
    for(let j = 1;j<=row;j++){
      for(let i=0;i<this.column;i++){
        ++n;
        if(n<=len){
          if(j%2!=0){
            this.oddRowIndexArr.push(n-1);
            //console.log("奇数行:"+n);
            x = disXArr[i];
          }else{
            this.evenRowIndexArr.push(n-1);
            //console.log("偶数行:"+n);
            x = disXArrRev[i];
          }
          y = disY + (j-1)*(this.bendLine.height-this.line.height);
          this.rectArr[n-1] = {x:x,y:y};
        }
        
      }
    }
    
  },
  //判断手指触摸点是否在圆角矩形中
  pointInRectPolygon : function (point, vs) {
    let x = point[0], y = point[1],inside = false;
    for (let i = 0, j = vs.length - 1; i < vs.length; j = i++) {
        let xi = vs[i][0], yi = vs[i][1];
        let xj = vs[j][0], yj = vs[j][1];
        
        let intersect = ((yi > y) != (yj > y))
            && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
    }
    return inside;
  },
	//根据某个圆角矩形的绘制点和宽高,计算出圆角矩形4个顶点的坐标值
	//顺序为左上,右上,右下,左下,也就是顺时针方向
  getRectPolygon:function(x,y,w,h){
    let vs = new Array() ;
    vs[0] = [x,y];
    vs[1] = [x+w,y];
    vs[2] = [x+w,y+h];
    vs[3] = [x,y+h];

    return vs;
  } ,
  //点击车站调取的事件,事件中需要处理:
  //1、需要获取到当前点击的车站文本
  //2、判断是否有过选取,如果之前有选取,需要将之前选取过的区块颜色改为默认色
  //3、改变当前区块的颜色
  //4、记录当前点击的下标
  chooseStation:function(currIdx){
    let txt = this.data.stations[currIdx];
    let prevIdx = this.data.prevChooseIdx;
    if(prevIdx!=null){
      let x = this.rectArr[prevIdx].x;
      let y = this.rectArr[prevIdx].y;
      this.ctx.drawImage(this.rect.img_b,x, y, this.rect.width, this.rect.height);
      this.drawTxtAtPos(prevIdx);
    }
    let x = this.rectArr[currIdx].x;
    let y = this.rectArr[currIdx].y;
    this.ctx.drawImage(this.rect.img_g,x, y, this.rect.width, this.rect.height);
    this.drawTxtAtPos(currIdx);
    this.ctx.draw(true);
    this.setData({chooseStation:txt,prevChooseIdx:currIdx});
  },
  //点击事件
  touchS:function(e){
    console.log(e);
    let touch = e.changedTouches;//这里一定要用changedTouches,如果用touches,安卓机会有问题
    if(touch.length==1){
      let tapPoint = [touch[0].x,touch[0].y];
      let rectArr = this.rectArr;
      for(let i=0;i<rectArr.length;i++){
        let vs = this.getRectPolygon(rectArr[i].x,rectArr[i].y,this.rect.width,this.rect.height);
        let inside = this.pointInRectPolygon(tapPoint,vs);
        if(inside){
          this.chooseStation(i);
          break;
        }
      }
      
    }
  }
})

代码地址:https://github.com/demi520/wxapp-Gline

微信小程序–二维码生成器

微信小程序联盟上有一个小练习,是要实现小程序上的二维码生成器,想想基于jquery的二维码生成插件有很多,但是小程序是不允许操作dom的,所以自己找了一个纯javascript版的二维码生成源码,然后换汤不换药把其中的hmtl5中的canvas改为小程序的canvas;


效果图

纯javascript版js源码:

qrcode

1、解读源码,修改绘制canvas部分,源代码如下

draw: function (string, canvas, size, ecc) {
            
            ecclevel = ecc || ecclevel;
            canvas = canvas || _canvas;

            if (!canvas) {
                console.warn('No canvas provided to draw QR code in!')
                return;
            }

            size = size || _size || Math.min(canvas.width, canvas.height);

            var frame = genframe(string),
                ctx = canvas.getContext('2d'),
                px = Math.round(size / (width + 8));

            var roundedSize = px * (width + 8),
                offset = Math.floor((size - roundedSize) / 2);

            size = roundedSize;

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#fff';
            ctx.fillRect(0, 0, size, size);
            ctx.fillStyle = '#000';
            for (var i = 0; i < width; i++) {
                for (var j = 0; j < width; j++) {
                    if (frame[j * width + i]) {
                        ctx.fillRect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
                    }
                }
            }

        },

2、然后愉快的将代码修改如下:

draw: function (string, canvas, cavW, cavH, ecc) {
            ecclevel = ecc || ecclevel;
            canvas = canvas || _canvas;
            if (!canvas) {
                console.warn('No canvas provided to draw QR code in!')
                return;
            }

            var size =  Math.min(cavW, cavH);

            var frame = this.getFrame(string),
                ctx = wx.createContext(),
                px = Math.round(size / (width + 8));

            var roundedSize = px * (width + 8),
                offset = Math.floor((size - roundedSize) / 2);
            size = roundedSize;
            ctx.clearRect(0, 0, cavW, cavW);
            // ctx.setFillStyle('#ffffff');
            // ctx.rect(0, 0, size, size);
            ctx.setFillStyle('#000000');
			// ctx.setLineWidth(1);
            for (var i = 0; i < width; i++) {
                for (var j = 0; j < width; j++) {
                    if (frame[j * width + i]) {
                        ctx.fillRect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
					}
                }
            }
           
			wx.drawCanvas({
          		canvasId: canvas,
          		actions: ctx.getActions()
    		});
        }
    }

3、哈哈,愉快的运行起来~~~~~~报错!!

WAService.js:3 TypeError: ctx.fillRect is not a function

赶紧看看小程序的api,发现小程序是没有fillRect()方法的,只有rect()方法,所以啪~啪~啪改为如下:

 for (var i = 0; i < width; i++) {
                for (var j = 0; j < width; j++) {
                    if (frame[j * width + i]) {   
                        ctx.rect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
					}
                }
            }

运行,懵逼了,怎么没有二维码呢,我的二维码呢?好吧接着分析rect语fillRect的区别,其实rect方法只是绘制出轮廓,并不会对路径进行填充,所以紧接其后要对其fill填充。

把代码改为如下:

ctx.setFillStyle('#000000');
			// ctx.setLineWidth(1);
            for (var i = 0; i < width; i++) {
                for (var j = 0; j < width; j++) {
                    if (frame[j * width + i]) {   
                        ctx.rect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
                        ctx.fill();
                    }
                }
            }

运行~~~噢啦,终于出现期待已久的二维码喽!!



好了,总算完成了,但是怎么生成二维码的时候感觉有点慢呢,于是借用同事的手机(安卓系统)试了一下,输入网址,点击生成~~

崩了,微信直接挂了好吧接着找原因,感觉影响速度的只能是for循环那块代码,于是把ctx.fill()拿到for最外层;

 for (var i = 0; i < width; i++) {
                for (var j = 0; j < width; j++) {
                    if (frame[j * width + i]) {   
                        ctx.rect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
                        // ctx.fill();
                    }
                }
            }
            ctx.fill();

运行~~这速度,飞快!自己的小7也不卡了,又用同事的试了一把,没问题。原来对绘制路径填充只需要最后填充就Ok了,我还二逼的对每次绘制进行了填充。


Github最新完整代码地址:小程序二维码生成器

使用ajax爬取各视频网站的评论数据(二)

  1. 接着上次讲,上一节我们只获取了单个视频的评论地址,接下来我们要讲怎么获取任意视频的评论。首先把视频链接地址和评论链接地址有什么联系。

视频地址:http://v.youku.com/v_show/id_XMzExMTM5ODI5Ng==.html?spm=a2h0j.8191423.chasing.1~3~A

评论地址:http://p.comments.youku.com/ycp/comment/pc/commentList?jsoncallback=n_commentList&app=100-DDwODVkv&objectId=777849574&objectType=1&listType=0&currentPage=3&pageSize=30&sign=b9af46b6d144f789b44c615f0f4984a9&time=1509695827

看上去没有什么关联。这时我们把视频地址中?后面的字符串删掉,在浏览器中访问发现一样可以访问到对应的视频。而且视频评论正常显示,也就是我们只需要http://v.youku.com/v_show/id_XMzExMTM5ODI5Ng==.html 这个视频链接地址就行。接着分析评论地址,评论地址中参数较多,我们肯定会注意objectId这个东西,这个东西是什么呢?给个视频的评论标识吗?我们把视频地址中的“id_XMzExMTM5ODI5Ng==”换成“id_777849574”,然后在浏览器访问(http://v.youku.com/v_show/id_777849574.html):


我列个擦,居然也能正常访问,这是发现新大陆了。难道。。。于是我又邪恶的把评论请求换成了http://p.comments.youku.com/ycp/comment/pc/commentList?jsoncallback=n_commentList&app=100-DDwODVkv&objectId=XMzExMTM5ODI5Ng==&objectType=1&listType=0&currentPage=3&pageSize=30&sign=b9af46b6d144f789b44c615f0f4984a9&time=1509695827;然后在浏览器中访问。


好吧,一样能正常访问。聪明的小伙伴看到这里估计应该知道怎么去实现根据任意的视频地址获取评论了。我们可以将视频链接中id_后面的字符串截取出来,传给评论列表的请求地址,替换objectId后面的数字串。我这里没有用正则截取,只是简单截取,代码如下:

getVid: function(url) {
	if(url.startsWith('http://v.youku.com/v_show/')) {
		var arr = url.split('.html')[0].split('/');
		return arr[arr.length - 1].replace('id_', '');
	} else {
		return "";
	}
}

接着,我们要分析评论请求中其他参数了,像jsoncallback,app,objectType等,我们多找几个视频,只改变objectId的值,发现一样可以获取到视频的评论。这里特别说明一下参数sign和time的联系,我通过在控制台断点发现sigh的生成规则是:MD5(当前毫秒/1000-取整+appId+appSecret);如下图:


所以,只要sign和time是一对就不会请求出错。

2.接下来还要获取当前视频的所有评论,这就需要动态的传入currentPage这个参数了,我们首先想到的就是for循环,但是循环多少次,这时我们再看一下请求后,给我们返回的有哪些参数;

上图,我们发现会把当前评论的总页数返回给我们。所以我们循环的次数就是totalPage。下面是我的部分主要代码:

getAllData: function(totalPage) {
			var _this = this;
			var objId = this.getVid($('#vid').val());
			for(let i = 1; i <= totalPage; i++) {
				var sign = yk_sign();
				var time = ~~(Date.now() / 1e3);
				var _url = this.baseUrl + "objectId=" + objId + "&currentPage=" + i + "&sign=" + sign + "&time=" + time;
				$.ajax({
					type: "get",
					url: _url,
					dataType: "jsonp",
					jsonp: "jsoncallback",
					//			          	jsonpCallback:"n_commentList",
				}).done(function(res) {
					console.log("currentPage== " + i);
					var data = res['data']['comment'];
					//		console.log(JSON.stringify(data) );
					//		_this.sendData(data);
				});
			}
},
getTotalPage: function() {
			var _this = this;
			var objId = this.getVid($('#vid').val());
			if(objId == '' || objId == 'undefined') {
				alert('视频url输入格式不正确!');
				return false;
			} else {
				var time = ~~(Date.now() / 1e3);
				var sign = yk_sign(time);
				var _url = this.baseUrl + "objectId=" + objId + "&currentPage=1&sign=" + sign + "&time=" + time;
				$.ajax({
					type: "get",
					url: _url,
					dataType: "jsonp",
					jsonp: "jsoncallback",
					//		          	jsonpCallback:"n_commentList",
				}).done(function(res) {
					var totalPage = res["data"]["totalPage"];
					console.log("总页数:" + totalPage);
					_this.getAllData(totalPage);
				});
			}
},

至此,优酷的评论爬取到此结束。下期将继续其他网站的爬取,有不足之处,欢迎大家一起探讨学习

谢谢!!


效果演示见:http://jsh5css.cn/pachong/