引入微信jssdk(请按照我的步骤来进行，百分百成功)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_43606158/article/details/100550660

此文章是帮助一个粉丝整理的，如果按照此文一步一步的进行绝对可以引入成功。

官网说明：https://work.weixin.qq.com/api/doc#90000/90136/90514

注意事项：所有的JS接口只能在企业微信应用的可信域名下调用(包括子域名)，且可信域名必须有ICP备案且在管理端验证域名归属。

第一步：下载微信jssdk

$ npm i weixin-js-sdk

第二步：在你需要调用JS接口的页面引入该包

每一个需要使用微信jssdk的路由页面都需要哦

import wx from 'weixin-js-sdk';

第三步：在你此路由渲染dom的生命周期进行必要配置

vue就是mounted
react就是componentDidMount

以下为笔者项目(react项目)进行配置

这是你要调用wx的api的页面

import * as utils from '../utils/utils'; // 笔者是将请求都抽离到了utils文件，你也可以不抽离
// react的基本代码我没写，只是写了关键代码。

async componentDidMount() {
  const settingRes = await utils.getSettingRequest();  // 向后端请求appId（公众号的唯一标识，也可以给你固定的你就不用发请求了）
  const getTicket = await utils.getTicketRequest();	// 向后端请求ticket（关于ticket请看下方我的备注）
  const timestamp = +new Date();	// 生成当前时间时间戳
  const nonceStr = Math.random().toString(16).substr(2);	// 生成随机的英文与数字
  // 此变量为最终拼接成的字符串，是建立在上面的数据已经有了然后进行拼接。
  // 此外要注意将此变量进行base64编码，后端通过base64解码解析，此操作笔者在发请求的时候处理的，请往下看。
  const jsapi_ticket = `jsapi_ticket=${getTicket.data.ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${settingRes.data.nkydomain}/nky/mobile/`;	
  const { data: signatureRes } = await utils.getShaRequest(jsapi_ticket);

  wx.config({
     beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
     appId: settingRes.data?.corpid, // 必填，公众号的唯一标识
     timestamp, // 必填，生成签名的时间戳
     nonceStr, // 必填，生成签名的随机串
     signature: signatureRes.signature, // 必填，签名
     jsApiList: ['scanQRCode'], // 必填，需要使用的JS接口列表(笔者用的是扫一扫，更多API请看下方)
   });
   // wx.config成功后会走wx.ready,失败会走wx.error
   wx.ready(() => {
	 // 成功后使用wx,checkJSapI测试你要用的API是否可以用
	 wx.checkJsApi({
	   success(res) {
		 // 以键值对的形式返回，可用的api值true，不可用为false
         // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
         // 如果这里成功了就改变一个标记下方你就正常调用方法，如果没成功那就改变为false，下方调用API的时候给个友情提示。
	   }
	   error(res) {
		alert(JSON.stringify(res));
	   }
     })
   });
   wx.error((res) => {
     alert(JSON.stringify(res));
   });
}

Ticket：jsapi_ticket是H5应用调用企业微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限（一小时内，一个企业最多可获取400次，且单个应用不能超过100次），频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket。(注意点：是在服务全局缓存）

关于JS-SDK使用权限签名算法详细请看：https://work.weixin.qq.com/api/doc#90000/90136/90506

更多JSAPI请看：https://work.weixin.qq.com/api/doc#90001/90144/90545

这是你发请求的utils文件：

请求地址与返回值你要与后端兄弟商量好，别抄我的

扫描二维码关注公众号，回复： 7190424 查看本文章

export const appBaseUrl = '/xxx/xxxxxx/'; // 请改成你们公司自己的
/**
 * Requests a URL, returning a promise. 公共发请求的方法，请用你自己的
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 * @return {object}           An object containing either "data" or "err"
 */
export default function request(url, options) {
  const defaultOptions = {
    credentials: 'include',
  };
  const newOptions = { ...defaultOptions, ...options };
  if (newOptions.method === 'POST' || newOptions.method === 'PUT') {
    newOptions.headers = {
      Accept: 'application/json',
      'Content-Type': 'application/json; charset=utf-8',
      ...newOptions.headers,
    };
    newOptions.body = JSON.stringify(newOptions.body);
  }

  return fetch(url, newOptions)
    .then(checkStatus)
    .then(response => response.text())
    .then((text) => {
      if (text.length) {
        try {
          return JSON.parse(text);
        } catch (err) {
          // do nothing
        }
      }
      return text;
    })
    .catch((error) => {
      return error;
    });
}

// 获取配置信息(如果后端给你的是固定的appid可忽略此请求，笔者还获取了其他的配置所以发了请求)
export function getSettingRequest() {
  const newurl = `${appBaseUrl}session/getSetting`;
  const promise = request(newurl, {
    method: 'GET',
  })

  return new Promise((resolve) => {
    promise.then((data) => {
      resolve(data)
    })
    promise.catch((err) => {
      resolve(err)
    })
  })
}

// 获取Ticket
export function getTicketRequest() {
  const url = `${appBaseUrl}session/getJsapiTicket`;
  const promise = request(url, {
    method: 'GET',
  })

  return new Promise((resolve) => {
    promise.then((data) => {
      resolve(data)
    })
    promise.catch((err) => {
      resolve(err)
    })
  })
}

// 获取微信签名（一定要使用btoa()进行base64编码哈，提醒后端做解码）关于btoa请看下方
export function getShaRequest(code) {
  const url = `${appBaseUrl}session/getSha1?code=${btoa(code)}`;
  const promise = request(url, {
    method: 'GET',
  });

  return new Promise((resolve) => {
    promise.then((data) => {
      resolve(data)
    })
    promise.catch((err) => {
      resolve(err)
    })
  })
}

关于btoa（base64编码）请看：https://blog.csdn.net/weixin_43606158/article/details/100522753

如果还有什么问题请在下方评论哈，十二小时之内笔者会回复。