微信小程序 调用远程接口 给全局数组赋值代码实例
关键是 let that = this
因为在onLoad 的 wx.request方法里, this指的是 wx.request 的上下文, 所以应该是在 onLoad 的时候定义 let that = this
调用远程服务,序列化后,把obj赋值给bookList
最开始的报错代码如下:
Page({ data: { bookList: [] }, onLoad: function() { wx.request({ url: 'https://jiashubing.cn/wechat/book', header: { 'content-type': 'application/json' }, success(res) { var obj = JSON.parse(res.data) console.log(obj) this.setData({ bookList: obj }) } }) } })
报错为:
VM3293:1 thirdScriptError Cannot read property 'setData' of null;at pages/index/index onLoad function;at api request success callback function TypeError: Cannot read property 'setData' of null
报错原因是this 指向有问题,得在onload的时保存实例指向,let that = this,下面全用that,this指向永远值得是自己的上下文环境
正确代码如下:
Page({ data: { bookList: [] }, onLoad: function() { let that = this wx.request({ url: 'https://jiashubing.cn/wechat/book', header: { 'content-type': 'application/json' }, success(res) { var obj = JSON.parse(res.data) console.log(obj) that.setData({ bookList: obj }) } }) } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
微信小程序调用PHP后台接口 解析纯html文本
微信小程序调用PHP后台接口,解析纯html文本,效果图片预览 1.微信js动态传参: wx.request({ url: 'https://m.****.com/index.php/Home/Xiaoxxf/activity_detail?a_id='+options.id,//含富文本html data: { is_detail:1 }, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT heade
-
微信小程序 两种为对象属性赋值的方式详解
微信小程序两种为对象属性赋值的方式 对应config.wxml <view> 阶段一<switch id="config1" checked bindchange="switchChange"/> </view> 对应config.js data:{ //定义对象 configs:{} } //方式一 switchChange:function(e){ //为对象的某一属性赋值 configs.config1={ }; conso
-
微信小程序 wx.request(接口调用方式)详解及实例
微信小程序 wx.request----接口调用方式 最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结. 官方接口 官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实例. wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' },
-
微信小程序常用赋值方法小结
本文实例讲述了微信小程序常用赋值方法.分享给大家供大家参考,具体如下: 1.微信小程序将值赋值给局部变量: "=" 实例: var name=options.goodsName 2.微信小程序将值赋值给全局变量: "=" 或 this.setData({ }) 实例: this.data.goodName=options.goodsName this.setData({ goodName: options.goodsName }) 3.微信小程序将局部变量赋值给全局
-
微信小程序如何调用json数据接口并解析
开始写js,用request请求接口url,当请求成功的时候,在控制台打印一下返回的res.data数据,在控制台可以看到打印了接口数据了,在请求接口成功之后,用setData接收数据,并且需在data中声明一个接收数据的变量. Page({ data: { list: [] }, onLoad: function (options) { wx.request({ url: 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg?g_tk=538
-
微信小程序调用天气接口并且渲染在页面过程详解
前两天写了关于组件库 iView Weapp的教程,其实也就是把文档上的例子拿出来体验了一遍,今天写一个具体的例子,调用一个免费的天气接口的api,并且把所获取的内容展示在前端的界面,前端界面与 iView Weapp结合,展示的一个小的demo. 先上效果 开始写代码: 1:找打一个免费的天气接口 免费接口api: https://www.apiopen.top/api.html#top https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%
-
微信小程序 调用远程接口 给全局数组赋值代码实例
关键是 let that = this 因为在onLoad 的 wx.request方法里, this指的是 wx.request 的上下文, 所以应该是在 onLoad 的时候定义 let that = this 调用远程服务,序列化后,把obj赋值给bookList 最开始的报错代码如下: Page({ data: { bookList: [] }, onLoad: function() { wx.request({ url: 'https://jiashubing.cn/wechat/bo
-
详解微信小程序调用支付接口支付
我前段时间做微信支付,遇到了很多坑,网上也没有讲解的特别明白的,通过借鉴各路人才的经验,最后也完成了,网上有很多讲解,我在这只讲一些注意点和解决的方法.我就讲讲我从完全懵到完成的过程吧. 在微信提供的接口文档中提供了一个微信支付接口,应该是直接调用这个接口就可以发起微信支付 文档路径:https://developers.weixin.qq.com/miniprogram/dev/api/api-pay.html#wxrequestpaymentobject 但是,当开始信心满满的去看所需参数时
-
微信小程序调用支付接口的完整流程记录
目录 当然在开发之前,我们需要有下面这些东西: 步骤如下: 总结 官方的文档路径------>文档路径:developers.weixin.qq.com/miniprogram… 当然在开发之前,我们需要有下面这些东西: appId(小程序分配) 小程序密钥(小程序配置界面获取) 商户号 api密钥(商家后台自己设置) 首先我们要知道把大象放进冰箱拢共需要三步(不是),那么我们调起支付也是一样的 步骤如下: wx.login获取用户临时登录凭证code,发送到后端服务器换取openId 在下单时
-
微信小程序和H5页面间相互跳转代码实例
这篇文章主要介绍了微信小程序和H5页面间相互跳转代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.微信小程序跳转小程序 wx.navigateToMiniProgram // 小程序跳转 /* * appId string 是 要打开的小程序 appId * path string 否 打开的页面路径,如果为空则打开首页 * extraData object 否 需要传递给目标小程序的数据,目标小程序可在 App.onLaunch,A
-
微信小程序 拍照或从相册选取图片上传代码实例
这篇文章主要介绍了微信小程序 拍照或从相册选取图片上传代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 upload.wxml <!--pages/upload/upload.wxml--> <button bindtap='uploadPhoto'>拍照选取照片上传</button> upload.js // pages/upload/upload.js Page({ data: { imgData: [] }
-
微信小程序点击顶部导航栏切换样式代码实例
这篇文章主要介绍了微信小程序点击顶部导航栏切换样式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 类似这样的效果 <view class='helpCateList'> <!-- 类别 --> <scroll-view class='scroll-view' scroll-x="true"> <view class="item-content" wx:key=&qu
-
微信小程序调用微信支付接口的实现方法
前言:应项目要求,需要使用微信小程序做支付,写完后告知手续费太高方案不予通过(宝宝心里苦,但宝宝不说).此次开发在因站在巨人的肩膀上顺利完成. 微信支付文档传送门:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3 1.开发工具: Eclipse+Tomcat+微信web开发工具 2.开发环境: java+maven 3.开发前准备: 3.1 所需材料 小程序的appid,APPsecret,支付商户号(mch_i
-
详解微信小程序网络请求接口封装实例
网络请求封装实例 实现定制要求和方便调用,对微信小程序的网络请求接口进行了封装 封装位置:app.js,方便全局调用 实现方法调用,只用关注接口url和入参 默认和自定义的请求成功.失败和完成的回调处理 可设置请求失败自动重新请求的次数 可以防止重复提交 每个请求设定requestCode 代码 直接将这个方法放在了app.js中 /** * 接口公共访问方法 * @param {Object} urlPath 访问路径 * @param {Object} params 访问参数(json格式)
随机推荐
- Jquery实现图片左右自动滚动示例
- 基于Java编写串口通信工具
- Java使用SFTP上传文件到服务器的简单使用
- C# SetWindowPos窗口置顶使用说明
- php抽象类用法实例分析
- PHP4引用文件语句的对比
- ASP MSSQL存储过程的实现小例
- JSP开发中在spring mvc项目中实现登录账号单浏览器登录
- 深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
- Maven 常用插件的详细整理
- JS实现超简单的汉字转拼音功能示例
- jQuery 标题的自动翻转实现代码
- 实用的多级树形展开菜单效果代码
- 基于javascript制作微信聊天面板
- 微信端开发--登录小程序步骤
- spring cloud 之 客户端负载均衡Ribbon深入理解
- 推荐一个非常棒的Titanium MVC框架
- Python中动态检测编码chardet的使用教程
- 详解vue2.0 不同屏幕适配及px与rem转换问题
- python3+PyQt5+Qt Designer实现堆叠窗口部件