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

相关文章

Deepseek R1模型本地化部署+API接口调用详细教程(释放AI生产力)

《DeepseekR1模型本地化部署+API接口调用详细教程(释放AI生产力)》本文介绍了本地部署DeepSeekR1模型和通过API调用将其集成到VSCode中的过程,作者详细步骤展示了如何下载和... 目录前言一、deepseek R1模型与chatGPT o1系列模型对比二、本地部署步骤1.安装oll

在不同系统间迁移Python程序的方法与教程

《在不同系统间迁移Python程序的方法与教程》本文介绍了几种将Windows上编写的Python程序迁移到Linux服务器上的方法,包括使用虚拟环境和依赖冻结、容器化技术(如Docker)、使用An... 目录使用虚拟环境和依赖冻结1. 创建虚拟环境2. 冻结依赖使用容器化技术(如 docker)1. 创

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点:

MyBatis-Flex BaseMapper的接口基本用法小结

《MyBatis-FlexBaseMapper的接口基本用法小结》本文主要介绍了MyBatis-FlexBaseMapper的接口基本用法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具... 目录MyBATis-Flex简单介绍特性基础方法INSERT① insert② insertSelec

Spring排序机制之接口与注解的使用方法

《Spring排序机制之接口与注解的使用方法》本文介绍了Spring中多种排序机制,包括Ordered接口、PriorityOrdered接口、@Order注解和@Priority注解,提供了详细示例... 目录一、Spring 排序的需求场景二、Spring 中的排序机制1、Ordered 接口2、Pri

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

一分钟带你上手Python调用DeepSeek的API

《一分钟带你上手Python调用DeepSeek的API》最近DeepSeek非常火,作为一枚对前言技术非常关注的程序员来说,自然都想对接DeepSeek的API来体验一把,下面小编就来为大家介绍一下... 目录前言免费体验API-Key申请首次调用API基本概念最小单元推理模型智能体自定义界面总结前言最

Idea实现接口的方法上无法添加@Override注解的解决方案

《Idea实现接口的方法上无法添加@Override注解的解决方案》文章介绍了在IDEA中实现接口方法时无法添加@Override注解的问题及其解决方法,主要步骤包括更改项目结构中的Languagel... 目录Idea实现接China编程口的方法上无法添加@javascriptOverride注解错误原因解决方

配置springboot项目动静分离打包分离lib方式

《配置springboot项目动静分离打包分离lib方式》本文介绍了如何将SpringBoot工程中的静态资源和配置文件分离出来,以减少jar包大小,方便修改配置文件,通过在jar包同级目录创建co... 目录前言1、分离配置文件原理2、pom文件配置3、使用package命令打包4、总结前言默认情况下,

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加