以聚合数据免费接口为例,通过 Class 类继承方法,让小程序实现项目化接口调用
微信小程序数据来源,是通过接口实现的。但接口如何调,数据如何取?每个人都有不同的方法,下面以聚合数据免费接口为例。
配置接口 config.js
聚合数据请求接口需要以key作为参数。
const config = {
api_base_url: "http://apis.juhe.cn/goodbook",
key: "93bdf89de207034fa6c7544f88b99c76"
}; export {
config
}
封装 wx.request 方法
ES6 中有类方法可以直接使用,使用 HTTP 作为类名,新建 request 作为类的方法,在这个方法中调用 wx.request。
class HTTP{ //request
request(params) {
let that = this; if (!params.method) {
params.method = 'GET';
}
wx.request({
url: config.api_base_url + params.url + "?key=" + config.key,
data: params.data,
method: params.method,
header: {
'content-type': 'application/json'
},
success:(res)=>{
let code = res.statusCode.toString();
let error_code = res.error_code; if(code.startsWith("2")){
wx.showToast({
title: res.data.reason,
}); //通过回调函数将获取的值回传
params.success(res.data);
} else{
this._show_message(error_code);
}
},
fail:(err)=>{
console.log("err " + err)
}
});
} //显示报错信息
_show_message(error_code){
if(!error_code){
error_code == 1
}
wx.showToast({
title: tips[error_code],
icon:'error',
duration:2500
})
}
} export {
HTTP
}
这个 request 方法有用到基本接口配置文件config以及请求成功或失败后提示的报错信息,需要将 config 导入,并定义接口报错信息。
小程序的文件引用路径必须用相对路径,使用绝对路径可能会导致路径指向不正确。
import {config} from "../config"; const tips = {
1:"不好意思,错了",//默认错误
205001:"图片类目为空",
205002:"图书类目ID不能为空",
205003:"查询不到结果",
10001:"错误的请求KEY",
10002:"该KEY无请求权限",
10003:"KEY过期",
10004:"错误的OPENID",
10005:"应用未审核超时,请提交认证",
10007:"未知的请求源",
10008:"被禁止的IP",
10009:"被禁止的KEY",
10011:"当前IP请求超过限制",
10012:"请求超过次数限制",
10013:"测试KEY超过请求限制",
10014:"系统内部异常",
10020:"接口维护",
10021:"接口停用"
}
外部使用 request 方法时,必须将这个 class 实例化:
const http = new Class();
const request = http.request();
使用 Module 作为不同业务处理数据的方法
业务不同,接口不同,调用接口的参数以及返回的数据也不同。比如,catalog 这个业务,包含查询 catalog ,catalog 详情,catalog 目录等,不能使用同一个 request 处理,也尽量不要在 Pages 中直接调用接口,可能会带带来的安全问题,因此需要将处理数据的方法以业务的不同分别写。每个人不同,可能写法不同,但是在实操时应该有这样的想法的。
通过继承 HTTP Class 直接调用 request 方法请求数据。
例,查询 catalog:
class ClassCatalogModel extends HTTP{ getCatalog(sCallback) {
this.request({
url: "/catalog",
success: (res) => {
// 通过回调方法将数据将数据获取到
sCallback(res)
}
})
}
} export {
ClassCatalogModel
}
sCallback 作为promise中成功之后的回调方法,将获取的数据返回。小程序中的所有数据请求大都是异步请求,因此使用 callback 将数据回调是比较合理的。
在页面加载后触发 Module 方法
通常数据是在 onLoad 方法中加载并执行。这里需要注意,更新数据需要用到 setData 方法,建议在 data 中定义要 setData 的对象名称。
import { ClassCatalogModel } from '../../models/classCatalog.js';
let catalogModel = new ClassCatalogModel();
Page({ /**
* 页面的初始数据
*/
data: {
catalogData: null
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
catalogModel.getCatalog((res)=>{
if(res != null || res != ''){
this.setData({
catalogData: res.result
});
console.log(this.data.catalogData);
}
})
}
})
使用 Class 类可以方便的继承类中的各个方法,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。
以聚合数据免费接口为例,通过 Class 类继承方法,让小程序实现项目化接口调用的更多相关文章
- 用聚合数据API(苏州实时公交API)快速写出小程序
利用聚合数据API快速写出小程序,过程简单. 1.申请小程序账号 2.进入开发 3.调用API.比如“苏州实时公交”小程序,选择的是苏州实时公交API. 苏州实时公交API文档:https://www ...
- 微信小程序的Web API接口设计及常见接口实现
微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,通过小程序的请求Web API 平台获取JSON数据后,可以在小程序界面上进行数据的动态展示.在数据的关键 一环中,我们 ...
- 微信小程序PHP 微信支付接口调用
小程序端 /** * 微信支付接口 */ wxPaymoney:function (out_trade_no, true_money){ //out_trade_no 后台统一下单接口需要用 var ...
- 在WePY中实现了小程序的组件化开发,组件的所有业务与功能在组件本身实现,组件与组件之间彼此隔离,上述例子在WePY的组件化开发过程中,A组件只会影响到A所绑定的myclick
wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=%e5%be%ae%e4%bf%a1%e5%b0%8f%e7 ...
- Java集合为什么设计为:实现类继承了抽象类,同时实现抽象类实现的接口
更好阅读体验:Java集合为什么设计为:实现类继承了抽象类,同时实现抽象类实现的接口 问题 Java集合源码为什么设计为:「实现类继承了抽象类,同时实现抽象类实现的接口?」 看着List 集合的UML ...
- 记录一次用宝塔部署微信小程序Node.js后端接口代码的详细过程
一直忙着写毕设,上一次写博客还是元旦,大半年过去了.... 后面会不断分享各种新项目的源码与技术.欢迎关注一起学习哈! 记录一次部署微信小程序Node.js后端接口代码的详细过程,使用宝塔来部署. 我 ...
- 微信小程序的短信接口
使用聚合数据 (网址) https://www.juhe.cn/docs? 注册部分略! 这是登录部分的. 一: 二.我的接口
- 整合微信小程序的Web API接口层的架构设计
在我前面有很多篇随笔介绍了Web API 接口层的架构设计,以及对微信公众号.企业号.小程序等模块的分类划分.例如在<C#开发微信门户及应用(43)--微信各个项目模块的定义和相互关系>介 ...
- 微信小程序---客服消息接口调用,拿来即用
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 如果对你有帮助的话麻烦点个[推荐]~最好还可以follow一下我的GitHub~感谢观看! 在 ...
随机推荐
- HTML中特殊符号编码对照表,html特殊符号编码都有哪些?
HTML中一些无法打出来的符号可以用相应的代码进行代替显示,本文提供了一些HTML特殊符号相应的代码供开发者参考. 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 ...
- from __future__ import absolute_import,division,print_function的作用
绪论: 最近看多的项目中都文件的开头都带引入了三个模块,特地去查了下其作用(注:验证需要在python2的环境下) absolute_import :绝对导入,其作用是导入模块的时候如果在当前项目目录 ...
- Linux CentOS 6.5 卸载、安装JDK1.8
卸载系统自带的jdk 1. 查询系统是否已经安装了jdk rpm -qa|grep java 2. 卸载已安装的jdk, 系统可能会自带多个jdk版本, 按需卸载 rpm -e --nodeps ja ...
- python3 邮件方式发送测试报告
以邮件方式发送测试报告 import smtplib from email.mime.text import MIMEText class SendEmail: """邮 ...
- 面向对象程序设计(JAVA) 第15周学习指导及要求
2019面向对象程序设计(Java) 第15周学习指导及要求(2019.12.6-2019.12.13) 学习目标 (1) 掌握菜单组件用途及常用API: (2) 掌握对话框组件用途及常用API: ...
- 201871010102-常龙龙《面向对象程序设计(java)》第十二周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- promise 和 setTimeout 在任务队列的执行顺序
setTimeout(() => { console.log() }); const a = new Promise((resolve,reject)=>{ console.log(); ...
- 【2019.10.7 CCF-CSP-2019模拟赛 T3】未知的数组(unknown)(并查集+动态规划)
预处理 考虑模数\(10\)是合数不好做,所以我们可以用一个常用套路: \(\prod_{i=l}^ra_i\equiv x(mod\ 10)\)的方案数等于\(\prod_{i=l}^ra_i\eq ...
- C#开发BIMFACE系列28 服务端API之获取模型数据13:获取三维视点或二维视图列表
系列目录 [已更新最新开发文章,点击查看详细] 本篇主要介绍如何获取一个模型中包含的三维视点或二维视图列表. 请求地址:GET https://api.bimface.com/data/v2/ ...
- centos--该虚拟机似乎正在使用中。 如果该虚拟机未在使用,请按“获取所有权(T)”按钮获取它的所有权。否则,请按“取消(C)”按钮以防损坏。
centos非正常关机,导致无法正常启动的问题 该虚拟机似乎正在使用中. 如果该虚拟机未在使用,请按“获取所有权(T)”按钮获取它的所有权.否则,请按“取消(C)”按钮以防损坏. 解决方案: 1. 找 ...