这篇文章主要介绍了微信小程序（应用号）开发新闻客户端实例的相关资料,需要的朋友可以参考下
下载最新版的微信小程序开发工具，目前是v0.9.092300
下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html
git下载地址：http://git.oschina.net/dotton/news
先看下效果图：
paste_image.png
一、新建应用
1.内测阶段对于无内测号的开发者，请点无appid。
paste_image.png
2.然后选择一个本地目录作为工程目录。
paste_image.png
3.项目名称任意，设置好目录，勾上当前目录创建quick start项目。如图：
paste_image.png
4.点击添加项目，这时可以运行的效果。是自己的微信个人信息以及一helloworld文本框。
5.右边是调试窗口，有2个警告，是由于没有appid导致的，可以暂时忽略，不影响开发。
paste_image.png
6.提示一下，在app.json中设置debug:true，这样控制台看到实时的交互信息，以及将来在js文件中设置断点，类似与chrome的调试工具以及firefox的firebug。
关于首页配置：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundtextstyle":"light",
"navigationbarbackgroundcolor": "#fff",
"navigationbartitletext": "wechat",
"navigationbartextstyle":"black"
},
"debug":true
}
其中pages属性表明每一个页面的存在，其中第一条为首页，即pages/index/index
二、请求网络api接口
1.前提条件：
这里需要用到聚合数据的新闻接口，前往：https://www.juhe.cn/docs/api/id/235;注册、申请接口，拿到key，我这里已经申请到一个key：482e213ca7520ff1a8ccbb262c90320a，可以直接拿它做测试，然后就可以将它集成到自己的应用了。
2.使用微信小程序接口来访问网络：
改写index.js文件：
//index.js
//获取应用实例
var app = getapp()
page({
data: {
motto: 'hello world',
userinfo: {}
},
//事件处理函数
bindviewtap: function() {
wx.navigateto({
url: '../logs/logs'
})
},
onload: function () {
// 访问聚合数据的网络接口
wx.request({
url: 'http://v.juhe.cn/toutiao/index',
data: {
type: '' ,
key: '482e213ca7520ff1a8ccbb262c90320a'
},
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})
console.log('onload')
var that = this
//调用应用实例的方法获取全局数据
app.getuserinfo(function(userinfo){
//更新数据
that.setdata({
userinfo:userinfo
})
})
}
})
3.查看效果，检查console控制台，得到以下信息：
paste_image.png
说明已经成功取得到了数据。
三、将json格式的数据渲染到视图
这里要用到swipe组件实现大图轮播，文档见：https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html1.清空原index.wxml内容，加入如下代码：
<swiper indicator-dots="true"
autoplay="true" interval="5000" duration="1000">
<block wx:for="{{topnews}}">
<swiper-item>
<image src="{{item.thumbnail_pic_s02}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
2.相应地在index.js文件的onload方法中加入如下代码来获取网络数据
//index.js
//获取应用实例
var app = getapp()
page({
data: {
topnews:[],
technews:[]
},
onload: function () {
var that = this
// 访问聚合数据的网络接口-头条新闻
wx.request({
url: 'http://v.juhe.cn/toutiao/index',
data: {
type: 'topnews' ,
key: '482e213ca7520ff1a8ccbb262c90320a'
},
header: {
'content-type': 'application/json'
},
success: function(res) {
if (res.data.error_code == 0) {
that.setdata({
topnews:res.data.result.data
})
} else {
console.log('获取失败');
}
}
})
}
})
3.看到轮播已经成功的展示出来了
paste_image.png
4.依样画葫芦，同样操作读取列表新闻：
<view class="news-list">
<block wx:for="{{technews}}">
<text class="news-item">{{index + 1}}. {{item.title}}</text>
</block>
</view>
配合样式表，不然列表文字排版是横向的，将以下css加到index.wxss中：
.news-list {
display: flex;
flex-direction: column;
padding: 40rpx;
}
.news-item {
margin: 10rpx;
}
继续美化，文字列表也采用缩略图+大标题+出处+日期的形式
paste_image.png
样式表与布局文件 index.wxss
/**index.wxss**/
.news-list {
display: flex;
flex-direction: column;
padding: 40rpx;
}
.news-item {
display: flex;
flex-direction: row;
height:200rpx;
}
.news-text {
display: flex;
flex-direction: column;
}
.news-stamp {
font-size: 25rpx;
color:darkgray;
padding: 0 20rpx;
display: flex;
flex-direction: row;
justify-content:space-between;
}
.news-title {
margin: 10rpx;
font-size: 30rpx;
}
.container {
height: 5000rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
/*padding: 200rpx 0;*/
box-sizing: border-box;
}
.list-image {
width:150rpx;
height:100rpx;
}
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"/>
</swiper-item>
</block>
</swiper>
<view class="container news-list">
<block wx:for="{{technews}}">
<view class="news-item">
<image src="{{item.thumbnail_pic_s}}" mode="aspectfill" class="list-image"/>
<view class="news-text">
<text class="news-title">{{item.title}}</text>
<view class="news-stamp">
<text>{{item.author_name}}</text>
<text>{{item.date}}</text>
</view>
</view>
</view>
</block>
</view>
四、跳转详情页与传值
保存当前点击的新闻条目信息中的title，参见官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html
传值到详情页
<!--logs.wxml-->
<view class="container">
<text class="news-title">{{title}}</text>
<text class="news-info">暂时找不到webview的组件接口，于是不能加载网页数据</text>
</view>
//事件处理函数
bindviewtap: function(event) {
wx.navigateto({
url: '../detail/detail?title='+event.currenttarget.dataset.newstitle
})
}
//index.js
//事件处理函数
bindviewtap: function(event) {
wx.navigateto({
url: '../detail/detail?title='+event.currenttarget.dataset.newstitle
})
}
<!--index.wxml-->
//加入data-xxx元素来传值
<view class="container news-list">
<block wx:for="{{technews}}">
<view class="news-item" data-news-title="{{item.title}}" bindtap="bindviewtap">
<image src="{{item.thumbnail_pic_s}}" mode="aspectfill" class="list-image"/>
<view class="news-text">
<text class="news-title">{{item.title}}</text>
<view class="news-stamp">
<text>{{item.author_name}}</text>
<text>{{item.date}}</text>
</view>
</view>
</view>
</block>
</view>
当然也可以通过获取全局的变量的方式传值，这里场景是由一个页面与子页面是一对一传值关系，所以不推荐，可参考quickstart项目中微信个人信息的传值方式来做。 app.js末尾加上
globaldata:{
userinfo:null,
newsitem:null
}
})
paste_image.png
由于未在官方文档中找到webview的组件，所以详情的网页正文暂时无法实现。
结语
整体开发过程还是比较舒适的，上手难度不高，过程中用到一定的css语法，本质上还是体现了一个h5开发模式，wxml实质上一种模板标签语言。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
更多微信小程序（应用号）开发新闻客户端实例。