8-小程序的API

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

小程序API的具体参考文档:

https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=1476197491659

看千遍,不如自己做一遍。做一遍后,就能更加深刻地认识小程序的某个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()函数。

getHttpData: function(){

return “测试wx.request”

},

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

onLoad: function () {

var that = this

var httpData = app.getHttpData()

that.setData({username:httpData})

}

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

⑸ 我们把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})

})

}

编译后,看到如下界面:

最后,插播一个广告,如果朋友觉得我讲得不错,欢迎加群讨论学习,共同提高: 小程序学习交流 171547625。我在群里可在线解答朋友在小程序开发过程中碰到的一些问题,还会在群里存放一些重要的代码、资料哦。

时间: 2024-12-28 14:31:17

8-小程序的API的相关文章

小程序常用API介绍

小程序常用API接口 ? wx.request https网络请求 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 method:"GET", data: { x: '' , y: '' }, header: { 'content-type': 'application/json' }, success: function(res) { console.log(res.data) } }) ? 本地缓存 ? 通过key的形式添加缓存setS

把微信小程序异步API为Promise,简化异步编程

把微信小程序异步API转化为Promise.用Promise处理异步操作有多方便,谁用谁知道. 微信官方没有给出Promise API来处理异步操作,而官方API异步的又非常多,这使得多异步编程会层层回调,代码一复杂,回调起来就想砸电脑. 于是写了一个通用工具,把微信官方的异步API转化为Promise,方便处理(多)异步操作. 你可以这样用: 准备转化后的方法并暴露出 // /utils/wx-promise.js import toPromise from '/module/to-promi

图解微信小程序---调用API操作步骤

图解微信小程序---调用API操作步骤 什么是API API(Application Programming Interface,应用程序编程接口:是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节. 通俗的讲API就是接口,就是通道,负责一个程序和其他软件的沟通,本质是预先定义的函数. API通常是以Http的形式提供,它隐藏的含义就是,只要你符合我定义的标准,你就可以来使用我. 注册账号 填写注册信息 登陆 管

微信小程序--location API

location API也就分这里分两种wx.getLocation(object)获取当前位置和wx.openLocation(object)通过经纬度打开内置地图.其中定位获取位置信息返回参数是有问题的speed,accuracy这两个是没有的.还有一个就是打开内置地图之后再返回会报一个错误(Page route错误-WAService.js:2 navigateBack 一个不存在的webviewId0)如果有知道的可告知,我找到解决方式也会补充下! 主要属性: wx.getLocatio

微信小程序通过api接口将json数据展现到小程序示例

实现知乎客户端的一个重要知识前提就是,要知道怎么通过知乎新闻的接口,来把数据展示到微信小程序端上. 那么我们这一就先学习一下,如何将接口获取到的数据展示到微信小程序上. 1.用到的知识点 <1> wx.request 请求接口资源(微信小程序api中的发起请求部分) <2>swiper 实现轮播图的组件 <3>wx:for 循环语句 <4>微信小程序的基础知识 2.实现原理 首先,先看一下这个请求函数 wx.request({ url: '******',

微信小程序请求API接口PHPSESSID变化的解决方式

微信小程序开发,请求服务器API的方法使用的是微信官方提供的wx.request()方法.在开发中发现,每一个请求都会生成一个独立的PHPSESSID,如下图示: 搜索后得知,这是由于wx.request()造成的.如果直接使用浏览器请求并不会出现这种情况. 解决方式如下: 通过登录接口获取到用户的session_key 和 open_id,设置session信息如下: $3rd_session = md5(session_key . $open_id) $_SESSION[$3rd_sessi

简述 18.8.18 现有的微信小程序API能力

小程序能力竟恐怖如斯---- // 用于简述API能力 var obj = { 网络: ["发起请求", "上传/下载", "WebSocket"], 媒体: 媒体: { 图片: [ "从本地相册选择图片或使用相机拍照", "预览图片", "获取图片信息,倘若为网络图片,需先配置download域名才能生效", "保存图片到系统相册", // 需要用户授权 ], 录音

小程序api的promise封装

微信小程序和支付宝小程序的api封装方法是一样的,都是外部新建一个js,使用module.exports导出,要注意的是,最好使用post请求,虽然get请求没什么不好,主要是好修改.这里使用的MD5进行了token加密,最好还是把md5.js单独写下来(MD5函数js) var app = getApp(); // 引入app.js里初始化数据 var MD5 = require('./md5.js') function ApiFun (url,params) { var param = {}

微信小程序源码下载(200多个)

微信小程序源码下载汇总,点击标题进入对应的微信小程序下载页面. 最新 demo源码(点击标题进入帖子下载) 描述 1 微信小程序 会议室预定小程序 微信小程序 会议室预定小程序**** 本内容被作者隐藏 **** 2 微信小程序-双人五子棋小游戏 微信小程序-双人五子棋小游戏**** 本内容被作者隐藏 **** 3 打卡签到小程序 用微信小程序实现的一个简单的打卡签到的小程序拒绝 4 微信小程序---左滑删除 微信小程序---左滑删除**** 本内容被作者隐藏 **** 5 一个借钱的记事本的微

官方问答--微信小程序常见FAQ (17.8.21-17.8.27)

给提问的开发者的建议:提问之前先查询 文档.通过社区右上角搜索搜索已经存在的问题. 写一个简明扼要的标题,并且正文描述清楚你的问题. 提交 BUG:需要带上基础库版本号,设备信息(iOS, Android,开发工具等等),操作系统信息(系统版本),以及可以让他人重现的信息,最好能够提供重现 demo. 对于提供信息过少的问题,会直接关闭,请提供完整信息以后重新打开问题.另外,对于如何做某某功能,可否做某某功能的问题,会直接关闭. 微信小程序常见FAQ(17.8.21-17.8.27) Q:1.5