當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

微信小程序实战--高仿人民日报

發布時間：2024/1/18 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了微信小程序实战--高仿人民日报小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

開發的大致思路是：請求人民日報電子版網址,通過對響應的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,與實際對應的話需要+1var day = today.getDate();//小于10的，前面加0return [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 {//重新請求系統信息}//拼接當日第一版urlvar 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

說明：由于后期會通過左右滑動切換版面的，所以用了swiper組件

編譯并預覽

首先勾“選不校驗安全域名、TLS 版本以及 HTTPS 證書”（開發工具的右上角->詳情）
顯示“模擬器”（開發工具左上角->頭像旁邊）
ctrl+b 開發工具中查看
點擊預覽，微信掃描二維碼，手機上查看效果（要打開調試，右上角button）

總結

以上是生活随笔為你收集整理的微信小程序实战--高仿人民日报的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。