标签：const jssdk 微信 jsapi 百分百 ticket data utils wx
此文章是帮助一个粉丝整理的，如果按照此文一步一步的进行绝对可以引入成功。
文章目录
官网说明： 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。