小程序教程

微信小程序（应用号）开发新闻客户端的实战课程

字号+ 作者： 来源： 2016-11-23 09:49 我要评论( )

本课程的源码请移步文章末尾

先看下效果图：

一、新建应用

1.内测阶段对于无内测号的开发者，请点无AppId。

2.然后选择一个本地目录作为工程目录。

3.项目名称任意，设置好目录，勾上当前目录创建quick start项目。如图：

4.点击添加项目，这时可以运行的效果。是自己的微信个人信息以及一HelloWorld文本框。

5.右边是调试窗口，有2个警告，是由于没有AppID导致的，可以暂时忽略，不影响开发。

6.提示一下，在app.json中设置debug:true，这样控制台看到实时的交互信息，以及将来在js文件中设置断点，类似与Chrome的调试工具以及Firefox的Firebug。

关于首页配置：

  1. {
  2.   "pages":[
  3.     "pages/index/index",
  4.     "pages/logs/logs"
  5.   ],
  6.   "window":{
  7.     "backgroundTextStyle":"light",
  8.     "navigationBarBackgroundColor": "#fff",
  9.     "navigationBarTitleText": "WeChat",
  10.     "navigationBarTextStyle":"black"
  11.   },
  12.   "debug":true
  13. }
复制代码

其中pages属性表明每一个页面的存在，其中第一条为首页，即pages/index/index

二、请求网络API接口

1.前提条件：

这里需要用到聚合数据的新闻接口，前往：https://www.juhe.cn/docs/api/id/235 注册、申请接口，拿到key，我这里已经申请到一个key：482e213ca7520ff1a8ccbb262c90320a，可以直接拿它做测试，然后就可以将它集成到自己的应用了。

2.使用微信小程序接口来访问网络：

改写index.js文件：

  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5.   data: {
  6.     motto: 'Hello World',
  7.     userInfo: {}
  8.   },
  9.   //事件处理函数
  10.   bindViewTap: function() {
  11.     wx.navigateTo({
  12.       url: '../logs/logs'
  13.     })
  14.   },
  15.   onLoad: function () {
  16.   // 访问聚合数据的网络接口
  17.   wx.request({
  18.     url: 'http://v.juhe.cn/toutiao/index',
  19.     data: {
  20.      type: '' ,
  21.      key: '482e213ca7520ff1a8ccbb262c90320a'
  22.     },
  23.     header: {
  24.         'Content-Type': 'application/json'
  25.     },
  26.     success: function(res) {
  27.       console.log(res.data)
  28.     }
  29.   })

  31.     console.log('onLoad')
  32.     var that = this
  33.     //调用应用实例的方法获取全局数据
  34.     app.getUserInfo(function(userInfo){
  35.       //更新数据
  36.       that.setData({
  37.         userInfo:userInfo
  38.       })
  39.     })
  40.   }
  41. })
复制代码

3.查看效果，检查Console控制台，得到以下信息：

说明已经成功取得到了数据。

三、将json格式的数据渲染到视图

这里要用到swipe组件实现大图轮播，文档见：https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html

1.清空原index.wxml内容，加入如下代码：

  1. <swiper indicator-dots="true"
  2.   autoplay="true" interval="5000" duration="1000">
  3.   <block wx:for="{{topNews}}">
  4.     <swiper-item>
  5.       <image src="{{item.thumbnail_pic_s02}}" class="slide-image" width="355" height="150"/>
  6.     </swiper-item>
  7.   </block>
  8. </swiper>
复制代码

2.相应地在index.js文件的onLoad方法中加入如下代码来获取网络数据

  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5.   data: {
  6.     topNews:[],
  7.     techNews:[]
  8.   },
  9.   onLoad: function () {
  10.     var that = this
  11.   // 访问聚合数据的网络接口-头条新闻
  12.   wx.request({
  13.     url: 'http://v.juhe.cn/toutiao/index',
  14.     data: {
  15.      type: 'topNews' ,
  16.      key: '482e213ca7520ff1a8ccbb262c90320a'
  17.     },
  18.     header: {
  19.         'Content-Type': 'application/json'
  20.     },
  21.     success: function(res) {
  22.       if (res.data.error_code == 0) {
  23.         that.setData({
  24.         topNews:res.data.result.data
  25.         })
  26.       } else {
  27.         console.log('获取失败');
  28.       }
  29.     }
  30.   })

  32.   }
  33. })
复制代码

3.看到轮播已经成功的展示出来了

4.依样画葫芦，同样操作读取列表新闻：

  1. <view class="news-list">
  2.   <block wx:for="{{techNews}}">
  3.     <text class="news-item">{{index + 1}}. {{item.title}}</text>
  4.   </block>
  5. </view>
复制代码

配合样式表，不然列表文字排版是横向的，将以下css加到index.wxss中：

  1. .news-list {
  2.   display: flex;
  3.   flex-direction: column;
  4.   padding: 40rpx;
  5. }
  6. .news-item {
  7.   margin: 10rpx;
  8. }
