小程序账号设置以及request请求的封装

一般开发在小程序时,都会有测试版和正式版,这样在开发时会比较方便。

在开发时。产品经理都会给到测试账号和正式账号,后端给的接口也都会有测试环境用到的接口和正式环境用到的接口。

这里讲一讲我这边如何去做的。

1.在更目录随便命名一个以.js结尾的文件,

2.写入自己环境的选择

这里先用const命名常量,其中ENV_TEST为测试环境,ENV_PRODUCT为正式环境,然后用ENV去设置测试环境还是正式环境,用测试环境,就把const ENV = ENV_PRODUCT注释掉,反之把测试环境注释掉。这里的appid是在小程序中申请账号时得到的。在微信开发者工具修改的话可以在右上角详情里面的appid那里点击修改。

然后我们看ApiBaseUrl,下面那个ApiBaseUrl1不看。你会发现有个if判断,这个判断主要是判断是正式环境还是测试环境,正式环境的话,我们就可以写上协议(https)和域名(类似与192.168.10.107),可以看到我这边测试环境用到的是"https://devapi/"开头,正式环境是"https://api/"开头,后面的端口都是不一样的,所以不写在里面。

最后可以用module.exports将数据暴露出来。(不调用是无法获取到数据的)所以要先引用再获取数据。

下面为request请求封装展示例子:

