html网页使用微信JS-SDK接口的方法_html weixin-js-sdk-CSDN博客

本文链接：https://blog.csdn.net/black_cat7/article/details/120559731

前言

微信JS-SDK是微信公众平台提供给网页开发者的一套开发工具包，它允许开发者在网页中通过JavaScript代码使用微信的原生功能。微信JS-SDK的主要优点包括：

利用手机系统能力：开发者可以利用微信JS-SDK高效地使用手机的功能，如拍照、选图、语音、位置等。
微信特有能力：提供微信特有的功能，如微信分享、扫一扫、卡券、支付等，这些功能可以帮助提升用户体验和互动性。
增强网页互动：通过微信JS-SDK，网页可以提供更丰富的互动方式，比如录制和播放微信语音、监听微信分享、上传手机本地图片等。

微信JS-SDK为网页开发者提供了一个强大的工具集，使得在微信内的网页可以提供更加丰富和便捷的服务。

要在HTML网页中使用微信JS-SDK接口，您需要按照以下步骤操作：

绑定域名：

登录微信公众平台，进入“公众号设置”的“功能设置”。
填写“JS接口安全域名”，确保您的网站域名已经备案并且可以访问。

引入JS文件：

您可以通过直接调用微信提供的JS外链来安装JS-SDK。
如果您的项目使用npm管理依赖，可以通过npm install weixin-js-sdk或npm install weixin-jsapi来安装。
在需要使用微信JS-SDK的页面中引入JSSDK，例如使用import wx from 'weixin-js-sdk'。

配置权限验证：

调用wx.config方法，传入微信公众平台提供的AppID、时间戳、随机字符串、签名等参数。
这些参数通常在服务器端生成，并通过后端接口传递给前端。
这一步是使用JS-SDK的关键，因为它涉及到权限验证和接口配置。

使用JS-SDK接口：

完成配置后，您可以开始使用微信JS-SDK提供的各种接口，如拍照、选图、语音、位置等。
您还可以实现微信特有的功能，如分享给朋友、扫一扫等。

在整个过程中，请确保您的网站遵守微信JS-SDK的使用规范，并且所有的用户数据都符合隐私保护的要求。此外，建议您在开发过程中参考微信官方文档，以获取最新的信息和最佳实践。

在web程序中，尤其是企业的web程序中，经常需要挂在到企微的自建应用里（关于如何创建企微自建应用，请参考下面这个博客）企微创建自建应用-关联html/小程序_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120559593接下来就来说明一下如何在H5程序中，如何调用企微、微信的API接口

首先需要去看一下企微官方文档

使用说明 - 企业微信API (qq.com)https://work.weixin.qq.com/api/doc/90000/90136/90514 JS-SDK使用权限签名算法 - 企业微信API (qq.com)https://work.weixin.qq.com/api/doc/90000/90136/90506

或者是微信的官方文档

概述 | 微信开放文档 (qq.com)https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 两者内容差不多，说实话我也不知道有啥区别~

1.按照文档说明，引入js文件

2.在utils.js中创建方法，注入权限验证配置

1.按照文档说明，引入js文件

2.在utils.js中创建方法，注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用，所以要在其他页面加载前，先完成JS-SDK的权限请求（同一个url仅需调用一次，对于变化url的单页面web应用可在每次url变化时进行调用）。

上面这个是交给后端人员，在服务器端完成的，不能在前端去获取权限签名，因为不安全，所以只能由后端人员处理好返回给前端，再进行下一步的wx.config请求

/**
 * JS-SDK申请配置的方法
 * 需要用微信API接口的页面引入这个方法调用一次就能用了
 */
export const initwx =  () => {
  /**
   *  url: '/getwxAPI?url=' + window.location.href.split('#')[0],
   * ? /getwxAPI  ==> 是你后端的一个地址，这个接口接收一个url，然后返回wx.config请求所需的参数appId、timestamp等等
   * ! url=' + window.location.href.split('#')[0] ===> 在哪个页面调用这个方法，就传给后台哪个页面的url
   * ! 因为要配置微信的API接口，需要指定要使用API的页面url
   * ? .split('#')[0]  ==> 因为这个传给后台的url，不需要#号之后的内容，所以要分割
   * ! 注意：url不需要进行转义，直接放上去就行了
   */
  this.$axios.get({
    url: '/getwxAPI?url=' + window.location.href.split('#')[0],
    data: {},
    headers: {
      'content-type': 'application/json;charset=utf-8'
    }
  }).then(function (data) {
    window.wx.config({
      appId: data.config.corpid || '你企业的企微id', // 必填，企业微信的corpID
      timestamp: data.config.timestamp, // 必填，生成签名的时间戳
      nonceStr: data.config.noncestr, // 必填，生成签名的随机串
      signature: data.config.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
      // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
      jsApiList: [
        'onMenuShareAppMessage',
        'onMenuShareWechat'
         ......
      ]
    })
  })
  /**
   * config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
   * config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
   */
  window.wx.ready(() => {
  })
  /**
   * config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，
   * 也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
   */
  window.wx.error((res) => {

  })
}

在要用API的页面中调用一次这个方法，在这个页面中就能使用微信的API接口功能了

博主 [DTcode7] 带您溺亖在知识的海洋里，嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客🐒

《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》

《photoshop相关博客》
😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！