修改配置文件app.json

app.json文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

1.添加paper頁面
在"pages"的數組里，在第一個位置添加“pages/paper/paper”(第一個位置表示小程序打開時的首界面)，添加保存后，會發現pages目錄下多了一個paper目錄
2.添加tabBar
打開app.json,添加“tabBar”屬性
3.修改導航欄標題
修改“window”屬性下的“navigationBarTitleText”為fake人民日報讀報小程序

"pages":[
    "pages/paper/paper",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "fake人民日報讀報小程序",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/paper/paper",  
        "text": "版面"   
      },
      {
        "pagePath": "pages/index/index",
        "text": "目錄"
      }
    ],
    "selectedColor":"#589ad5"
  },
 "debug": true

注意：app.json文件中不能包含注釋

獲取版面數據

我們的想法是打開該小程序后，首先顯示的當天人民日報電子版的第一版圖片，所以要知道該圖片的網絡地址，再通過小程序image組件的src屬性，將圖片顯示出來
1.分析url
打開人民日報電子版，（以2017.8.30號報紙為例）查看網址可以推測
http://paper.people.com.cn/rm...
2017-08/03 代表報紙的日期
nbs.D110000renmrb_01.htm 代表報紙的版面，01代表第1版
試著修改日期和代表版面的數字，證明了猜測
2.請求第一版的html文檔
打開utils目錄下的util.js文件，添加以下代碼

//獲取當日年月日的數組
const todayDateArray = () => {
  var today = new Date();
  var year = today.getFullYear();
  var month = today.getMonth() + 1;//getMonth()返回0-11,與實際對應的話需要+1
  var day = today.getDate();
  //小于10的，前面加0
  return [year, month, day].map(formatNumber);
}
module.exports = {
  todayDateArray: todayDateArray
}

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

//app.js
App({
  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.js
var 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=0\s+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）