微信小程序实战--高仿人民日报
前言
开发的大致思路是：请求人民日报电子版网址,通过对响应的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），如有问题请与我们联系。
