React+tsx的H5项目使用企业微信JS-SDK

步骤：

1.（配置域名）：点击企业微信PC版左下角登录管理后台-应用管理-应用-设置应用主页，网页授权及JS-SDK。

2.（引入JS-SDK）:

在React项目内终端下载
- ```
npm install weixin-js-sdk
```
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
```
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
```
在页面上方一引入weixin-js-sdk，若在react-tsx页面内报错，在pages内创建types文件夹-创建index.d.ts文件：
```
declare module "weixin-js-sdk";
```
配置next.config.js文件内域名代理

3.流程：授权页面调取接口–》登录微信小程序 --》授权调用方法权限（需要带code的url！） --》 wx.config方法

 useEffect(() => {(async function () {if (!!query.code) {    let r = await axiosHttpRequestA({  // 3.用链接的code 登录企业微信账号code: query.code,});let res = await axiosHttpRequestB({  // 4. 调用获取timestamp、nonceStr、signature等数据url: window.location.href,});import("weixin-js-sdk").then((wx) => {wxsdk = wx;wx.config({   // 5.初始化wx.configbeta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题appId: res.result.appId, // 必填，企业微信的corpID（后端返回）timestamp: res.result.timestamp, // 必填，生成签名的时间戳（后端生成）nonceStr: res.result.nonceStr, // 必填，生成签名的随机串（后端生成）signature: res.result.signature, // 必填，签名（后端生成）jsApiList: ["scanQRCode"], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来});                         // config后即可调用有权限的jsApiList});} else {let r = await axiosHttpRequestC({    // 1.授权页面调取接口，获取url和codeurl: window.location.href,});location.replace(r.result?.url);    // 2.再带code跳转回本界面}})();

一些踩坑：

如遇到import wx from ‘weixin-js-sdk’ 报错找不到window，则可按需引入。
```
  import("weixin-js-sdk").then((wx) => {wx.config({});});
```
授权调用方法权限需要带code的url，非常重要，否则会出现wx.config中jsApiList返回为空【config:ok，但35个JS接口只能用基础接口（展开、返回等界面流程方法）！！】

react，tsx中使用微信jssdk分享总结相关推荐

react中使用微信jssdk分享总结
1.线上微信官方jssdk文档 jssdk文档 2.react项目中添加配置jssdk的工具方法 javascript 代码 export function jsSdkConfig(axios, ho ...
微信JS-SDK 分享到朋友圈分享给朋友分享到QQ 拍照或从手机相册中选图识别音频并返回识别结果使用微信内置地图查看位置
微信JS-SDK 分享到朋友圈分享给朋友分享到QQ 拍照或从手机相册中选图识别音频并返回识别结果使用微信内置地图查看位置一.JS部分 wx.ready(function () {// 1 判 ...
微信分享源码PHP版JS-SDK接口_微信JSSDK分享功能图文实例详解
本文实例讲述了微信JSSDK分享功能.分享给大家供大家参考,具体如下: 这里以微信分享到朋友圈,分享给微信好友为例为参考,进行调用测试,想添加其他的功能,自行查看开发人员文档即可工欲善其事,必先利其 ...
android 微信分享发送失败,微信jssdk,分享给好友时,type为music,分享成功却发送失败...
wx.config({ debug: true, appId: '{$js_sdk[appId]}', // 必填,公众号的唯一标识 timestamp: '{$js_sdk[timestamp]}' ...
php拍照从手机相册中选择,微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例...
本文实例讲述了微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法.分享给大家供大家参考,具体如下: 目前中js-sdk 1.0版本中,预览图片提供了2个接口,接口的定义参考官方文档 1.预览 ...
如何正确的在项目中接入微信JS-SDK
微信JS-SDK的功能如果你点进来,那么我相信你应该知道微信的JS-SDK可以用来做什么了.微信的官方文档描述如下. 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. ...
微信JSSDK分享页面自定义当前链接最简单示例
这个是使用微信原本的Deom修改但是一定要注意几个注意事项,代码很简单,却让我一周mmp 在微信开发者工具调试,有时候你代码正确但是会报错一定要真机调试 appid和secret一定要正确一定要 ...
微信分享 ajax冲突,微信jssdk分享功能开发及解决ajax跨域的问题
微信JS-SDK说明文档微信JS-SDK Demo 我所要实现的分享功能要求:只要提供一段js代码给前端美工放置在静态页面等就可以实现分享功能. js代码如下: url=location.href; ...
uniapp中使用微信jssdk
在做自定义分享时,用到了微信jssdk,记录一下. 声明:本文演示uniapp中使用jssdk,示例为网页自定义分享 npm方式使用下方指令进行安装,正文部分为非npm方式. npm install ...

react，tsx中使用微信jssdk分享总结

React+tsx的H5项目使用企业微信JS-SDK

步骤：

1.（配置域名）：点击企业微信PC版左下角登录管理后台-应用管理-应用-设置应用主页，网页授权及JS-SDK。

2.（引入JS-SDK）:

3.流程：授权页面调取接口–》登录微信小程序 --》授权调用方法权限（需要带code的url！） --》 wx.config方法

一些踩坑：

react，tsx中使用微信jssdk分享总结相关推荐

最新文章

热门文章

react，tsx中使用微信jssdk分享总结

React+tsx的H5项目使用企业微信JS-SDK

步骤：

1.（配置域名）：点击企业微信PC版左下角登录管理后台-应用管理-应用-设置应用主页，网页授权及JS-SDK。

2.（引入JS-SDK）:

3.流程：授权页面调取接口–》登录微信小程序 --》 授权调用方法权限（需要带code的url！） --》 wx.config方法

一些踩坑：

react，tsx中使用微信jssdk分享总结相关推荐

最新文章

热门文章

3.流程：授权页面调取接口–》登录微信小程序 --》授权调用方法权限（需要带code的url！） --》 wx.config方法