开发

前言

的总体思路是：请求《人民日报》电子版网站，查找所需资源(如数字报纸图片地址、各版标题、各版文章等。)通过匹配html文档作为响应。

新建项目

打开安装好的微信web Developer Tool，点击" "(右下左)新建项目。填写相关信息。

AppID:登录微信公众平台查看项目名称：项目名称、自定义项目目录：项目存放位置、自定义创建QuickStart项目：勾选此项，开发工具会生成一个简单的小程序演示并确认。

修改配置文件app.json

app.json文件用于全局配置微信小程序、确定页面文件路径、窗口性能、设置网络超时时间、设置多个标签页等。

1.在‘pages’数组中添加纸张赝品，在第一个位置添加“pages/paper/paper”(第一个位置代表小程序打开时的第一个界面)，添加保存后会在pages目录中找到一个多余的纸张目录。2.添加tabBar打开app.json并添加“tabBar”属性。3.修改导航栏标题，并在“窗口”属性下“导航”。

pages':[ 'pages/paper/paper '，' pages/index/index '，' pages/log/log ']，' window ' : { ' backgroundTextStyle ' : ' light '，' Navigation barbakgroundcolor ' : ' # FFF '，'导航栏Title Text' : '山寨人民日报读报小程序'，'导航栏Text Style' :' black'}，tabbbar ' : { ' list ' 33:[{ ' pagespath '

获取版面数据

我们的想法是，打开小程序后，会先显示当天人民日报电子版的第一个版本，所以我们需要知道图片的网络地址，然后通过小程序的图片组件的src属性来显示图片。1.分析网址打开人民日报电子版。(以2017年8月30日的报纸为例)看网站，可以猜测日期nbs。http://paper.people.com.cn/rm.2017-08/03的D110000renmrb_01.htm代表报纸的版面，01代表试图修改日期和版面的初版号，证明了猜想。2.请求第一版的html文档在utils目录中打开util.js文件，并添加以下代码

//获取数组Const Today Date数组=()={ var Today=new Date()；var year=today . getfullyear()；var month=today . getmonth()1；//getMonth()返回0-11，对应现实需要1 var day=today . getdate()；//如果小于10，加0返回[年、月、日]。前面是马。

p(formatNumber);}module.exports = { todayDateArray: todayDateArray}

修改app.js，添加如下代码

//app.jsApp({  onLaunch: function () {    // 展示本地存储能力    ...........    // 登录    wx.login({      success: res => {        // 发送 res.code 到后台换取 openId, sessionKey, unionId      }    })    // 获取用户信息    wx.getSetting({     ........    });    //同步获取系统信息    try{      var res = wx.getSystemInfoSync();      this.globalData.systemInfo = res;    }catch(error){console.log("同步获取系统信息时失败",error)}  },    globalData: {    userInfo: null,    systemInfo:null  }})

打开pages/paper/paper.js,修改

// pages/paper/paper.jsvar app = getApp();var todayDateArray = require('../../utils/util.js').todayDateArray;const apiUrl = 'http://paper.people.com.cn/rmrb/html';  //接口地址const imgUrl = 'http://paper.people.com.cn/rmrb';  //接口地址Page({  /**   * 页面的初始数据   */  data: {    windowWidth: 0,    windowHeight: 0,    paperInfo:[]//报纸信息  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    var self = this;        //获取设备窗口宽高    if (app.globalData.systemInfo) {      var systemInfo = app.globalData.systemInfo;      self.setData({        windowWidth: systemInfo.windowWidth,        windowHeight: systemInfo.windowHeight      });    } else {      //重新请求系统信息    }    //拼接当日第一版url    var todayArray = todayDateArray();    var y_m = todayArray.slice(0, 2).join("-");    var firstSection = 'nbs.D110000renmrb_01.htm';    var url = [apiUrl, y_m, todayArray[2], firstSection].join('/');    console.log("第一版url", url);    //进行网络请求    wx.request({      url: url,      success: function (res) {        console.log(res.data);        var html = res.data;        //正则式-匹配版面图片        var pagePicImgReg = /<img[^>]+src=(.*)s+border=0s+usemap=#pagepicmap[^>]*>/i;        //匹配结果        var pagePicImgMatch = html.match(pagePicImgReg);        var imgSrc = "";        pagePicImgMatch && (imgSrc = pagePicImgMatch[1].replace('../../..', imgUrl));        console.log("imgSrc", imgSrc);        self.setData({          paperInfo: [{ "imgSrc": imgSrc}]        });      }    })  },})

说明：响应的html文档中，我们发现，可利用的数据不仅仅是版面图片，还有热区，版面列表，每版新闻列表等信息，大有可为修改paper.wxml

<view class="page-container">  <view class="paper-container">    <swiper class='paper-swiper' style='width:{{windowWidth*2}}rpx;height:{{windowHeight*2}}rpx;' indicator-dots="true" indicator-active-color="#589ad5">      <block wx:for="{{paperInfo}}" wx:key="*this">        <swiper-item>          <image style='width:{{windowWidth*2}}rpx;height:{{windowHeight*2}}rpx;' src="{{item.imgSrc}}"></image>        </swiper-item>      </block>    </swiper>  </view></view>

说明：由于后期会通过左右滑动切换版面的，所以用了swiper组件

编译并预览

首先勾“选不校验安全域名、TLS 版本以及 HTTPS 证书”（开发工具的右上角->详情）显示“模拟器”（开发工具左上角->头像旁边）ctrl+b 开发工具中查看点击预览，微信扫描二维码，手机上查看效果（要打开调试，右上角button）