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

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

文章目录


官网说明: 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文件:

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

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。笔者这里是和后端商量好的不需要传access_tocken参数,他在后端处理,如果你的后端没这样做的话你就需要自己传递,传递的参数要和你的config的appid一致
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

验证你项目的signature是否正确:

请将信息一一传入,然后看你们返回的signatrue是否一致。
https://work.weixin.qq.com/api/jsapisign

常见错误及解决办法:

请在wx.error里面提示报错信息
引入微信jssdk(请按照我的步骤来进行,百分百成功)
代码如下:
在你的页面初始化的时候去执行:

componentDidMount() {
    const _this = this;
    this.setState({ // eslint-disable-line
      isAndroid: utils.isAndroid(),
      isWx: (dd.env.platform === 'notInDingTalk'),
    }, async () => {
      // 如果是微信,并且是安卓的时候才发请求
      if (this.state.isAndroid && this.state.isWx) {
        // 使用微信
        const settingRes = await utils.getSettingRequest();
        const getTicket = await utils.getTicketRequest();
        const timestamp = +new Date();
        const nonceStr = Math.random().toString(16).substr(2);
        let jsapi_ticket = '';
        if (getTicket.data && settingRes.data) {
          jsapi_ticket = `jsapi_ticket=${getTicket.data.ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${location.href.split('#')[0]}`;
        }
        const { data: signatureRes } = await utils.getShaRequest(jsapi_ticket);

        wx.config({
          beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
          appId: settingRes.data.corpid, // 必填,公众号的唯一标识
          timestamp, // 必填,生成签名的时间戳
          nonceStr, // 必填,生成签名的随机串
          signature: signatureRes.signature, // 必填,签名
          jsApiList: ['chooseImage', 'uploadImage', 'checkJsApi'], // 必填,需要使用的JS接口列表
        });

        wx.error(function(res){
          // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
          alert('错误信息:' + JSON.stringify(res))
          Toast.fail('调用微信接口失败!', 1);
          _this.changWxState(false);
        });
      } else {
        this.changWxState(false);
      }
    });
  }

常见错误及解决办法:https://work.weixin.qq.com/api/doc/90001/90144/90542

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

上一篇:公众化网页,微信支付 JSAPI


下一篇:机器学习Day01