微信小程序之数据请求
2021/10/24 22:09:42
本文主要是介绍微信小程序之数据请求,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
微信小程序的数据请求有点类似于ajax异步请求
还是举一个例子来看一下:
首先我们弄一个按钮来请求数据,并为其绑定事件
1 | < button type = "primary" bindtap = "getdata" >请求数据</ button > |
type 表示类型,颜色为 微信绿
这里我们请求数据使用 wx:request
其参数为
url 开发者服务器接口地址
data 请求的参数
header 设置请求的 header,header 中不能设置 Referer。content-type 默认为application/json
timeout 超时时间,单位为毫秒
method HTTP 请求方法
success 接口调用成功的回调函数
fail 接口调用失败的回调函数
在 .js 文件中
数据设置,为了*之后把请求的数据存储在data
1 2 3 4 5 6 | /** * 页面的初始数据 */ data: { datalist:[] }, |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | getdata(){ wx.request({ method: "GET", success: (result) => { //console.log(result.data) this.setData({ datalist:result.data.desc }) }, fail: (res) => {}, complete: (res) => {}, }) }, |
注意:
我这里请求的是 https://api.asilu.com/ 网站里的抖音视频信息
微信小程序里与前端设计不同之处:
1.跨域限制
2.添加安全域名
添加安全域名:首先在小程序申请网站开发管理)——开发设置——服务器域名 中修改request合法域名。 然后在微信者开发工具——详情——项目配置的合法域名 中看看有没有添加的域名(记得刷新)
请求的数据:
然后我们可以使用视图组件 view 来把数据调用。如果有多组数据,就可以通过 列表渲染 来用所有数据(wx:for)。
这里我只有一组数据,所以就直接使用了。
1 | < view >{{datalist}}</ view > |
结果:
想了解更多的可参看 微信开发文档之wx:request。
这篇关于微信小程序之数据请求的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-31苹果手机微信小程序底部有一条横线,页面如何兼容?-icode9专业技术文章分享
- 2024-12-31微信小程序如何获取页面高度?-icode9专业技术文章分享
- 2024-12-30uni-app微信小程序怎么修改默认导航栏的间距样式?-icode9专业技术文章分享
- 2024-12-30uni-app微信小程序全局配置自定义导航栏有哪些方法?-icode9专业技术文章分享
- 2024-12-30在Uni-app 微信小程序中怎么使用 Vant 组件库的导航栏组件?-icode9专业技术文章分享
- 2024-12-30微信小程序的 WXSS 中怎么实现单行文本超过部分显示省略号?-icode9专业技术文章分享
- 2024-12-24微信小程序资料入门指南
- 2024-12-20微信小程序开发入门指南
- 2024-12-20小程序 createCameraContext() 怎么实现识别条形码功能?-icode9专业技术文章分享
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享