下载最新版的微信小程序开发工具，目前是v0.9.092300
下载地址：https://mp./debug/wxadoc/dev/devtools/download.html
官方文档：https://mp./debug/wxadoc/dev/index.html
git下载地址：/dotton/news
先看下效果图：
id="iframe_0.8293334361486462" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22/uploads/img/09/26005330_82nk.png?_=0.5135581213671885%22%20style=%22border:none;max-width:987px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.8293334361486462',width:img.width,height:img.height%7D,%20'');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 636px; height: 817px;">
一、新建应用
1.内测阶段对于无内测号的开发者，请点无AppId。
id="iframe_0.17693919192062801" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22/uploads/img/09/26003208_ERlJ.png?_=0.09222336828899569%22%20style=%22border:none;max-width:987px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.17693919192062801',width:img.width,height:img.height%7D,%20'');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 987px; height: 672px;">
2.然后选择一个本地目录作为工程目录。
id="iframe_0.6659767334973805" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22/uploads/img/09/26003410_GYzu.png?_=0.8124666536360265%22%20style=%22border:none;max-width:987px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.6659767334973805',width:img.width,height:img.height%7D,%20'');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 987px; height: 591px;">
3.项目名称任意，设置好目录，勾上当前目录创建quick start项目。如图：
id="iframe_0.14283978882903936" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22/uploads/img/09/26003432_W0yd.png?_=0.07183924432681099%22%20style=%22border:none;max-width:987px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.14283978882903936',width:img.width,height:img.height%7D,%20'');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 987px; height: 672px;">
4.点击添加项目，这时可以运行的效果。是自己的微信个人信息以及一HelloWorld文本框。
5.右边是调试窗口，有2个警告，是由于没有AppID导致的，可以暂时忽略，不影响开发。
id="iframe_0.5606871400500766" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22/uploads/img/09/26003447_UNdQ.png?_=0.23690655720262654%22%20style=%22border:none;max-width:987px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.5606871400500766',width:img.width,height:img.height%7D,%20'');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 987px; height: 561px;">
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.前提条件：
这里需要用到聚合数据的新闻接口，前往：/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: '/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控制台，得到以下信息：
id="iframe_0.4949833986803911" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22/uploads/img/09/26004022_5TJr.png?_=0.43875942497231657%22%20style=%22border:none;max-width:987px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.4949833986803911',width:img.width,height:img.height%7D,%20'');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 987px; height: 626px;">
说明已经成功取得到了数据。
三、将json格式的数据渲染到视图
这里要用到swipe组件实现大图轮播，文档见：https://mp./debug/wxadoc/dev/component/swiper.html
1.清空原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: '/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.看到轮播已经成功的展示出来了
id="iframe_0.30845887839021446" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22/uploads/img/09/26004057_IyKr.png?_=0.9386277264839491%22%20style=%22border:none;max-width:987px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.30845887839021446',width:img.width,height:img.height%7D,%20'');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 987px; height: 562px;">
4.依样画葫芦，同样操作读取列表新闻：
<view class="news-list"><block wx:for="{{techNews}}"><text class="news-item">{{index + 1}}. {{item.title}}</text></block>
配合样式表，不然列表文字排版是横向的，将以下css加到index.wxss中：
.news-list {display: flex;flex-direction: column;padding: 40rpx;}.news-item {margin: 10rpx;}
id="iframe_0.12835043500998244" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22/uploads/img/09/26004219_NGxK.png?_=0.2826641386663793%22%20style=%22border:none;max-width:987px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.12835043500998244',width:img.width,height:img.height%7D,%20'');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 710px; height: 604px;">
继续美化，文字列表也采用缩略图+大标题+出处+日期的形式
id="iframe_0.3573719631560033" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22/uploads/img/09/26004233_6235.png?_=0.5426387730191218%22%20style=%22border:none;max-width:987px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.3573719631560033',width:img.width,height:img.height%7D,%20'');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 987px; height: 561px;">
样式表与布局文件 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./debug/wxadoc/dev/framework/view/wxml/event.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}})
id="iframe_0.2912319876775429" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22/uploads/img/09/26004400_GRTv.png?_=0.5440271864656965%22%20style=%22border:none;max-width:987px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.2912319876775429',width:img.width,height:img.height%7D,%20'');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 634px; height: 1136px;">
由于未在官方文档中找到WebView的组件，所以详情的网页正文暂时无法实现。
结语
整体开发过程还是比较舒适的，上手难度不高，过程中用到一定的CSS语法，本质上还是体现了一个H5开发模式，WXML实质上一种模板标签语言。
如果觉得《微信小程序（应用号）开发新闻客户端的实战课程》对你有帮助，请点赞、收藏，并留下你的观点哦！