import md5 from 'blueimp-md5'//请求用MD5加密
import {userCache
} from "../../utils/storage/user.js"
const config = require("../../config.js")
const env = config.ENV
const apiBaseUrl = config.ApiBaseUrl
const salt = config.SignatureSaltclass Api {constructor() {// 从缓存中获取tokenconst appUserInfo = userCache.getAppUserInfo()if (appUserInfo !== null && appUserInfo.hasOwnProperty('token')) {this.token = appUserInfo.token} else {this.token = null}}request({url, // 请求url地址data, // 请求数据method = "GET", // 请求方式header = {}, // 请求头timeout = 10000, // 请求超时时间 默认2000毫秒dataType = "json", // 返回数据格式responseType = "text", // 响应的数据类型}) {// 设置签名const timestamp = Math.round(new Date().getTime() / 1000).toString()const randomStr = Math.random().toFixed(10).slice(-10)const signature = md5(randomStr.toString() + timestamp.toString() + salt)let baseHeaders = {"content-type": "application/json","CLIENT": "wx-xcx-v1.0.0","TIMESTAMP": timestamp,"RANDOMSTR":randomStr,"SIGNATURE": signature,}let headers = Object.assign(baseHeaders, header)//Object.assign合并对象方法// 判断登录状态if (loginStatus) {headers = Object.assign(headers, {"Authorization": "jwt " + this.token})}wx.request({url: apiBaseUrl + url,data: data,header: headers,timeout: timeout,method: method,dataType: dataType,responseType: responseType,success: function (res) {const code = res.statusCodeconst data = res.dataif (code === 200) {wx.showToast({title: detail,icon: 'none',})return false}// 判断data是否是对象if (data.constructor !== Object && code === 404) {wx.showToast({title: "接口地址错误",icon: 'none',})return false}},fail: function (res) {// 处理特殊fail的方法if (fail) {fail(res);return;}const errMsg = res.errMsgif (errMsg.indexOf("timeout") !== -1) {wx.showToast({title: "超时啦,请稍后再试。",icon: 'none',})} else if (errMsg.indexOf("fail") !== -1) {wx.showToast({title: "失败啦,请稍后再试。",icon: 'none',})} else {wx.showToast({title: res.errMsg,icon: 'none',})}},complete: function (res) {wx.hideNavigationBarLoading()if (complete) {complete(res)}}})}post(obj) {// 判断是对象if (Object.prototype.toString.call(obj) !== '[object Object]') {throw new Error('obj必须是对象。')}this.request(Object.assign(obj, {method: "POST"}))}get(obj) {console.log(obj);// 判断是对象if (Object.prototype.toString.call(obj) !== '[object Object]') {throw new Error('obj必须是对象。')}this.request(Object.assign(obj, {method: "GET"}))}setToken(token) {this.token = token}getToken() {return this.token}removeToken() {this.token = null}
}let api = new Api()class ApiSync {}module.exports = {api: api
}

上面代码中看到有一个class类

ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。

生成类的实例的写法,与 ES5 完全一样,也是使用new命令。前面说过,如果忘记加上new,像函数那样调用Class,将会报错。

可以看到里面写了request()里面存放着url,data,等wx.request()用到的信息。下面写的是发送请求时携带的签名,主要起到加密作用,防止数据泄露。下面就正式写了一个wx.request()来请求数据,这个不多说什么。

那它到底怎样实现请求数据的,下面我写了一个post和get方法,然后将整个class类放到了api变量里面,然后用用module.exports = {api:api}将它暴露出来,这样在page页面中你要请求数据时要先引入这个封装好的js文件。这里我是将它封装在utils里面的request中的api.js中,这些都是自己创建的并不是小程序自带的。如图:

在page(这里的page页面指的是开发时创建的页面)页面中先要引入api.js,如上面所示,然后要请求数据的话方法如下图(这是post请求,get请求将post改成get即可,其它不变)。可能有人会疑惑为什么这样写,下面讲一下逻辑。

这里用api.post()或者是api.get()请求都会到api.js中去执行之前封装的post或者get方法,这样就相当于把这里面api.post()中对象的数据传到api.js中的post方法里面。

上面那个if判断可以不看,看下面的this.request(),这里是将之前的那个request里面的数据和这里的请求方式合并。在上面那个request里面可以看到里面的method写的是GET,但是因为我们用到了Object.assign这个对象合并方法,所以它将之前那个method的数据覆盖了,这就要取了解Object.assign使用方法,这里简单说明一下,当合并多个对象时,对象中出现重复的名称,后面的会覆盖前面的数据。

然后request里面的数据就是要用到的数据,将其直接放到wx.request()里,再用wx.request()去请求数据成功后就可以获取到想要数据了,可以用console.log(obj)打印数据查看。所以本质上还是要用到wx.request()这个发请求,那为什么要绕这么大一个湾呢?

主要还是节省代码量,方便管理。可以将所有要用到的接口写在一个js文件里面,然后暴露,要用到的时候引入调用即可,就像这样。

这里面就不需要写https什么的,因为之前在cofig.js中已经写好了,在api.js中会看到有引入cofig.js,其中的apiBaseUrl就是

然后在wx.request()中有url:apiBaseUrl + url,这里就是整个接口了,示例:https://www.baidu.com/s/gdgd/gdgd,https://www.baidu.com/就是apiBaseUrl,s/gdgd/gdgd就是要封装起来的接口,这种接口肯定不止一个,封装在一起就好管理,也方便找。这里有个查找的小技巧,按键盘的Ctrl建,鼠标放在要查找的接口上会发现变成蓝色并有下划线,点击就会跳转到其具体位置。页面中的wxml中的写的点击事件也可以这样快速查找到具体位置。或者直接复制用Ctrl+f键进行查找。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/6296.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一机游领航旅游智慧化浪潮:借助前沿智能设备,革新旅游服务效率,构建高效便捷、生态友好的旅游服务新纪元,开启智慧旅游新时代

目录 一、引言 二、一机游的定义与特点 (一)一机游的定义 (二)一机游的特点 三、智能设备在旅游服务中的应用 (一)旅游前的信息查询与预订支付 (二)旅游中的导航导览与互动体…

MATLAB中功率谱密度计算pwelch函数使用详解

MATLAB中功率谱密度计算pwelch函数使用详解 目录 前言 一、pwelch函数简介 二、pwelch函数参数说明 三、pxx pwelch(x)示例 四、[pxx,f]pwelch(x,window,noverlap,nfft,fs)示例 四、[pxx,f] pwelch(x,window,noverlap,nfft,fs,freqrange,spectrumtype)示例 五、多通道功…

Springboot(SSM)项目实现数据脱敏

目录 一、引入hutool的依赖 二、sql脚本 三、自定义注解代码 3.1 自定义注解 3.2 自定义一个枚举,用于定义脱敏的类型 3.3 序列化 四、使用脱敏注解 4.1 Person.java 4.2 controller 4.3 dao 五、源代码参考 一、引入hutool的依赖 <dependency><groupId>…

Linux下Zip命令无法压缩软链接指向的实际文件的解决方案

Linux下Zip命令无法压缩软链接指向的实际文件的解决方案 一、前言 最近在作横向课题&#xff0c;在进行RKNN1808的目标检测C推理环境部署时&#xff0c;遇到了视频和图像的处理问题。出现这些问题&#xff0c;最好是找谁呢&#xff1f;找OpenCV。 但是本身开发板是个空架子&a…

FIFO Generate IP核使用——Native读写接口信号详解

Native FIFO接口信号是用于FIFO IP核与外部电路进行通信的信号。当FIFO支持独立的写和读时钟时&#xff0c;这些信号可以包括标准端口和可选端口。 1 当FIFO具有独立时钟时的接口信号 当FIFO具有独立的时钟时&#xff0c;其接口信号会相应地有所变化。特别是关于复位信号rst…

计算机等级考试2级(Python)知识点整理

计算机等级考试2级&#xff08;Python&#xff09;知识点整理 1.基础知识点&#xff08;记忆、理解&#xff09; 第1讲Python概述 01. 源代码 02. 目标代码 03. 编译和解释 04. 程序的基本编写方法 第2讲 Python语言基础&#xff08;一&#xff09; 01. 用缩进表示代码…

[数据结构]——非比较排序—计数排序

该篇文章 所涉及代码收录仓库&#xff1a;登录 - Gitee.com 目录 1.非比较排序——计数排序 2.最终实现 1.解析 2.以int a[] { 1,3,9,1,5,1,2,3,-5,-5,-2 };为例&#xff0c;手撕分析 3.代码实现 4.计数排序具有以下主要特性&#xff1a; 1.非比较排序——计数排序 思想…

Linux IP Forwarding路由转发实验

linux 路由转发功能 Linux 操作系统具备路由转发功能&#xff0c;路由功能是指 Linux 操作系统提供的路由管理和转发功能&#xff0c;它允许 Linux 主机在网络中正确地转发数据包&#xff0c;并确保数据包能够达到其目的地。 出于安全考虑&#xff0c;Linux系统默认是禁止数据…

ICode国际青少年编程竞赛- Python-1级训练场-for循环入门

ICode国际青少年编程竞赛- Python-1级训练场-for循环入门 1、 for i in range(4):Dev.step(4)Dev.turnLeft()2、 for i in range(3):Dev.step(6)Dev.turnRight()3、 for i in range(3):Dev.turnRight()Dev.step(2)Dev.turnLeft()Dev.step(-3)4、 for i in range(4):Dev…

附录E:董事会

< 回到目录 附录E&#xff1a;董事会 当董事会和CEO配合默契时&#xff0c;董事会成员扮演着CEO副手的角色。董事会还对CEO进行监督&#xff0c;如果CEO出现失职的情况&#xff0c;董事会将解雇他&#xff0c;并另请高明。这是董事会的职责所在。很遗憾&#xff0c;大多数董…

谷神前端组件增强:二级列表

createGuthonOptBtnsElement /** * 根据提供的row、options为子列表创建并返回谷神操作按钮元素。 * * param {object} row - agGrid单元格渲染函数参数。* param {array} options - 谷神操作按钮配置项数组。* returns {Element} - 返回创建的DOM元素。 */ function cr…

数字旅游以科技创新为核心竞争力:推动旅游服务的智能化、高效化,满足游客日益增长的旅游需求

一、引言 随着科技的飞速发展&#xff0c;数字旅游作为旅游业与信息技术结合的产物&#xff0c;正以其独特的魅力改变着传统旅游业的格局。科技创新作为数字旅游的核心竞争力&#xff0c;不仅推动了旅游服务的智能化、高效化&#xff0c;更满足了游客日益增长的旅游需求。本文…

香港理工大学内地事务总监陆海天教授确认出席“边缘智能2024 - AI开发者峰会”并发表主题演讲

隨著AI技術的日新月異&#xff0c;我們正步入一個邊緣計算智能化與分布式AI相互融合的新紀元。這一變革不僅推動了分布式智能創新應用的飛速發展&#xff0c;還使得邊緣智能——這一結合邊緣計算和智能技術的新興領域&#xff0c;逐漸成為引領AI發展的重要力量。通過其分布式和…

clang:在 Win10 上编译 MIDI 音乐程序(二)

先从 Microsoft C Build Tools - Visual Studio 下载 1.73GB 安装 "Microsoft C Build Tools“ 访问 Swift.org - Download Swift 找到 Windows 10&#xff1a;x86_64 下载 swift-5.10-RELEASE-windows10.exe 大约490MB 建议安装在 D:\Swift\ &#xff0c;安装后大约占…

llmperf测试大模型API性能

llmperf测试大模型API性能 llmperf是一个用来评估LLM API性能的工具。 官方仓库地址&#xff1a;https://github.com/ray-project/llmperf 1. 安装准备 脚本依赖python3环境&#xff0c;测试前客户端安装python3&#xff0c;本文使用python版本为3.8。 # 创建一个python虚拟环境…

走进香港美食宛如走进香港电影

&#xff08;1&#xff09; 过去蔡澜有个节目&#xff0c;专门介绍香港美食&#xff0c;身边美女相伴、眼里美景相随。 过去离香港海关近&#xff0c;有时候散步都能走到那里&#xff0c;打车时车都不蹦字儿。那时候精神头儿真好&#xff0c;周六一早6点就起来拖着大箱子过关&a…

React 第十八章 Hook useImperativeHandle

React 的 useImperativeHandle 是一个自定义 Hook。该 Hook 一般配合 React.forwardRef 使用&#xff0c;主要用于在父组件中可以使用 ref 获取子组件暴露出来的属性和方法。 useImperativeHandle 接受两个参数&#xff1a;ref 和创建子组件属性和方法的函数。 function Chil…

人机协同中的分布式中心化态势感知

一、集中式和分布式 集中式和分布式是两种不同的系统结构和管理方式。集中式系统是指所有计算机资源和数据都集中在一个中心服务器或主机上&#xff0c;所有的计算和数据处理都由该中心服务器来完成。而分布式系统是指计算机资源和数据分布在不同的计算机节点上&#xff0c;通…

软件测试(实验五)——Jmeter的使用

目录 实验目的 一、使用JMeter演示取样器、监听器、配置元件、断言的使用&#xff1b; 1、取样器 2、监听器 3、配置元件的使用 ① 用户定义的变量 ②HTTP信息头管理器 ③HTTP请求默认值 ④CSV数据文件设置 4、断言 ①响应断言 ②JSON断言 ③断言持续时间 二、使用…

「 网络安全常用术语解读 」SBOM主流格式SWID详解

国际标准化组织&#xff08;ISO&#xff09;和国际电工委员会&#xff08;International Electrotechnical Commission&#xff0c;IEC&#xff09;发布了ISO/IEC 19770-2软件标识&#xff08;Software Identification&#xff0c;SWID&#xff09;标签标准&#xff0c;该标准定…