微信小程序實戰--高仿人民日報
前言
開發的大致思路是：請求人民日報電子版網址,通過對響應的html文檔進行匹配，查找需要的資源（比如數字報圖片地址、每版標題、每版的文章等）
新建項目
打開安裝好的“微信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）
版權說明：本文轉載於小程序社區（wxapp-union.com），如有問題請與我們聯系。
微信小程序實戰--高仿人民日報