php微信开发例子,微信开发实战之知乎日报
前言
看了那么多的小程序入门,想必各位看官也差不多对小程序已经有了一定的了解。这篇文章就不再主讲入门,现在我们要通过一个知乎日报的小程序去实践一下,加深对微信小程序API的理解。
好了,下面我们开始吧。
实战开始
首先先看看我们今天要做的知乎日报的成果。
如下图。不过由于篇幅问题,今天只讲首页的完成,里面包含了与后端的交互,页面的布局,数据的渲染,事件响应等,基本上囊括了如何制作一个单页所有开发。
知乎日报小程序首页
1. 资源准备
知乎日报-简要版 API:new
s-at.zhihu.com/api/4/news/latest 今日热文
news.at.zhihu.com/api/4/news/
before
/ 更多往日热文
上面这两个地址是我们今天要做的首页的API,我们将发起request请求,拿回数据做渲染。
2.首页JS
下面我们将开始编写代码,请保持首页目录结构跟我下图一致。
首页三个文件
好,首先我们先写JS文件,代码如下,而且我都加了详细的注释。// index.js
//index.js
//获取应用实例
var app = getApp()
var utils = require('../../utils/util.js');
//初始化数据
Page({
data: {
list: [],
duration: 2000,
indicatorDots: true,
autoplay: true,
interval: 3000,
loading: false,
plain: false
},
//onLoad方法,程序启动自执行,请求知乎日报今日热闻接口
onLoad: function () {
var that = this;
wx.request({
url: 'http://news-at.zhihu.com/api/4/news/latest',
headers: { // http头数据
'Content-Type': 'application/json'
},
success: function (res) { //请求成功后的回调
that.setData({ // 设置返回值
banner: res.data.top_stories, //banner图片数据
list: [{ header: '今日热闻' }].concat(res.data.stories) //热闻数据list
})
}
})
this.index = 1; //方便下拉点击更多时的计数下标,暂可忽略
},
//下拉滚动条,点击更多的响应
loadMore: function (e) {
if (this.data.list.length === 0) return
var date = this.getNextDate()
var that = this
that.setData({ loading: true });
wx.request({ // 再次发起请求,请求上一天的热闻
url: 'http://news.at.zhihu.com/api/4/news/before/' + (Number(utils.formatDate(date)) + 1), //此此API需要带日期
headers: {
'Content-Type': 'application/json'
},
success: function (res) { // 成功回调
that.setData({
loading: false,
list: that.data.list.concat([{ header: utils.formatDate(date, '-') }]).concat(res.data.stories)
})
}
})
},
//事件处理函数
bindViewTap: function(e) {
wx.navigateTo({
url: '../detail/detail?id=' + e.target.dataset.id
})
},
//转换时间函数
getNextDate: function (){
var now = new Date()
now.setDate(now.getDate() - this.index++)
return now
},
})
这里我们简单讲下几个要点:
2.1 设置data值
目前微信小程序只能支持this.setData({....});
无法直接指定一个值this.data.xxxx = ''; //记住,这样是不行的。
2.2 onLoad
这是页面生命周期里的一个监听页面加载的方法,就是说每一次进入这个页面开始都要执行这里面的方法,和JS中load一样。
2.3 和服务端交互
微信小程序中和后端交互也是采用的请求接口,具体样例如下,我已经加了注释了,想必都能看懂。wx.request({
url: 'test.php', //接口地址
data: { // 参数
x: '' ,
y: ''
},
header: { // 头信息
'Content-Type': 'application/json'
},
success: function(res) { // 成功 回调
console.log(res.data)
}
})
3.首页布局 index.html
好了,写完了和后端交互的js代码,这样我们就拿到了数据,现在我们开始写页面的布局。
其实微信小程序在渲染页面这块,采用的也是一种模板引擎的方式。而且页面取值方式都比较通用。和其他一些页面模板引擎都是差不多的。
好,我们开始吧。这个页面布局还是比较简单的。
布局划分
3.1 banner块
首先,我们去找下文档,会有专门的banner组件,
swiper(点击可以跳转文档)
我们就用这个swiper组件写咱们的bannner模块,这里有个注意点在 swiper 组件中只可放置组件,其他节点会被自动删除。// index.html banner模块代码
autoplay="{{autoplay}}" class="banners" interval="{{interval}}" duration="{{duration}}">
{{item.title}}
3.2 热闻列表模块
其实下面的一个热闻列表也就是一个list循环,这边怎么做循环呢,同样我们可以查询API文档可得。
利用 wx-for 属性,但是这只是一个属性,我们需要把它加到一个标签上面才能执行,为了承载这个属性,微信小程序专门定义了一个无其他作用的标签 。
另外注意,微信小程序里有很多默认:在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item,如果需要修改的话,使用 wx:for-item 可以指定数组当前元素的变量名。
所以对下面的item.header不要惊讶,item哪来的。
代码如下:
{{item.header}}
{{item.title}}
更多
另外,这里有个更多的点击响应,使用的是 bindtap 属性指定响应方法名。
4.样式表 index.wxss
这个就不单独说了,跟平时写的 css几乎没啥区别。最后也会放出源代码给大家下载。
5. 写在最后
这篇小文,只是带领大家做一个和服务端进行交互的小demo,加深下对微信小程序的前前后后的理解。
后续的正在coding中....
敬请期待。
【相关推荐】
php微信开发例子,微信开发实战之知乎日报相关推荐
- php使用接口 知乎,【微信服务号开发】03.实战 回复知乎日报,返回8个最新知乎日报图文消息...
实战 回复知乎日报,返回8个最新知乎日报图文消息 使用接口 知乎日报接口 使用php的get请求知乎日报接口curl 类实现 class Curl { /** * cur get * @param [ ...
- Vue.js入门 0x13 实战:知乎日报项目开发-文章详情页
加载内容 右侧的文章内容区域封装成了一个组件.在components目录下新建daily-article.vue组件,它唯一接收唯一的一个prop:id,也就是文章的id,如果id变化了,就说明切换了 ...
- swift学习五天 项目实战-知乎日报之网络交互NSURLConnection
这里附上代码下载地址: http://download.csdn.net/detail/guchengyunfeng/7989139 网络接口 格式: 协议1: http://news-at. ...
- 《Vue.js实战》知乎日报V2.0
因为书中的代码比较久远,许多接口.webpack配置都已更新,但这个项目还是很好玩的,本文的代码都是相对于原书代码的补充. 完整代码:https://github.com/JohnnyMu/zhihu ...
- 【系】微信小程序云开发实战坚果商城-云开发开篇
第 3-2 课:云开发开篇 目录 开篇 [系]微信小程序云开发实战坚果商城-开篇 基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信 ...
- 基于云开发的微信小程序实战教程(二)
基于云开发的微信小程序实战教程(二) 上篇文章中,简单介绍了下小程序云开发的概念,还有开发工具的安装和配置,云开发环境已经搭建完毕. 本章主要内容:微信开发者工具如何使用,小程序云开发的基础目录结构 ...
- 基于云开发的微信小程序实战教程(一)
基于云开发的微信小程序实战教程(一) 最近刚开发了款小程序,在开发过程中发现,基于云开发的教程资源不是很多,而且很不详细.所以边实战边总结了下云开发的简单教程,希望对你有所帮助. 本章主要内容:什么是 ...
- 《微信公众平台应用开发实战(第2版)》一导读
前 言 为什么要写这本书 截至本书完成时,微信已有超过6亿的用户,公众平台给了我们接触这6亿用户的机会.公众平台对于我们来说是一个全新的平台,任何人都可以在公众平台上注册一个账号并进行自己的探索,这意 ...
- ASP.NET MVC5微信公众平台整合开发实战教程
<ASP.NET MVC5&微信公众平台整合开发实战(响应式布局.JQuery Mobile,Windows Azure.微信核心开发)> 课程讲师:57Code 课程分类:ASP ...
最新文章
- flayber正文 再谈如何学习Linux,一线Linux专家学习经验谈
- BOOST_VMD_ASSERT_IS_LIST相关的测试程序
- vue制作tab切换(vuex + 动画)
- SpringOne Platform 2016回顾
- 前端学习(537):多列布局4横跨多列
- [论文阅读] Automatic Polyp Segmentation via Multi-scale Subtraction Network
- 预印本(Preprint)及出版商的投稿政策
- 关于Hive在主节点上与不在主节点上搭建的区别之谈
- A* 寻路算法[转载]
- Office 2016 for mac 打开闪退/出现问题,提示发送错误报告
- Java 简单计算器
- 连接计算机和网线之间的设备,网线的制作及双绞线与设备之间的连接方法
- HTML+CSS静态页面网页设计作业——甜品奶茶店(19页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作
- 不恰当使用线程池处理 MQ 消息引起的故障
- 七、vertical-align属性、透明度属性及兼容、ps常用工具、常见的图片格式、项目规范、命名参考、iconfont的使用
- vs2013 error C1083: 无法打开包括文件: SDKDDKVer.h: No such file or direc
- 工作流process-designer图 未执行的用户示例出线高亮显示bug
- SaaS-HRM中的权限设计
- 谁能教教我怎么学单片机,先学什么,怎么入门?
- C51简易计算器微机课设
热门文章
- Node-流(Stream)三二事-1.0.1版本
- mydumper 0.6.2 安装,dba的必备备份工具,必须掌握
- 开始学习吧,《算法》:动态连通性练习
- 集群四 mysql-5.7.16一键安装
- 关于最长公共子序列的执行过程
- Android开发环境——Eclipse ADT相关内容汇总
- ActivityGroup是如何对嵌入的Activitys进行管理的
- 第拾壹章學習 Lisp 3rd Edition, Winston Horn
- 高并发软件设计的几种方式
- 高效的找出两个List中的不同元素