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

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

题外话

• 微信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'
    })
  }