html里面用axios调用 接口 html调用api接口

目录

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

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

---

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

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

（同一个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接口功能了