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 = this
    var 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, // 请求的URL
            method: 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
    }
    // app
    this.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 )
    }
    // app
    ISAPIProtocol.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.在页面中调用文章来源地址https://www.toymoban.com/news/detail-859661.html

 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项目为例)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 微信小程序调用springboot后端接口

    微信小程序调用springboot后端接口

    1 后端配置SSL证书。在nginx中配置方便   2 后端api路径一定要加到配置了SSL的server块儿内 3 微信公众平台内配置后端HTTPS接口地址。可以不加端口号。配的没加443,调用就不加443.配的加了调用就必须加。服务器域名请在 「小程序后台 - 开发 - 开发设置 - 服务器域名」 中进行配

    2024年02月11日
    浏览(9)
  • 微信公众号菜单如何直接跳到微信小程序

    微信公众号菜单如何直接跳到微信小程序

    微信公众号菜单点击以后直接跳到微信小程序 1 微信公众平台 百度搜索微信公众平台,微信扫码,选择自己的公众号。 微信公众平台 2 自定义菜单 3 选择跳转到小程序  4 点击 小程序-小程序管理       5  自定义菜单选择关联的小程序 关联的小程序       6 发布图文,得到

    2024年02月11日
    浏览(12)
  • 微信HOOK已封装,小程序授权、公众号授权、小程序取code、公众号取code

    微信HOOK已封装,小程序授权、公众号授权、小程序取code、公众号取code

    微信HOOK已封装 微信小程序取code 微信小程序取ck 微信公众号授权取ck 微信公众号扫码授权  微信获取通讯录 微信多开   本接口可以封装远程微信扫码登录,批量获取小程序、公众号授权信息。方便批量下单,批量查询等操作。做到无人值守,自动回传等 本接口仅为学习研究

    2024年02月16日
    浏览(7)
  • vue3引入JS-SDK实现h5分享小卡片、跳转微信小程序功能

    vue3引入JS-SDK实现h5分享小卡片、跳转微信小程序功能

    微信js-sdk官方文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 想要实现的效果: 1.登录微信公众平台,进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 2.通过npm引入js-sdk 安装成功后,可以在package.json中找到\\\"weixin-js-sdk\\\" 3.在main.js中,将js-sdk挂载

    2024年02月11日
    浏览(39)
  • 微信公众号 H5 JS-SDK wx.config 报错 invalid url domain 及 invalid signature 错误原因及解决方式

    微信公众号 H5 JS-SDK wx.config 报错 invalid url domain 及 invalid signature 错误原因及解决方式

    在项目进行JSSDK使用的过程中,出现了很多问题,其中报错invalid url domain 以及 invalid signature最多,也最头疼,部分坑在文档里也并没有写清楚,这里就简单说下这两个报错的原因和解决方式 当报错invalid url domain时 其实离成功不远了,错误原因也很直白,就是url并没有在公众

    2024年02月08日
    浏览(15)
  • 目标检测项目中面对高分辨率图像的滑动窗口技术(一)(代码开源,超简便API封装,直接调用进行切图及保存)

    目标检测项目中面对高分辨率图像的滑动窗口技术(一)(代码开源,超简便API封装,直接调用进行切图及保存)

    目录 一、技术背景 二、解决方法介绍:滑动窗口切图、随机中心点切图 三、程序代码 四、使用文档 一、技术背景         在目标检测项目中,面对高分辨率、小目标的图片数据(如航拍图片数据),若对图片直接resize到模型合适的大小,会损失大量信息,模型无法学到信

    2024年02月06日
    浏览(15)
  • Vue-Element-Admin项目学习笔记(7)用Node.js写一个简单后端接口

    Vue-Element-Admin项目学习笔记(7)用Node.js写一个简单后端接口

    前情回顾: vue-element-admin项目学习笔记(1)安装、配置、启动项目 vue-element-admin项目学习笔记(2)main.js 文件分析 vue-element-admin项目学习笔记(3)路由分析一:静态路由 vue-element-admin项目学习笔记(4)路由分析二:动态路由及permission.js vue-element-admin项目学习笔记(5)路由分析

    2024年02月09日
    浏览(14)
  • uniapp(vue3) - 微信小程序平台使用import引入外部js文件出现undefined,正常引入js文件(sdk插件)文件路径正确但console.log控制台打印时却是undefined

    uniapp(vue3) - 微信小程序平台使用import引入外部js文件出现undefined,正常引入js文件(sdk插件)文件路径正确但console.log控制台打印时却是undefined

    注:uniapp 小程序平台! 在使用 uniapp 微信小程序端导入 SDK 的过程中,您可能会遇到这样的情况: 使用 console.log() 打印导入的模块名称时,实际输出的名称并不是您期望的名称。这是因为 uniapp 进行了编译和打包处理后,会将代码重新命名以减小文件大小和提高执行效率,包

    2024年02月10日
    浏览(44)
  • 微信小程序--下拉选择框组件封装,可CV直接使用

    微信小程序--下拉选择框组件封装,可CV直接使用

            接到的项目需求,查看ui设计图后,由于微信小程序官方设计的下拉选择框不符合需求,而且常用的第三方库也没有封装类似的,所以选择自己自定义组件。在此记录一下,方便日后复用。         ui设计图如下:                   微信官方提供的选择框         对比发现

    2024年02月05日
    浏览(16)
  • vue中父组件直接调用子组件方法(通过ref)

    目录 1、vue2 中,父组件调用子组件的方法 2、vue3 中,父组件调用子组件的方法 在Vue 2中,父组件可以通过使用 ref 属性来引用子组件的实例,然后通过该实例调用子组件的方法。 首先,在父组件的模板中,给子组件添加一个 ref 属性: 然后,在父组件的JavaScript代码中,可以

    2024年04月27日
    浏览(13)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包