[解读小程序]公众号热门文章信息流
题外话
微信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'
})
}