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

相关文章

uniapp接入微信小程序原生代码配置方案(优化版)

uniapp项目需要把微信小程序原生语法的功能代码嵌套过来,无需把原生代码转换为uniapp,可以配置拷贝的方式集成过来 1、拷贝代码包到src目录 2、vue.config.js中配置原生代码包直接拷贝到编译目录中 3、pages.json中配置分包目录,原生入口组件的路径 4、manifest.json中配置分包,使用原生组件 5、需要把原生代码包里的页面修改成组件的方

用Microsoft.Extensions.Hosting 管理WPF项目.

首先引入必要的包: <ItemGroup><PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" /><PackageReference Include="Microsoft.Extensions.Hosting" Version="8.0.0" /><PackageReference Include="Serilog

Java面试八股之怎么通过Java程序判断JVM是32位还是64位

怎么通过Java程序判断JVM是32位还是64位 可以通过Java程序内部检查系统属性来判断当前运行的JVM是32位还是64位。以下是一个简单的方法: public class JvmBitCheck {public static void main(String[] args) {String arch = System.getProperty("os.arch");String dataM

eclipse运行springboot项目,找不到主类

解决办法尝试了很多种,下载sts压缩包行不通。最后解决办法如图: help--->Eclipse Marketplace--->Popular--->找到Spring Tools 3---->Installed。

公共筛选组件(二次封装antd)支持代码提示

如果项目是基于antd组件库为基础搭建,可使用此公共筛选组件 使用到的库 npm i antdnpm i lodash-esnpm i @types/lodash-es -D /components/CommonSearch index.tsx import React from 'react';import { Button, Card, Form } from 'antd'

vue, 左右布局宽,可拖动改变

1:建立一个draggableMixin.js  混入的方式使用 2:代码如下draggableMixin.js  export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档:https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址:https://github.com/Hufe921/canvas-editor 前提声明: 由于CanvasEditor目前不支持vue、react 等框架开箱即用版,所以需要我们去Git下载源码,拿到其中两个主

React+TS前台项目实战(十七)-- 全局常用组件Dropdown封装

文章目录 前言Dropdown组件1. 功能分析2. 代码+详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲全局Dropdown组件封装,可根据UI设计师要求自定义修改。 Dropdown组件 1. 功能分析 (1)通过position属性,可以控制下拉选项的位置 (2)通过传入width属性, 可以自定义下拉选项的宽度 (3)通过传入classN

js+css二级导航

效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con

基于Springboot + vue 的抗疫物质管理系统的设计与实现

目录 📚 前言 📑摘要 📑系统流程 📚 系统架构设计 📚 数据库设计 📚 系统功能的具体实现    💬 系统登录注册 系统登录 登录界面   用户添加  💬 抗疫列表展示模块     区域信息管理 添加物资详情 抗疫物资列表展示 抗疫物资申请 抗疫物资审核 ✒️ 源码实现 💖 源码获取 😁 联系方式 📚 前言 📑博客主页: