微信小程序?qū)崙?zhàn)--高仿人民日?qǐng)?bào)
前言開(kāi)發(fā)的大致思路是：請(qǐng)求人民日?qǐng)?bào)電子版網(wǎng)址,通過(guò)對(duì)響應(yīng)的html文檔進(jìn)行匹配，查找需要的資源（比如數(shù)字報(bào)圖片地址、每版標(biāo)題、每版的文章等） 新建項(xiàng)目打開(kāi)安裝好的“微信web開(kāi)發(fā)者工具”，點(diǎn)擊“+”（右側(cè)左下），新建項(xiàng)目。填入相關(guān)信息
確定即可
修改配置文件app.json
1.添加paper頁(yè)面
"pages":[
"pages/paper/paper",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "fake人民日?qǐng)?bào)讀報(bào)小程序",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [
{
"pagePath": "pages/paper/paper",
"text": "版面"
},
{
"pagePath": "pages/index/index",
"text": "目錄"
}
],
"selectedColor":"#589ad5"
},
"debug": true
注意：app.json文件中不能包含注釋 獲取版面數(shù)據(jù)
我們的想法是打開(kāi)該小程序后，首先顯示的當(dāng)天人民日?qǐng)?bào)電子版的第一版圖片，所以要知道該圖片的網(wǎng)絡(luò)地址，再通過(guò)小程序image組件的src屬性，將圖片顯示出來(lái)
//獲取當(dāng)日年月日的數(shù)組
const todayDateArray = () => {
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;//getMonth()返回0-11,與實(shí)際對(duì)應(yīng)的話需要+1
var day = today.getDate();
//小于10的，前面加0
return [year, month, day].map(formatNumber);
}
module.exports = {
todayDateArray: todayDateArray
}
修改app.js，添加如下代碼
//app.js
App({
onLaunch: function () {
// 展示本地存儲(chǔ)能力
...........
// 登錄
wx.login({
success: res => {
// 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId
}
})
// 獲取用戶信息
wx.getSetting({
........
});
//同步獲取系統(tǒng)信息
try{
var res = wx.getSystemInfoSync();
this.globalData.systemInfo = res;
}catch(error){console.log("同步獲取系統(tǒng)信息時(shí)失敗",error)}
},
globalData: {
userInfo: null,
systemInfo:null
}
})
打開(kāi)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({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
windowWidth: 0,
windowHeight: 0,
paperInfo:[]//報(bào)紙信息
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
var self = this;
//獲取設(shè)備窗口寬高
if (app.globalData.systemInfo) {
var systemInfo = app.globalData.systemInfo;
self.setData({
windowWidth: systemInfo.windowWidth,
windowHeight: systemInfo.windowHeight
});
} else {
//重新請(qǐng)求系統(tǒng)信息
}
//拼接當(dāng)日第一版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);
//進(jìn)行網(wǎng)絡(luò)請(qǐng)求
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;
//匹配結(jié)果
var pagePicImgMatch = html.match(pagePicImgReg);
var imgSrc = "";
pagePicImgMatch && (imgSrc = pagePicImgMatch[1].replace('../../..', imgUrl));
console.log("imgSrc", imgSrc);
self.setData({
paperInfo: [{ "imgSrc": imgSrc}]
});
}
})
},
})
說(shuō)明：響應(yīng)的html文檔中，我們發(fā)現(xiàn)，可利用的數(shù)據(jù)不僅僅是版面圖片，還有熱區(qū)，版面列表，每版新聞列表等信息，大有可為
<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>
說(shuō)明：由于后期會(huì)通過(guò)左右滑動(dòng)切換版面的，所以用了swiper組件 編譯并預(yù)覽
首先勾“選不校驗(yàn)安全域名、TLS 版本以及 HTTPS 證書(shū)”（開(kāi)發(fā)工具的右上角->詳情）
|
