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


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 相关文章推荐
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
js跳转页面方法总结
Jan 29 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
7个jQuery最佳实践
Jan 12 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
详解原生js实现offset方法
Jun 15 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 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中的CMS的涵义
2007/03/11 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
详解如何使用webpack打包JS
2018/06/21 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
Django的信号机制详解
2017/05/05 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
django实现用户注册实例讲解
2019/10/30 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
AJax面试题
2014/11/25 面试题
机电专业大学生求职信
2013/10/04 职场文书
教学实验楼管理制度
2014/02/01 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书