微信小程序(应用号)开发新闻客户端实例


Posted in Javascript onOctober 24, 2016

下载最新版的微信小程序开发工具,目前是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.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: '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/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
  }
})

微信小程序(应用号)开发新闻客户端实例

 Paste_Image.png

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

结语

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS Array对象入门分析
Oct 30 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
Vue实现菜单切换功能
Nov 08 Javascript
微信小程序 倒计时组件实现代码
Oct 24 #Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 #Javascript
微信小程序 购物车简单实例
Oct 24 #Javascript
Select2.js下拉框使用小结
Oct 24 #Javascript
微信小程序 绘图之饼图实现
Oct 24 #Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 #Javascript
微信小程序 富文本转文本实例详解
Oct 24 #Javascript
You might like
PHP开发中常用的8个小技巧
2008/08/27 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
python求pi的方法
2014/10/08 Python
python服务器与android客户端socket通信实例
2014/11/12 Python
python利用微信公众号实现报警功能
2018/06/10 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
机电一体化应届生求职信范文
2014/01/24 职场文书
社区维稳工作方案
2014/06/06 职场文书
MySQL锁机制
2021/04/05 MySQL
美元符号 $
2022/02/17 杂记