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


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 相关文章推荐
Jquery 的扩展方法总结
Oct 01 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
Html5生成验证码的示例代码
May 10 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中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
scrapy爬虫实例分享
2017/12/28 Python
使用python模拟命令行终端的示例
2019/08/13 Python
Python3列表List入门知识附实例
2020/02/09 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Python的信号库Blinker用法详解
2020/12/31 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
物流专员岗位职责
2014/02/17 职场文书
导游个人求职信
2014/04/25 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
国际贸易专业求职信
2014/06/04 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
2014年校长工作总结
2014/12/11 职场文书
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python