有渔微信小程序系统概述《六》小程序的API

这是一款来自小程序免费开发制作网的小程序demo源码,希望大家喜欢。

小程序开发框架提供丰富的API,可以方便地调用微信提供的功能,比如获取用户信息,本地存储,微信支付等功能。目前,小程序的API分成下面几个大类:网络、媒体、数据、位置、设备、界面、开放接口。

 

 

看千遍,不如自己做一遍。做一遍后,就能更加深刻地认识小程序的某个API,然后举一反三,通过查询腾讯的API文档,就能掌握其他API了。好了,下面开始干活。

    1、wx.request

wx.request发起的是https请求。一个微信小程序,同时只能有5个网络请求连接。wx.request的参数如下:

参数

类型

是否必填

说明

url

String

开发者服务器接口地址

data

Object、String

请求的参数

header

Object

设置请求的 header , header 中不能设置Referer

method

String

默认为 GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

success

Function

收到开发者服务成功返回的回调函数,res = {data: ‘开发者服务器返回的内容’}

fail

Function

接口调用失败的回调函数

complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)

 

我们请求这个restful API:http://news-at.zhihu.com/api/4/news/latest,

然后把数据显示出来。

⑴ 我先用postMan测试下这个restful API,看下显示的数据是什么?

(此图片来源于网络,如有侵权,请联系删除! )

⑵ 在app.js中添加一个getHttpRequest()函数。


  1. getHttpData: function(){
  2. return “测试wx.request”
  3. },

⑶ index.js的onLoad()函数修改成:


  1. onLoad: function () {
  2. var that = this
  3. var httpData = app.getHttpData()
  4. that.setData({username:httpData})
  5. }

     ⑷ 编译后,能看到如下界面:

     

(此图片来源于网络,如有侵权,请联系删除! )

⑸ 我们把getHttpData的代码进行升级,如下所示:


getHttpData: function(callback){
wx.request({
url: 'http://www.yangfuhai.com/api',
data: {
x: '' ,
y: ''
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
callback(res.data)
}
})
}

⑹ index.js的onLoad()函数修改成:


onLoad: function () {
var that = this
app.getHttpData(function(data){
console.log(data.date)
that.setData({username:data.date})
})
}

     ⑺ 编译后,能看到如下界面:

     

(此图片来源于网络,如有侵权,请联系删除! )

⑻ 

把that.setData({username:data.date})修改成:

that.setData({username:data.stories[0].title})

     编译后,看到如下界面:

     

(此图片来源于网络,如有侵权,请联系删除! )

在前面的例子中,data.stories返回的是个数组列表,我们通过data.stories[0].title得到了数组的第1个对象的title。现在让我们回顾下小程序的渲染功能,用wx:for把data.stories循环地列出来。

⑴ index.wxml里添加如下代码:


<view wx:for="{{items}}">
{{index}}: {{item.title}}
</view>

⑵ index.js的onLoad()函数修改成:


onLoad: function () {
var that = this
app.getHttpData(function(data){
that.setData({items:data.stories})
})
}

     编译后,看到如下界面:

     

(此图片来源于网络,如有侵权,请联系删除! )

免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。

本资源来自易用通,如有侵权,请联系站长。

【小程序源码网资源版权风险说明】:
本站为避免不必要的纷争,分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台,站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意,所以如有遗漏资源侵犯了您的合法权利,请联系站长删除。
【小程序源码网资源下载使用说明】:
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网毫无人看的介绍】:
本站又称Z站,原名贼娘网,开站于2018年,换过三任站长,目前站长是第四任站长,本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站,主要小程序资源有用于学习的小程序源码,也有正版原创可商用的小程序源码,是一个公益博客型网站。
【小程序源码网原创源码版权申明】:
未经小程序源码网许可,任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内,版权无使用限制),否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】:
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网站长最后的屁话】:
如有您认为本站有任何侵犯您合法权益的文章,或者您有什么疑问需求,欢迎联系站长QQ,站长24小时在线,备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理,如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论,就不用加站长啦,对于白嫖党,QQ群才是处理问题的天堂,当然站长也欢迎大家骚扰~
小程序源码网 » 有渔微信小程序系统概述《六》小程序的API
嘿,投喂下嘛!