封装微信小程序http拦截器过程解析

2024-07-28 13:23:11

前言

微信小程序是数据驱动的应用，开发技术和vue、react和angular等mv*技术类似。在vue下可以用vue-resource、axios等模块进行http请求，但是在微信小程序上，http请求只支持wx.request(OBJECT)，所以我们需要对wx.request进行封装，实现http拦截器的功能。

第一步：创建一个request.js文件

第二步：确定http、upload和websocket前缀

第三步：封装wx.request

在请求发出前处理http地址、请求头和参数、在响应后解析返回值并做基本的逻辑判断，重点是使用Promise对象。

第四步：导出模块

第五步：使用request

const Request = require("/utils/request");//导入模块
Request.post("/api/xcxWxLogin", { //调用方法
     code: res.code,
     encryptedData: resp.encryptedData,
     iv: resp.iv,
     shareId: share.shareId || "",
     salesmanId: share.salesmanId || "",
     source: share.source || ""
}).then(res => { //成功回调
  //todo
}).catch(err => {}); //异常回调

第六步：拦截器完整代码

const apiHttp = "https://*****.com";
const socketHttp = "wss://*****.com/wss";
function fun(url, method, data, header) {
data = data || {};
header = header || {};
let sessionId = wx.getStorageSync("UserSessionId");
if (sessionId) {
if (!header || !header["SESSIONID"]) {
 header["SESSIONID"] = sessionId;
}
}
wx.showNavigationBarLoading();
let promise = new Promise(function(resolve, reject) {
wx.request({
 url: apiHttp + url,
 header: header,
 data: data,
 method: method,
 success: function(res) {
  if (typeof res.data === "object") {
   if (res.data.status) {
    if (res.data.status === -200) {
     wx.showToast({
      title: "为确保能向您提供最准确的服务，请退出应用重新授权",
      icon: "none"
     });
     reject("请重新登录");
    } else if (res.data.status === -201) {
     wx.showToast({

      title: res.data.msg,
      icon: "none"
     });
     setTimeout(function() {
      wx.navigateTo({
       url: "/pages/user/supplement/supplement"
      });
     }, 1000);
     reject(res.data.msg);
    }
   }
  }
  resolve(res);
 },
 fail: reject,
 complete: function() {
  wx.hideNavigationBarLoading();
 }
});

});
return promise;
}
function upload(url, name, filePath) {
let header = {};
let sessionId = wx.getStorageSync("UserSessionId"); //从缓存中拿该信息
if (sessionId) {
if (!header || !header["SESSIONID"]) {
 header["SESSIONID"] = sessionId; //添加到请求头中
}
}
wx.showNavigationBarLoading();
let promise = new Promise(function(resolve, reject) {
wx.uploadFile({
 url: apiHttp + url,
 filePath: filePath,
 name: name,
 header: header,
 success: function(res) {
  resolve(res);
 },
 fail: reject,
 complete: function() {
  wx.hideNavigationBarLoading();
 }
});
});
return promise;
}
module.exports = {
apiHttp: apiHttp,
socketHttp: socketHttp,
"get": function(url, data, header) {
return fun(url, "GET", data, header);
},
"post": function(url, data, header) {
return fun(url, "POST", data, header);
},
upload: function(url, name, filePath) {
return upload(url, name, filePath);
}
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序之页面拦截器的示例代码

场景小程序有52个页面,其中13个页面无需任何身份,另外39个页面需要系统角色.对于这39个页面,如果微信用户没有系统角色,则跳转到登录页. 是否有系统角色信息需要通过异步请求来获取. 需求分析&实现对需求进行抽象,其实要的就是一个过滤器,对小程序页面的访问进行过滤,符合条件的通过,不符合条件进行其他处理. 使用过php的laravel框架的童鞋,肯定一下子就联想到了laravel框架的http中间件: HTTP 中间件提供一个方便的机制来过滤进入应用程序的 HTTP 请求,例如,Larav
微信小程序后台https域名绑定和免费的https证书申请详解

微信小程序后台https域名绑定和免费的https证书申请详解微信小程序在11月3号发布了,这是一个全新的生态,没有赶上微信公众号红利的开发者,运营者可别错过这趟车了. 但是微信的后台需要全https,之前我还不相信,后台注册了后进后台才发现,服务器配置如下图从后台的服务器配置可以看出 (1)微信小程序后台只支持https,如果公司后台还没支持https的,赶紧要升级了 (2)API请求,文件上传,socket 文件上传和下载,必须是在后台配置的,否则微信不允许你下载另外,h
微信小程序实现自定义modal弹窗封装的方法

前言小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关闭 modal. 如何使用将下面的 modal.wxml .modal.wxss .modal.js .modal.json 四个文件复制到对应位置即可. 封装完之后调用起来也很简单,看看调用的代码吧 <modal show="{{showMo
微信小程序设置http请求的步骤详解

http请求介绍 HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则.计算机专家设计出HTTP,使HTTP客户(如Web浏览器)能够从HTTP服务器(Web服务器)请求信息和服务,HTTP目前协议的版本是1.1.HTTP是一种无状态的协议,无状态是指Web浏览器和Web服务器之间不需要建立持久的连接,这意味着当一个客户端向服务器端发出请求,然后Web服务器返回响应(response),连接就被关闭了,在服务器端不保留连接的有关信息.HTTP遵循请
微信小程序自定义组件封装及父子间组件传值的方法

首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名官网地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml <view hidden="{{response.length < 1}}"> <view class
微信小程序免费SSL证书https、TLS版本问题的解决办法

微信小程序免费SSL证书https.TLS版本问题的解决办法微信小程序与第三方服务器通讯的域名5个必要条件 1.一个已备案的域名,不是localhost.也不是127.0.0.1,域名不能加端口 2.加ssl证书,也就是https://~~~ 4.HTTPS 服务器的 TLS 版本支持1.2及以下版本,一般就是1.0.1.1.1.2要同时支持这三个版本,一个也不能少,要不然就会出现下面这种情况 5.微信小程序后台加上合法域名设置(一个月内改的次数是有限的,且行且珍惜)如下图以上5个条件,必
windows上利用charles抓取微信小程序数据包,手机APP数据包(HTTP与HTTPS数据包)

1.下载charles包.安装 Charles Proxy抓包工具 v4.1 破解文件 win64 附破解方法 2.关闭电脑防火墙打开控制面板,选择Windows防火墙,关了(不关很可能没法抓包,在这栽过坑) 2.连接手机 2.1 用数据线把手机连上电脑 2.2 查电脑ip,命令行输入 ipconfig 2.3 修改手机网络代理手机网络改为代理,ip为电脑ip,端口8888(charles默认端口,若被其他程序占用可修改,原则是保持电脑和手机一致) 3.安装SSL证书 (大多数app或小程序
微信小程序封装的HTTP请求示例【附升级版】

本文实例讲述了微信小程序封装的HTTP请求.分享给大家供大家参考,具体如下: 微信小程序里自己封装了请求的函数,但几乎每个页面都要用到,所以为什么更方便的调用,再一次进行封装. 在app.js里面定义个全局对象,这样想要用到该函数,只需要在该页面的js文件里面,请求一个app实例. 废话不多说,先上代码: //全局对象httpClient httpClient:{ request:function(method,url,data){ //返回一个promise实例 return new Prom
封装微信小程序http拦截器过程解析

前言微信小程序是数据驱动的应用,开发技术和vue.react和angular等mv*技术类似.在vue下可以用vue-resource.axios等模块进行http请求,但是在微信小程序上,http请求只支持wx.request(OBJECT),所以我们需要对wx.request进行封装,实现http拦截器的功能. 第一步:创建一个request.js文件第二步:确定http.upload和websocket前缀第三步:封装wx.request 在请求发出前处理http地址.请求头和参数.
微信小程序网络请求实现过程解析

这篇文章主要介绍了微信小程序网络请求实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下配置服务器域名: 每个微信小程序需要事先设置一个通讯域名,小程序只可以跟指定的域名进行网络通信. 服务器域名在:小程序后台=> 开发=> 开发设置 => 服务器域名中配置,配置时需注意: 1.域名只支持https(request, uploadFile,downloadFile)和wss(connectSocket)协议. 2.域名不能使用i
微信小程序的授权实现过程解析

自从小程序文档更新后,自动授权已不存在啦目前的授权都是通过button来实现的,具体知识点可参考小程序的官方文档,以下是我做的一个小demo(进入首页,跳出一个登录弹出框,弹出框是自己写的一个UI组件),废话不多说,直接上代码 UI组件部分(modal) modal.wxml <view class='modal-mask' wx:if='{{show}}' bindtap='clickMask'> <view class='modal-content'> <scroll-
微信小程序自定义弹窗实现过程(附代码)

这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序官网里弹出框一般都是类似下面形式: 而有时候我们需要更丰富的弹窗时,就可用自定义弹窗的样式: 举个例子,像下面图的样式,点击后会弹出不一样的窗口: 代码如下: index.wxml 文件  <view class="click" bindtap="click&qu
详解微信小程序动画Animation执行过程

前言因官方文档描述不清晰,本文主要介绍微信小程序动画实现过程 / 实现方式. 实现过程推荐你对照官方文档来看本文章,这样更有利于理解. 简单来说,整个动画实现过程就三步: 创建一个动画实例 animation. 调用实例的方法来描述动画. 最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性. 前两步是定义一个动画并设置都要干什么,然后把这个设置好的 "规则" 扔给界面上的某个元素,让它按照这个规则执行. 当然如果有多个元素的 animat
微信小程序实现视频播放器发送弹幕

本文实例为大家分享了微信小程序实现视频播放器发送弹幕的具体代码,供大家参考,具体内容如下一.视频播放器 video-detail 视频播放器 select-color 发送弹幕 1. 页面制作 2. 选择弹幕颜色 3. Video插件的使用 4. 相关代码 app.json //app.json { "pages":[ "pages/video-detail/video-detail", "pages/select-color/select-color&
微信小程序使用视频播放器video组件

本文实例为大家分享了微信小程序使用视频播放器video组件的具体代码,供大家参考,具体内容如下在app.json中配置好页面路由和权限. 1.app.json { "pages":[ "pages/video/video" ], "permission": { "scope.writePhotosAlbum": { "desc": "读取相册" } } } 使用video组件 2.vi
微信小程序使用map组件实现解析经纬度功能示例

本文实例讲述了微信小程序使用map组件实现解析经纬度功能.分享给大家供大家参考,具体如下: 声明 bug: 页脚的详细地址在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中. 感谢: 感谢Lrj_estranged指出问题! 效果图实现原理 1. map组件实现定位标记或者指定定位标记,并保存location. 2. 采用高德地图微信小程序开发API(
微信小程序wxml列表渲染原理解析

这篇文章主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下列表渲染存在的意义以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. <view> <block wx:for="{{products}}" wx:for-item="item" wx:key="index"> <view>{{
微信小程序调用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

封装微信小程序http拦截器过程解析

相关推荐

随机推荐