第5章 资讯类微信小程序


在信息时代，每个人每天都要阅读并了解各种信息，尤其是那些影响人们日常生活的新闻、通知和广告等资讯。目前已经有一些资讯类的微信小程序，如腾讯新闻、新闻联播、东方头条新闻和网易新闻精选等。
在前面的章节中，已经详细介绍微信小程序开发的基础知识。本章将结合资讯类微信小程序项目详细讲解这类项目的设计和开发思路，该项目使用的数据及图片均为开发本项目时事先从网络抓取好存放在本地，并非利用接口实时动态获取，因此运行时无须联网获取这些数据。





 了解app.json在微信小程序中的作用。
 了解并掌握scrollview组件的使用。
 了解并掌握swiper组件的使用。
 了解并掌握view组件的使用。
 了解并掌握image组件的使用。
 了解并掌握switch组件的使用。
 了解并掌握text组件的使用。
 了解并掌握bindtap和wx.navigateTo的用法。



5.1项目需求和设计思路
在开始设计资讯类微信小程序之前，可以先来看下目前已经有一部分人使用的阅读资讯的微信小程序。图51为腾讯新闻小程序的主界面。
图52为新闻联播小程序的主界面。
图53为东方头条新闻小程序的主界面。
参照上述资讯类小程序，本项目的需求和设计思路如下： 
(1) 本项目包含首页、设置和日志三个标签页面。小程序启动后，默认显示“首页”界面，点击页面底部的“设置”标签，显示“设置”标签的对应界面； 点击页面底部“日志”标签，显示“日志”标签的对应界面。
(2) 首页标签在默认的index文件夹下，包括七个频道，分别为推荐、热点、美食、娱乐、图片、科技和体育。在频道内左右滑动可以显示对应频道的内容，首页默认显示推荐频道的内容，在某一频道内点击某一新闻内容可以在新的页面里查看相应的详情(以在推荐频道点击第一个新闻为例)，该页面在detail文件夹下。



图51腾讯新闻小程序主界面



图52新闻联播小程序主界面








图53东方头条新闻小程序主界面

(3) 设置标签在setting文件夹下，包括消息通知、资讯商城、我要爆料和用户反馈。
5.2项目实现的准备工作
首先按照第1章中介绍的创建新项目的方法和步骤创建一个新项目。启动微信开发者工具，如图54所示。



图54微信开发者工具主界面

单击“+”创建小程序，项目名称为chapter05，如果没有AppID(可以阅读第1章学习如何获取AppID)，也可以使用测试号，如图55所示。



图55创建资讯类微信小程序

单击“新建”后，将出现如图56所示的界面,这是开发时的主界面。



图56资讯类微信小程序

在目录树左上角单击“+”，如图57所示。
此时将弹出如图58所示的菜单，选择“目录”。



图57资讯类微信小程序



图58弹出快捷菜单


输入目录名images，如图59所示。
用鼠标左键选中目录images，右击，将弹出如图510所示菜单，用鼠标左键在弹出的菜单中选择“新建目录”。



图59创建images目录



图510新建目录


在目录images下依次创建子目录icon、swiper和tabBar，如图511所示。










打开文件app.json，修改第8和第9行代码，如图512所示。




图511在目录images下新建子目录



图512编辑app.json


此时背景为红色，标题为“资讯类小程序”，在模拟器运行的效果如图513所示。
修改app.wxss文件，删除掉“alignitems: center;”，并将第7行代码中的padding设置为0 0，修改后的代码如图514所示。



图513修改app.json文件后的界面效果



图514修改app.wxss文件


5.3项目实现的关键之处
该项目对应的完整代码请参考教材配套的chapter05文件夹下的代码，接下来仅详细介绍项目实现时的关键代码。
5.3.1标签导航的实现
为了实现点击页面底部的“设置”标签，显示“设置”标签的对应界面； 点击页面底部“日志”标签，显示“日志”标签的对应界面。首先要对app.json文件进行编辑，增加第4行代码，即“pages/setting/setting”,如图515所示。
接下来将教材配套代码chapter05文件夹下的图片indexAfter.jpg、indexBefore.jpg、logAfter.jpg、logBefore.jpg、settingAfter.jpg和settingBefore.jpg复制到本项目中images＼tabBar下。
继续对app.json文件进行编辑，在第12行之后增加图516所示的第13行到第37行代码。



图515修改app.json文件(一)



图516修改app.json文件(二)


修改完成后，底部界面将如图517所示。



图517修改app.json文件的底部界面

至此，标签导航已经实现。此时若点击页面底部的“设置”标签，将显示“设置”标签的对应界面，如图518所示。
点击页面底部“日志”标签，显示“日志”标签的对应界面，如图519所示。



图518设置标签对应的界面



图519日志标签对应的界面  









5.3.2滑动效果的实现
为了实现在频道内左右滑动可以显示对应频道的内容，需要对index.wxml、index.wxss和index.js这三个文件进行编辑。
1 编辑index.wxml
将index.wxml文件内默认的内容修改为如图520所示的内容。


图520编辑index.wxml

此时在模拟器上，该小程序运行的效果如图521所示。
2 编辑index.wxss
打开文件index.wxss，将之前的样式修改为如图522所示的第2行到第37行代码。



图521编辑index.wxml后的效果图



图522修改index.wxss 


3 再次编辑index.wxml
在index.xml文件的第17行之后插入如图523所示的第18行至第33行的代码。



