[解读小程序]灵犀新闻客户端

最新推荐文章于 2024-07-20 21:21:56 发布

maxwell0401

最新推荐文章于 2024-07-20 21:21:56 发布

阅读量1.9k

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/maxwell0401/article/details/52689265

版权

本文主要解析了灵犀新闻客户端的小程序实现，包括新闻列表页和新闻详情页的设计。作者指出程序存在一次性加载数据过多导致性能问题，以及部分组件优化不足。在index.wxml中，使用了轮播图组件和列表渲染，但在实际运行中图片未完全铺满。在index.js中，通过wx.request获取数据，并利用事件绑定和dataset传递数据。在detail.js中，讨论了如何接收来自其他页面的数据，但由于小程序缺少类似WebView的组件，详情页功能未完成。

摘要由CSDN通过智能技术生成

[解读小程序]灵犀新闻客户端

分析的程序来源:
https://my.oschina.net/u/1012086/blog/751455
作者: 黄秀杰
OsChina地址: http://git.oschina.net/dotton/news/tree/master

其实该代码的作者的博文里面已经写的很清楚了. 我只是站在一个分析者的角度学习一下.

效果图

已知存在的问题

列表一次性加载大概40条数据. 使用微信IDE调试时, 基本上处于假死状态. 未完成分页加载.
头部的类似于Android中的ViewPager的swiper, 一次加载了30条数据. 显示的指示点过多. 而且未能根据屏幕大小将图片正确铺满.
列表中前面的图片用wxss限制了width和height, 但是还是会出现大小不一致的情况.
点击列表进入的详情页. 因为详情直接是一个url,而小程序中并没有提供类似于Android中的WebView一样的控件, 所以功能尚未完成.

有些小问题我已经反馈给了作者. 坐等作者更新吧.

app.json

"pages":[
    "pages/index/index",
    "pages/detail/detail"
  ]

从pages数组看出, 程序只有两个页面.

新闻列表页 index

从页面上看, 新闻列表头部是一个swiper, 底下就是之前讲过的列表渲染. 我们从index.wxml开始解读.

index.wxml

<swiper indicator-dots="true"
  autoplay="true" interval="5000" duration="1000">
  <block wx:for="{
   {
   topNews}}">
    <swiper-item>
      <image src="{
   {
   item.thumbnail_pic_s02}}" mode="aspectFill" class="slide-image" width="375" height="250"</