[解读小程序]公众号热门文章信息流

题外话

微信IDE的更新

重要申明：官方已经对没有资格的开发者开放了微信Web开发者工具的使用, 不需要再用之前的办法破解，破解了有问题！解决办法就是完全卸载之前的版本，安装2300版本.信息来源
官方IDE下载地址
新IDE的选择(Egret Wing 3.2)

目前微信官方的开发者工具对开发的支持还不太友善，主要体现在官方开发者工具中缺乏代码智能提示，且无法对当前编辑的页面进行实时预览等。
因此，Egret Wing在本次版本中，从创建项目开始，到项目开发完成，完整工作流实现可视化，实现了针对微信小程序的项目模板、语法提示及实时预览三大特性，可以帮助开发者有效提高微信小程序的开发效率。信息来源
Egret Wing3.2下载地址

程序基本信息

分析程序的来源:
https://github.com/hijiangtao/weapp-newsapp
作者: hijiangtao

简介:
利用微信小程序官方开发者工具开发，使用截获的搜狗搜索GET请求包有关微信平台热门新闻与关键词的数据生成的新闻列表浏览。

最终效果图

首页

新闻列表1

新闻列表2

新闻详情

首页 index

首页就是一个image和一个button. 原图是一张矩形的图片,显示出来的是一张圆形图片. 圆形图片的使用频率非常高. 看看作者是如何实现的.

<view class="container"><view class="userinfo"><image class="userinfo-avatar" src="{{img}}" background-size="cover"></image><text>Hi, {{username}}</text></view><view class="usermotto"><button type="primary" class="user-motto" bindtap="bindViewTap">{{welcome}}</button></view>
</view>

这里涉及到一个CSS属性: background-size设置为cover是把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。文档-background-size
圆形图片的的实现使用的是border-radius属性添加圆角边框.文档-border-radius

.userinfo-avatar {width: 288rpx;height: 288rpx;margin: 10rpx;border-radius: 50%; //设置为50%就显示为圆形
}

index.js中代码很简单. 初始化数据和页面跳转.

var app = getApp()
Page({data: {welcome: "Get Latest News Now","username": "hijiangtao",img: "http://tva4.sinaimg.cn/crop.0.0.1080.1080.180/0066Db0Pjw8erk3vg33raj30u00u0jt0.jpg"},//事件处理函数bindViewTap: function () {wx.navigateTo({url: '../text/text'})}
})

新闻列表 text

模拟数据

作者这里的新闻列表使用的是假数据. 所有的数据定义在了news.js中,然后使用module.exports导出. 格式大致如下(对数据进行了删减,主要关注的是json的结构).

{"meta":{"code":200},"data":{"topwords":[{"word":"深改组1000天","timestamp":"1474378841"}],"topnews":[{"img":"图片链接","title":"如果没有它，VR注定是场“闹剧”","summary":"行业缺少优质标的，关键性技术节点远未突破，VR如同一个牙牙学语的婴儿，尚在襁褓之中，远未成熟。这里的“关键性技术节点”其中之一，就是空间音频技术。在今天，人们更愿意叫它3D音频。","account":"36氪","timestamp":"1474773478","date":"11:17","link":"链接","srclink":"链接","openid":"oIWsFt-NQJJTI1l_HJBI-iEy3qbg"}],"hotwords":[{"word":"科技"}],"hotnews1":[{"img":"图片链接","title":"如何避免在无价值的小事上投入太多精力？","account":" warfalcon","timestamp":"1474603371","link":"链接","srclink":"链接","openid":"oIWsFtxo3oqejVy4KaJ4RDMVIrE0","date":"09月23日"}],"hotnews2":[{"img":"图片链接","title":"搞笑诺贝尔为什么要给大众汽车颁个化学奖？","account":"果壳网","timestamp":"1474603005","link":"链接","srclink":"链接","openid":"oIWsFt86MuAacbPGA3TM1glwaTp4","date":"09月23日"}]}
}

在app.js中引入模块. 定义为news, 并声明为全局数据.

var news = require('./news.js');globalData: {news}

这样我们在text.js中就可以获得这些假数据.

var root = getApp();tmpObjData = root.globalData.news.data;

text.wxml

热词列表 hotwords

<!--hotwords list-->
<view id="wordscard"><view ><icon type="{{icontype[0]}}" size="15"/><text>HOTWORDS</text><icon type="{{icontype[0]}}" size="15"/></view><view class="rowalign"><text wx:for="{{data.hotwords}}">{{item.word}}</text></view>
</view>

显示效果是紧凑排列的多个text. 这里使用了id选择器<view id="wordscard">.

