微信小程序API接口封装
@
今天的API的封装,我们拿WX小程序开发中,对它的API (wx.request)对这个进行一个二次封装。传统的小程序的网络请求,在我们的请求需求过多的时候,就会显得杂乱,和难维护。带着一开时难,后来维护爽的态度让我们来给他封装一下。
让我们开始
一,让我们看一下项目目录
让我们建立一个api的文件夹,来存放我们的封装逻辑,文件夹中建立三个JS文件
二,让我们熟悉一下这三个文件目的(文件名你看着办)
1,env.js文件 这个文件设置我们的公用(复用)的网络接口
// 设置公用访问url,环境地址
module.exports={
// 可以添加开发环境url ,线上环境url,测试环境url
dev:{
baseUrl: "请求地址"
}
}
2,connector.js 这个文件是二次封装的逻辑文件
// 引入公用url env
const {baseUrl}=require('./env').dev //这里用的是ES6的写法
module.exports={
// 二次封装wx.request
request:(url,method,data,state)=>{
// url: 为网络接口后面要拼接的动态路径
//method :为请求方式
//data:为要传递的参数 object类型
//state:这里我是为了添加不添加子域名用的默认给了一个true
let _url=`${baseUrl}/${state? "子域名":""}${url}` //子域名按需添加
// 我们需要通过构建promise来将接受的数据导出
return new Promise((resolve,reject)=>{
wx.request({
url:_url,
data:data,
method:method,
header:{
"content-type":"appLication/x-www-form-urlencoded"
},
//成功回调
success:(res)=>{
if(res.data.code===0){
//成功抛出
resolve(res.data)
}
},
//失败回调
fail:()=>{
//失败抛出
reject("请求失败")
}
})
})
}
}
3,api.js 我们所使用接口的业务封装
// 引入封装请求
const {request}=require('./connector')
// 基于业务封装
module.exports={
// 封装商品列表
gitGoodsList:(接收参数)=>{
return request("/shop/goods/list","get",{参数},true)
},
//项目导航数据
getNavList:()=>{
return request('/shop/goods/category/all',"post",{},true)
},
//项目轮播图数据
getSwiper:()=>{
return request('/banner/list',"get",{},true)
},
}
三,页面js中如何使用
这里我拿个index.js文件中使用举例
// nav导航栏
getNavList({传参}).then(res => {
this.setData({
nav: res.data
})
})
// 商品
gitGoodsList().then(res => {
this.setData({
goods: res.data.splice(this.data.count, this.data.page)
})
})
// 轮播图
getSwiper().then(res => {
this.setData({
swiper: res.data
})
})
根据自己的使用场景,或事件,这里我是写道了onLoad的生命函数执行的
优点:封装的好处大家都知道,代码的模块化的集中管理,便于我们去维护
欢迎留言讨论
微信小程序API接口封装的更多相关文章
- 微信小程序红包开发 小程序发红包 开发过程中遇到的坑 微信小程序红包接口的
微信小程序红包开发 小程序发红包 开发过程中遇到的坑 微信小程序红包接口的 最近公司在开发一个小程序红包系统,客户抢到红包需要提现.也就是通过小程序来给用户发红包. 小程序如何来发红包呢?于是我想 ...
- 微信小程序api拦截器
微信小程序api拦截器 完美兼容原生小程序项目 完美兼用小程序api的原本调用方式,无痛迁移 小程序api全Promise化 和axios一样的请求方式 小程序api自定义拦截调用参数和返回结果 强大 ...
- 微信小程序 API
微信小程序 API https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html demo https://de ...
- 微信小程序API交互的自定义封装
目录 1,起因 2,优化成果 3,实现思路 4,完整代码 1,起因 哪天,正在蚂蚁森林疯狂偷能量的我被boss叫过去,告知我司要做一个线上直播公开课功能的微信小程序,博主第一次写小程序,复习了下文档, ...
- 微信小程序Http高级封装 es6 promise
公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意. 于是上网查了一下,就开始着手开发..... 首先开发客户端的东西,都有个共同点,那就是 数据请求! 看了下小程序的请求方式大概和a ...
- 微信小程序支付接口之Django后台
本文链接:https://blog.csdn.net/qq_41860162/article/details/89098694Python3-django-微信小程序支付接口调用工具类生成一系列微信官 ...
- 微信小程序之----接口调用方式
最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结. 官方接口 官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实 ...
- 小程序红包开发跳坑记 微信小程序红包接口开发过程中遇到的问题 微信小程序红包开发
现在做小程序的越来越多,商家推广也是一个瓶颈,谁不发点红包,都很难找到人来用你的微信小程序了.于是不管你开发什么小程序功能,你或多或少都要用到小程序来发红包吧. 我们自己之前做公众号发红包,做了两三 ...
- 微信小程序 API 基础
其实还有一些组件,没有提,因为那些组件跟 API 的功能差不多,API 可能比他会更好一点: 具体可见官方文档 基础: 判断接口是否可用:wx.canIUse(a) a 代表:接口名字 返回值:布尔 ...
随机推荐
- 基于AM3352/AM3354/AM3358/AM3359的Linux 开发环境搭建(上)
遇到不少人新手小白问,前辈如何搭建一个优良的Linux 开发环境?之前一直都是在用win开发,现在想要尝试用Linux做开发等等一系列的问题.开源一直是给电子行业工作者提供了一种向技术更深处进发的机遇 ...
- P6378-[PA2010]Riddle【2-SAT】
正题 题目链接:https://www.luogu.com.cn/problem/P6378 题目大意 给出\(n\)个点\(m\)条边的一张无向图,图中有\(k\)种颜色的点. 要求每种颜色选择一个 ...
- Python读取ini配置文件(接口自动测试必备)
前言 大家应该接触过.ini格式的配置文件.配置文件就是把一些配置相关信息提取出去来进行单独管理,如果以后有变动只需改配置文件,无需修改代码. 特别是后续做自动化的测试,代码和数据分享,进行管理.比如 ...
- WPF进阶技巧和实战02-布局
窗体 无边框 窗体无边框(最大化及标题位置)WindowStyle="None" 窗体透明 AllowsTransparency="True",必须设置窗体无边 ...
- NOIP 模拟二 考试总结
SDOI2015 排序 今天看到这道题,没有一点思路,暴力都没的打...还是理解错题意了,操作不同位置不是说改不同的区间,而是不同操作的顺序...考场上如果知道这个的话最少暴力拿一半啊,因为正解本来就 ...
- 7.JVM调优-方法区,堆,栈调优详解
通常我们都知道在堆空间新生代Eden区满了,会触发minor GC, 在老年代满了会触发full GC, 触发full GC会导致Stop The World, 那你们知道还有一个区域满了一会触发Fu ...
- $hadow$ocks与Privoxy基础原理
$hadow$ocks与Privoxy基础原理 以下所有提到$hadow$ocks的均以ss指代 为什么要用ss呢? 在早期(如今绝大多数也是),对于互联网的访问流程是及其简单的:浏览器(或其他客户端 ...
- cadvisor+prometheus+alertmanager+grafana完成容器化监控告警(一)
一.概况 1.拓扑图 2.名词解释 Grafana 可视化监控容器运行情况 Prometheus: 开源系统监视和警报工具包 Alertmanager 一个独立的组件,负责接收并处理来自Prometh ...
- Java初步学习——2021.09.23每日报告,第三周周四
(1)今天做了什么: (2)明天准备做什么? (3)遇到的问题,如何解决? 学习数组,编写了一个随机选牌的代码.自己最开始一直想只设置一个字符串数组,利用随机数来输出,但那样对字符串赋值会比较麻烦.可 ...
- Azure Tips 第一期: Azure 中的安全监视工具,数据存储, 动态数据屏蔽以及资源部署
# 1 Azure 中的安全监视工具 微软 Azure 云提供以下监控工具,可用于观察操作和检测异常行为. Azure 安全中心 Azure 安全中心是一个统一的基础结构安全管理系统,可以增强数据中心 ...