微信小程序实战--基于微信小程序的新闻客户端

wechat-newsapp

简介：这是一个新闻客户端的小程序版本，当然不能跟网易、腾讯之类的新闻客户端相比，这只是一个比较简易的版本。

注：11月3日微信已经开始了小程序的公测，所以下面的IDE破解过程可以省略。
demo的源代码已经上传到github，地址：https://github.com/xianyanbu/wechat-newsapp

演示效果如下

​

IDE的破解安装

由于微信小程序现在属于内测阶段，所以还没有正式的版本开放给所有的开发者，所以想要体验小程序的开发只能使用破解版的客户端。

详情请见https://github.com/gavinkwoe/weapp-ide-crack/。

里面有详细的破解安装过程，这里就不再赘述了，破解完成导入项目即可。

首页

一些组件和框架的详细使用方法参见微信小程序开发文档

效果

按照新闻所述领域和性质显示新闻列表，如，【头条】、【科技】等

页面头部

<view class="top-bar">
    <view class="top-bar-item" id="top" catchtap="onTapTag">头条</view>
    <view class="top-bar-item" id="shehui" catchtap="onTapTag">社会</view>
    <view class="top-bar-item" id="guonei" catchtap="onTapTag">国内</view>
    <view class="top-bar-item" id="guoji" catchtap="onTapTag">国际</view>
    <view class="top-bar-item" id="yule" catchtap="onTapTag">娱乐</view>
    <view class="top-bar-item" id="tiyu" catchtap="onTapTag">体育</view>
    <view class="top-bar-item" id="junshi" catchtap="onTapTag">军事</view>
    <view class="top-bar-item" id="keji" catchtap="onTapTag">科技</view>
    <view class="top-bar-item" id="caijing" catchtap="onTapTag">财经</view>
    <view class="top-bar-item" id="shishang" catchtap="onTapTag">时尚</view>
  </view>

catchtap类似于onclick，点击触发onTapTag事件，加载对应类别的新闻列表。

新闻列表

<scroll-view class="posts-list" style="height:100%" scroll-y="true">
    <block wx:for="<