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


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 相关文章推荐
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
微信小程序 倒计时组件实现代码
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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
PHP常用代码
2006/11/23 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
js 上传图片预览问题
2010/12/06 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
javascript实用方法总结
2015/02/06 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
python实现探测socket和web服务示例
2014/03/28 Python
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
公司周年庆活动方案
2014/08/25 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS