js封装SDK 在VUE、小程序、公众号直接调用js调用后端接口(本文以vue项目为例)

本文主要是介绍js封装SDK 在VUE、小程序、公众号直接调用js调用后端接口(本文以vue项目为例),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.封装一个js文件msgSdk.js

注意:需要修改这个请求地址  apiServiceAddress

;(function () {if (window.msgSdk) {return}var msgSdk = (function () {var m_msgSdk = thisvar apiServiceAddress="http://172.12.14.5:8000"this.I_SendHTTPRequest = function (msgApiUrl, methodType,option) {let oPromise = new Promise(async function (resolve, reject) {let url=apiServiceAddress+msgApiUrl$.ajax({url: url, // 请求的URLmethod: methodType, // 请求方法,可以是GET、POST、PUT、DELETE等data: {...option}, // 发送到服务器的数据success: function(data) {// 请求成功时的回调函数resolve(data)},error: function(jqXHR, textStatus, errorThrown) {// 请求失败时的回调函数reject(errorThrown)}});})return oPromise}// 站内this.M_inStation = function (options) {let oPromise = new Promise((resolve, reject) => {this.m_ISAPIProtocol.station(options).then(() => {resolve()},oError => {reject(oError)})})return oPromise}// 小程序this.M_miniProject = function (options) {let oPromise = new Promise((resolve, reject) => {this.m_ISAPIProtocol.miniProject(options).then(() => {resolve()},oError => {reject(oError)})})return oPromise}// 公众号this.M_officialAccount = function (options) {let oPromise = new Promise((resolve, reject) => {this.m_ISAPIProtocol.officialAccount(options).then(() => {resolve()},oError => {reject(oError)})})return oPromise}// appthis.M_App = function (options) {let oPromise = new Promise((resolve, reject) => {this.m_ISAPIProtocol.App(options).then(() => {resolve()},oError => {reject(oError)})})return oPromise}// 短信this.M_textMessage = function (options) {let oPromise = new Promise((resolve, reject) => {this.m_ISAPIProtocol.textMessage(options).then(() => {resolve()},oError => {reject(oError)})})return oPromise}// 企业微信this.M_weCom = function (options) {let oPromise = new Promise((resolve, reject) => {this.m_ISAPIProtocol.weCom(options).then(() => {resolve()},oError => {reject(oError)})})return oPromise}var ISAPIProtocol = function () {}// 站内消息ISAPIProtocol.prototype.station = function (options) {return m_msgSdk.I_SendHTTPRequest("/ISAPI/Security/userCheck?format=json","get",options )}// 小程序ISAPIProtocol.prototype.miniProject = function (options) {return m_msgSdk.I_SendHTTPRequest("/ISAPI/Security/userCheck?format=json","get",options )}// 公众号ISAPIProtocol.prototype.officialAccount = function (options) {return m_msgSdk.I_SendHTTPRequest("/ISAPI/Security/userCheck?format=json","get",options )}// appISAPIProtocol.prototype.App = function (options) {return m_msgSdk.I_SendHTTPRequest("/ISAPI/Security/userCheck?format=json","get",options )}// 短信ISAPIProtocol.prototype.textMessage = function (options) {return m_msgSdk.I_SendHTTPRequest("/ISAPI/Security/userCheck?format=json","get",options )}// 企业微信ISAPIProtocol.prototype.weCom = function (options) {return m_msgSdk.I_SendHTTPRequest("/ISAPI/Security/weCom?weCom","get",options )}m_ISAPIProtocol = new ISAPIProtocol()return this})()var NS = (window.msgSdk = msgSdk)NS.version = '1.0.0'
})(this)
if ('object' === typeof exports && typeof module !== 'undefined') {
} else if ('function' === typeof define && define.amd) {define(function () {return msgSdk})
} else if ('function' === typeof define && define.cmd) {define(function (require, exports, module) {module.exports = msgSdk})
} else {
}

2.在index.html中引入msgSdk.js文件jquery文件

<script src="./static/js/jquery-1.7.1.min.js"></script>
<script src="./static/js/msgSdk.js"></script>

3.在页面中调用

 mounted() {let oDeviceInfo = {IP: "http://666",Port: "8000",Auth: "95484",}msgSdk.M_weCom(oDeviceInfo).then((data) => {console.log(data,"data");},(error) => {console.log(error,"error");});}

这篇关于js封装SDK 在VUE、小程序、公众号直接调用js调用后端接口(本文以vue项目为例)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/828502

相关文章

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Spring Boot项目部署命令java -jar的各种参数及作用详解

《SpringBoot项目部署命令java-jar的各种参数及作用详解》:本文主要介绍SpringBoot项目部署命令java-jar的各种参数及作用的相关资料,包括设置内存大小、垃圾回收... 目录前言一、基础命令结构二、常见的 Java 命令参数1. 设置内存大小2. 配置垃圾回收器3. 配置线程栈大小

SpringBoot实现微信小程序支付功能

《SpringBoot实现微信小程序支付功能》小程序支付功能已成为众多应用的核心需求之一,本文主要介绍了SpringBoot实现微信小程序支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录一、引言二、准备工作(一)微信支付商户平台配置(二)Spring Boot项目搭建(三)配置文件

鸿蒙中Axios数据请求的封装和配置方法

《鸿蒙中Axios数据请求的封装和配置方法》:本文主要介绍鸿蒙中Axios数据请求的封装和配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1.配置权限 应用级权限和系统级权限2.配置网络请求的代码3.下载在Entry中 下载AxIOS4.封装Htt

Spring Boot项目中结合MyBatis实现MySQL的自动主从切换功能

《SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能》:本文主要介绍SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能,本文分步骤给大家介绍的... 目录原理解析1. mysql主从复制(Master-Slave Replication)2. 读写分离3.

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo

Java调用C++动态库超详细步骤讲解(附源码)

《Java调用C++动态库超详细步骤讲解(附源码)》C语言因其高效和接近硬件的特性,时常会被用在性能要求较高或者需要直接操作硬件的场合,:本文主要介绍Java调用C++动态库的相关资料,文中通过代... 目录一、直接调用C++库第一步:动态库生成(vs2017+qt5.12.10)第二步:Java调用C++