#wordscard {height: 130px;
}

之前一直不是很理解view的作用, 因为深受Android中View的影响. 其实这里的view就相当于html中的div标签, 这个就很好理解了.

热门新闻列表 hot news

<!--hot news list-->
<view class="card short-card" wx:for="{{data.hotnews}}" wx:for-index="itemIndex"><view><text class="title">{{ item.title }}</text></view><view><text class="tag">发布于 {{ item.date }}, 公众号 {{ item.account }}</text></view><view class="btn-area"><button type="default" size="mini" data-index="{{itemIndex}}" bindtap="modalTap">SHOW DETAILS</button></view>
</view>

这样的条目只是显示一个简短的新闻标题, 然后显示一个查看详情的button, 点击button, 才弹出modal显示详情.

<view class="card short-card" wx:for="{{data.hotnews}}" wx:for-index="itemIndex">

这里的列表渲染指定了index的名称为itemIndex. 当然你也可以指定item的名称. 官方文档中给出的示例为:

//使用wx:for-item可以指定数组当前元素的变量名(默认为item)
//使用wx:for-index可以指定数组当前下标的变量名(默认为index)
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.message}}
</view>

文档-列表渲染

头条新闻列表 top news

<!--top news list-->
<view class="card" wx:for="{{data.topnews}}" wx:for-index="itemIndex"><view><text class="title">{{ item.title }}</text></view><view><text class="tag">发布于 {{ item.date }}, 公众号 {{item.account}}</text></view><view><text class="para">{{item.summary}}</text></view><view><text class="tlink">{{data.fakeUrl + item.openid}}</text></view>
</view>

新闻详情 news detail

<modal title="NEWS DETAIL" confirm-text="confirm" hidden="{{modalHidden}}" no-cancel bindconfirm="modalHide"><view><image class="news-avatar" src="{{modalContent.img}}" background-size="cover"></image>    </view><view><text>Title: {{modalContent.title}}</text></view><view><text>Account: {{modalContent.account}}</text></view><view><text>Date: {{modalContent.date}}</text></view><view>LINK: <text>{{modalContent.link}}</text></view>
</modal>

之前我觉得modal模态对话框就是简简单单的一些提示语句, 现在发现错了. 模态对话框和Android中的自定义对话框一样强大, 而且使用起来更加简单.
看了这么多布局. 微信小程序提供给我们的组件就20多个. 至于怎么样布局,还有颜色什么的都是css的问题. 属于对于布局来说, css的功力决定了写布局的快慢.

text.js

初始化数据

data: {data: root.globalData.news.data, //假数据icontype: ["info_circle", "info"],//热词的图标类型modalHidden: true, //模态对话框隐藏状态modalContent: {} //模态对话框内容}

加载数据

onLoad: function () {var self= this, tmpObjData = root.globalData.news.data //临时保存数据console.log("onLoad news")this.setData({data: {hotwords: tmpObjData.hotwords.concat(tmpObjData.topwords),//连接数组hotnews: tmpObjData.hotnews1.concat(tmpObjData.hotnews2),topnews: tmpObjData.topnews,fakeUrl: "http://mp.weixin.qq.com/s?_biz="}})},

这里使用了concat对数据进行连接组成符合显示要求的数据.文档-concat

点击热门新闻的条目按钮触发的tap事件

modalTap: function (e) {var self = thisconsole.log(e.currentTarget.dataset)this.setData({modalContent: self.data.data.hotnews[Number(e.currentTarget.dataset.index)],modalHidden: false})},

e.currentTarget.dataset.index获得的是绑定在button上的data-index的值.

<button type="default" size="mini" data-index="{{itemIndex}}" bindtap="modalTap">SHOW DETAILS</button>

这段代码中用到了Number对象. 调用Number() 时，它会把自己的参数转化成一个数字.文档-Number

控制modal的显示

  modalHide: function(e) {this.setData({modalHidden: true})}

个人思考:
1. 采用了MVVM模式, 直接改变js中data的值,然后setData(),视图层会同时做出对应的反馈. 这是很大的优势.
2. 在Android中实现多类型item 的列表还比较繁琐. 小程序中直接将各种view写在wxml中, 利用wx:if, ws:for来控制显示. 这确实比较方便.这个思维的转变其实不容易.
3. 组件的使用无非就是那么些. 主要是要配合css一起做出好的效果,这个我还需要好好努力才行.
4. 看懂一个程序和写出来的区别是很大的. 虽然看多了会对程序有感觉, 但是因为自己薄弱的js和css基础, 要写出来还需要时日.

the end.