微信小程序實踐_2版面界面-首版圖片顯示

前言

開發的大體思路是：請求人民日報電子版網址,經過對響應的html文檔進行匹配，查找須要的資源（好比數字報圖片地址、每版標題、每版的文章等）
github地址 https://github.com/zz112/fake_peopledaily

新建項目

打開安裝好的「微信web開發者工具」，點擊「+」（右側左下），新建項目。填入相關信息

• AppID：登陸微信公衆平臺可查看
• 項目名稱：本項目的名字，自定義
• 項目目錄：項目存放的位置，自定義
• 建立QuickStart項目：勾選此項，開發工具會生成一個簡易的小程序demo

肯定便可

修改配置文件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）