微信小程序实践_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）