小程序前端接口数据对接

这几天着手做一个商城小程序的答题系统,主要功能就是在线答题,提交答案,根据评分判定奖励,然后到

商城兑换奖券,我呢,负责写后台的接口,先来大概看一下吧:

可以看到,我这个提交答卷以供评分的接口,前台提供了答案,并且每题的答案要带上这题的id,当时也是出于接口

处理起来方便的目的,for循环的时候,直接根据id查询该题的答案并加以比较,算出得分。

然后小程序前端接口对接的时候,处理起来并没有想象中那样简单,毕竟小程序很多地方还没有摸透。但最终还是巧

妙地解决了问题。

<view class="s_answer pf_m border {{checked == index+1?‘active‘:‘‘}}"     data-index="{{index+1}}"     data-exam="{{nowSubject.id}}"      data-check="{{index==0?‘A‘:index==1?‘B‘:index==2?‘C‘:index==3?‘D‘:‘‘}}"     wx:for="{{nowSubject.answers}}" wx:key="index"     catchtap=‘answerCheck‘>
          {{index == 0?‘A:‘:‘‘}}
          {{index == 1?‘B:‘:‘‘}}
          {{index == 2?‘C:‘:‘‘}}
          {{index == 3?‘D:‘:‘‘}}
          {{item}}
</view>

红字是我为了将该题id和答案存入页面变量所写的,这个data-check当时也是抱着试试看的态度,没想到三元运算符

当真可以有如此酷炫的玩法。(其实下面的选项内容前面的选项判断也可以这么写)

然后我们来看看这个catchtap方法,其实就相当于我们常见的单击事件:

answerCheck:function(e){
    var that = this;
    var nowSubject = that.data.nowSubject;
    var index = e.target.dataset.index;
    var exam = e.target.dataset.exam;
    var check = e.target.dataset.check;
    var answerBox = that.data.answerBox;
    var sub = {};
    sub.id = exam;
    sub.answer = check;
    answerBox.push(sub);
    nowSubject.check = check;
    that.setData({
      checked:index,
      nowSubject: nowSubject,
      answerBox: answerBox,
      tNumber: 0
    })
  },

不用说,红字又是我写的,这里通过e.target.dataset.xxx获取前台页面绑定的data-exam和data-check,并且将其放

到一个对象变量sub中,再将这个对象push到数组answerBox中,最终20题,只要选项点击了的话,那么该题的id和

选项都将作为对象存到页面变量中。最后在题目答完之后将answerBox作为参数传给提交答卷接口,大功告成!!!

原文地址:https://www.cnblogs.com/eco-just/p/9227131.html

时间: 2024-08-30 10:47:51

小程序前端接口数据对接的相关文章

微信小程序开发本地数据缓存教程

微信小程序开发过程中,本地数据缓存是必不可少的一部分.而且本地数据缓存的用途还挺多的,下面木鱼小铺(https://www.muyu007.cn)就和大家分享一下微信小程序开发本地数据缓存教程,希望对大家有所帮助! 第一步:读写本地数据缓存 微信小程序为了方便开发者缓存数据提供了读写本地数据缓存接口,读本地数据缓存采用的是wx.getStorage/wx.getStorageSync接口,写本地数据缓存的是wx.setStorage/wx.setStorageSync接口.其中以Sync结尾的是

WordPress开发app(小程序)接口开发教程

引言 废话不多说这套系列的教程就是教你怎么将自己现有的WP网站做成一个app或者小程序 技术栈要求 需要声明的是,在这套教程之中,因为精力有限的关银戒原创系,我不负责任何前端页面的设计以及开发,只讲前端与WP交互的接口设计与开发.当然,我还是会尽可能的做出一个简单Demo用于展示与测试(为了通俗易懂这里使用 uni-app ). 而至于什么是接口开发如果有人不明白的可以去百度一下,这里就不详细说明了.但简单且通俗易懂的来说,其实接口就是客户端(app)与服务端交互的一个桥梁,你可以理解成是app

微信小程序API接口

微信小程序API接口 wx.request(OBJECT)   wx.request发起的是 HTTPS 请求. OBJECT参数说明: url->开发者服务器接口地址->String; data->请求的参数->Object.String; header->设置请求的 header , header 中不能设置 Referer->Object; method->默认为 GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE,

程序与页面—微信小程序前端开发工具

你可以观察到 pages/logs/logs 下其实是包括了4种文件的,微信客户端会先根据 logs.json 配置生成一个界面,顶部的颜色和文字你都可以在这个 json 文件里边定义好.紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式.最后客户端会装载 logs.js,你可以看到 logs.js 的大体内容就是: Page({ data: { // 参与页面渲染的数据 logs: [] }, onLoad: function () { // 页面渲染后 执行 } }) Page

微信小程序用户身份-微信小程序前端开发工具

一个团队进行小程序的开发,那么团队成员的身份管理是很有必要的. 管理员可在小程序管理后台统一管理项目成员(包括开发者.体验者及其他成员).设置项目成员的权限,包括:开发者/体验者权限.登录小程序管理后台.开发管理.查看小程序数据分析等. 管理入口位于:小程序管理后台 - 用户身份 – 成员管理 权限 说明 开发者权限 可使用小程序开发者工具及开发版小程序进行开发 体验者权限 可使用体验版小程序 登录 可登录小程序管理后台,无需管理员确认 数据分析 使用小程序数据分析功能查看小程序数据 开发管理

微信小程序 -- 前端技术API手册

小时候随手拿着英语小本子,在厕所或者路上随时翻看的场景大家还记得吗? 现在它有回来了,本次工程主要收录前端各项技术API,整合在微信小程序中,在首页选择要学习的技术就可以进到相关页面. 小程序长这样:               目前的进展是 jQuery API 收录到一半,预计下周 小程序 会先上线,其他内容后续进行补充. 大家有兴趣或者想贡献自己力量的可以联系我,在公众号底部菜单中有联系方式. 如果有想学习微信小程序开发的也可以联系我. 广播: 关注微信公众号 "jQuery每日经典&qu

网易云易盾推出面向微信小程序的大数据反作弊产品

近日,国内领先的业务风控服务网易云易盾对外推出面向微信小程序的大数据反作弊产品,源于网易20年的核心业务风控技术与全面稳健的策略模型,有机整合了设备指纹.IP画像.规则引擎等八大能力,可广泛应用电商营销.金融支付.生活服务类小程序场景,帮助企业防范微信小程序端的黑灰产作弊侵害. 易盾安全调查显示,小程序已成为企业业务风险环节新缺口 易盾安全经过调查发现,相比App,大部分互联网开发者还没有足够的能力利用小程序的特性建立起有效的风控策略."羊毛党"通过自己养号或着批量购买的大量微信号,就

微信小程序前端源码逻辑和工作流

看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.js,app(obj)注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.其他文件可以通过全局方法getApp()获取app实例,进而直接调用它的属性或方法,例如(getApp().globalData) //app.js App({ onLaunch: function ()

解决微信小程序手机请求数据不返回的问题

在微信开发者工具开发好小程序之后想要在手机上预览调试,发现手机上请求不到数据,在微信开发者工具上就能返回数据. 这是个大坑. 解决方法: 首先要安装最新的微信开发者工具,最新的才有远程调试功能 以为这样就可以了? 还有个坑,我是在本地用node开发的接口,本地开发时候是这样调用的 这样在微信开发者工具中是没问题的,是有数据返回的.但是在手机上就不行了,没数据返回. 经过多次试验,发现要用IP地址请求才行 - -!!!!!!!!!!(要注意下:不能用127.0.0.1,要用本机的IP地址,cmd打