复制代码

  • 继续美化，文字列表也采用缩略图+大标题+出处+日期的形式

样式表与布局文件 index.wxss

  1. /**index.wxss**/
  2. .news-list {
  3.   display: flex;
  4.   flex-direction: column;
  5.   padding: 40rpx;
  6. }

  8. .news-item {
  9.   display: flex;
  10.   flex-direction: row;
  11.   height:200rpx;
  12.   /*width属性解决标题文字太短而导航缩略偏移*/
  13.   width:100%;
  14. }

  16. .news-text {
  17.   display: flex;
  18.   flex-direction: column;
  19. }

  21. .news-stamp {
  22.     font-size: 25rpx;
  23.     color:darkgray;
  24.     padding: 0 20rpx;
  25.     display: flex;
  26.     flex-direction: row;
  27.     justify-content:space-between;
  28. }

  30. .news-title {
  31.   margin: 10rpx;
  32.   font-size: 30rpx;
  33. }


  36. .container {
  37.   height: 5000rpx;
  38.   display: flex;
  39.   flex-direction: column;
  40.   align-items: center;
  41.   justify-content: space-between;
  42.   /*padding: 200rpx 0;*/
  43.   box-sizing: border-box;
  44. }

  46. .list-image {
  47.   width:150rpx;
  48.   height:100rpx;
  49. }

  51. .swiper-image {
  52.     width: 100%;
  53. }
复制代码

index.wxml

  1. <!--index.wxml-->
  2. <!--index.wxml-->
  3. <swiper indicator-dots="true"
  4.   autoplay="true" interval="5000" duration="1000">
  5.   <block wx:for="{{topNews}}">
  6.     <swiper-item>
  7.       <image src="{{item.thumbnail_pic_s02}}" mode="aspectFill" class="swiper-image"/>
  8.     </swiper-item>
  9.   </block>
  10. </swiper>

  12. <view class="container news-list">
  13.   <block wx:for="{{techNews}}">
  14.     <view class="news-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
  15.         <view>
  16.           <image class="list-image" src="{{item.thumbnail_pic_s}}" mode="aspectFill"/>
  17.         </view>
  18.       <view class="news-text">
  19.         <text class="news-title">{{item.title}}</text>
  20.         <view class="news-stamp">
  21.           <text>{{item.author_name}}</text>
  22.           <text>{{item.date}}</text>
  23.         </view>
  24.       </view>
  25.     </view>
  26.   </block>
  27. </view>
复制代码

四、跳转详情页与传值

保存当前点击的新闻条目信息中的title，参见官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

传值到详情页

  1. <!--logs.wxml-->
  2. <view class="container">
  3.   <text class="news-title">{{title}}</text>
  4.   <text class="news-info">暂时找不到WebView的组件接口，于是不能加载网页数据</text>
  5. </view>
  6.   //事件处理函数
  7.   bindViewTap: function(event) {
  8.     wx.navigateTo({
  9.       url: '../detail/detail?title='+event.currentTarget.dataset.newsTitle
  10.     })
  11.   }

  13. //index.js
  14.    //事件处理函数
  15.   bindViewTap: function(event) {
  16.     wx.navigateTo({
  17.       url: '../detail/detail?title='+event.currentTarget.dataset.newsTitle
  18.     })
  19.   }
  20. <!--index.wxml-->
  21. //加入data-xxx元素来传值
  22. <view class="container news-list">
  23.   <block wx:for="{{techNews}}">
  24.     <view class="news-item" data-news-title="{{item.title}}" bindtap="bindViewTap">
  25.       <image src="{{item.thumbnail_pic_s}}" mode="aspectFill" class="list-image"/>
  26.       <view class="news-text">
  27.         <text class="news-title">{{item.title}}</text>
  28.         <view class="news-stamp">
  29.           <text>{{item.author_name}}</text>
  30.           <text>{{item.date}}</text>
  31.         </view>
  32.       </view>
  33.     </view>
  34.   </block>
  35. </view>
复制代码

当然也可以通过获取全局的变量的方式传值，这里场景是由一个页面与子页面是一对一传值关系，所以不推荐，可参考quickStart项目中微信个人信息的传值方式来做。 app.js末尾加上

  1.   globalData:{
  2.     userInfo:null,
  3.     newsItem:null
  4.   }
  5. })
复制代码

由于未在官方文档中找到WebView的组件，所以详情的网页正文暂时无法实现。

结语

整体开发过程还是比较舒适的，上手难度不高，过程中用到一定的CSS语法，本质上还是体现了一个H5开发模式，WXML实质上一种模板标签语言。


　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评
精彩导读
2-HelloWorld微信小程序

2-HelloWorld微信小程序

微信小程序 轮播图 swiper图片组件

微信小程序 轮播图 swiper图片组件

微信小程序开发记账应用实战服务端之用户注册与登录

微信小程序开发记账应用实战服务端之用户注册

微信小程序倒计时组件

微信小程序倒计时组件

微信小程序实现购物车页面

微信小程序实现购物车页面

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习