引入微信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}×tamp=${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里面提示报错信息
代码如下：
在你的页面初始化的时候去执行：
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}×tamp=${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
如果还有什么问题请在下方评论哈，十二小时之内笔者会回复。
标签：const,jssdk,微信,jsapi,百分百,ticket,data,utils,wx 来源： https://blog.51cto.com/u_15275953/2924466