图523再次编辑index.wxml

4 编辑index.js
继续打开文件index.js进行编辑，输入如图524所示第5行至第22行的所有代码，删除onLoad函数内默认的代码及其后的函数getUserInfo(注意： 其实可以不删除这些代码，而是只增加第5行至第22行的代码，并不影响本程序的运行，只是怕一堆不认识的代码在那里影响初学者)。在data中增加了currentTab和flag，并设其初值为0，并将其他变量删除(也是为了不让无关变量影响初学者)。
至此，滑动效果已经完全实现。读者可以尝试在真机上调试本程序，也可以在模拟器上用鼠标代表手指在不同的频道上滑动，可以看到滑到不同的频道，下方的内容是不一样的。默认的热点频道里显示的是热点内容，如图525所示。



图524修改index.js 



图525修改后的滑动效果 


5.3.3首页新闻内容的实现
为了实现首页热点频道的新闻内容，需要在本项目的pages＼index＼文件夹下创建rec.wxml文件，将推荐频道的内容写入该文件，对应的样式写入index.wxss;
1 创建rec.xml并写入推荐频道的推荐内容
在目录树中选择pages文件夹的子文件夹index，右击，在弹出的菜单中选择“新建WXML”，如图526所示。
输入rec,完成rec.wxml文件的创建，如图527所示。
在文件rec.wxml中写入如图528所示的所有代码(第1行到第31行)。
2 将样式写入index.wxss
将如图529所示的所有代码(第38行到第90行)写入index.wxss文件的第37行之后。



图526新建WXML



图527新建rec.wxml




图528新建rec.wxml


至此，首页新闻内容的已经实现，如图530所示。



图529将样式写入index.wxss



图530首页新闻内容


5.3.4首页新闻详情的实现
本节将以在推荐频道点击标题为“商务部： 中美双方经贸团队牵头人将于本周五再次通话”的新闻显示其详情(该页面在pages/detail文件夹下)为例，演示如何实现在某一频道内点击某一新闻内容可以在新的页面里查看相应的详情。具体步骤如下。


图531首页新闻内容

1 修改小程序的公共文件app.json
为了将新闻详情页面加入，首先要修改小程序的公共app.json文件。在该文件中增加第4行代码之后增加第5行代码“"pages/detail/detail",”，如图531所示。

注意： 添加第5行代码时，一定不要漏掉该行尾部的英文逗号(,)。















2 在rec.wxml中增加bindtap事件

在新闻内容页面文件rec.wxml的第10行view中增加代码bindtap="recDetail"，如图532所示。




图532在rec.wxml中增加recDetail事件

注意： 之所以将bindtap事件recDetail添加在rec.wxml文件中的第10行的view中，是因为这个view对应标题为“商务部： 中美双方经贸团队牵头人将于本周五再次通话”的新闻。


3 修改index.js
为了实现在rec.wxml中点击标题为“商务部： 中美双方经贸团队牵头人将于本周五再次通话”的新闻，跳转到该新闻的详情页面，还需要修改index.js文件。即在index.js中第22行之后插入recDetail函数的实现代码，如图533第23行至第27行所示。
至此，已经实现了从点击标题为“商务部： 中美双方经贸团队牵头人将于本周五再次通话”的新闻，到该新闻详情页面的跳转。跳转后的效果如图534所示。
由于目前尚未在该页面内添加任何代码，因此该页面仅显示pages/detail/detail.wxml。
4 编辑detail.wxml 
打开detail.wxml文件，输入如图535所示的代码。
5 编辑 detail.wxss文件
打开detail.wxss文件，输入如图536所示的代码。











图533在index.js中增加recDetail事件的

实现代码



图534新闻详情页面detail.wxml







图535在detail.wxml中输入代码



图536在detail.wxss中输入代码


此时已经完成了新闻详情页面代码的编写，若在首页新闻页面点击标题为“商务部： 中美双方经贸团队牵头人将于本周五再次通话”的新闻，则会跳转到该新闻详情页面，其效果如图537所示。


图537标题为“商务部： 中美双方经贸团队牵头人

将于本周五再次通话”的新闻详情


5.4设置页面的实现
设置页面的实现分为两步，第一步是在setting.wxml页面中写入代码，第二步是在setting.wxss页面中写入样式。
1 编辑setting.wxml页面
在文件setting.wxml页面中输入如图538所示的所有代码(从第1行到第46行)。
2 编辑setting.wxss页面
在文件setting.wxss页面中输入如图539所示的所有代码(从第1行到第27行)。
设置页面代码编写完成后，该页面的效果如图540所示。



图538在文件setting.wxml中输入的代码



图539在文件setting.wxss中输入的代码




图540系统设置页面的运行效果

5.5小结
本章详细描述了一个资讯类微信小程序开发的全过程。从介绍项目的需求和设计思路开始，到实现该项目的准备工作，再到该项目实现的关键之处，包括如何实现标签导航，如何实现滑动效果，如何实现首页新闻，如何实现在首页新闻中点击某一条新闻跳转到该新闻的详情界面，最后介绍了设置页面的实现。
在实现这一项目的过程中，读者可以了解修改app.json，index.wxml，index.wxss和index.js等文件后的作用，也可以进一步了解view，scrollview，swiper，image，switch，text等组件的用法。
本章介绍的资讯类微信小程序所有的数据和图片均存储在手机上，无须联网即可运行。