如何在React中调用微信的jsSDK

2023-04-16 17:42:01JavaScript054

如何在React中调用微信的jsSDK,第1张

1. 微信JSSDK使用步骤简介

我们既然是在做基于微信的开发，当然就离不开微信的开发文档了。开始之前希望大家能先去看下《微信JS-SDK说明文档》。那么我们怎么样才能用上微信的JSSDK呢？以下基本步骤就是基于该文档的。

需要注意的是，如果本人下面的描述你看的有点云里雾里的话，我建议你：

回头看下本系列《小白学react》的历史基础文章，特别是《小白学react之altjs的Action和Store》以及《小白学react之打通React Component任督二脉》，或/和：

直接跳过我的描述，在文章后面下载最新的源码，先阅读源码，碰到问题再反过来看文章的描述。

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

这里绑定的时候需要注意不要带前面的http协议头。写法跟上一篇《小白学react之网页获取微信用户信息》中的网页回调域名设置的写法是一样的。

步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：

请注意，如果你的页面启用了https，务必引入：

，否则将无法在iOS9.0以上系统中成功使用JSSDK

因为我们的index.html是通过ejs模版生成的，所以我们只需要在我们的index.ejs中的body部分末尾加入相应的微信jssdk库的引用就好了。

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %> <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>

<% } %>

步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

wx.config({

debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: '', // 必填，公众号的唯一标识

timestamp: , // 必填，生成签名的时间戳

nonceStr: '', // 必填，生成签名的随机串

signature: '',// 必填，签名，见附录1

jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2})

这一步的关键是如何生成正确的签名。这里微信jssdk文档中有给出不同语言版本的签名算法示例大家可以参考。往下我们也会就github上的一个签名算法的封装进行学习。

在我们的实战过程中，签名会在服务器端发生。

react客户端会像之前的获取微信用户信息一样，通过一个restfulApi调用服务器端的api，然后由服务器来生成对应的签名，然后将签名信息返回给客户端。

客户端获取到上面wx.config示例代码中的签名相关信息后，就会调用一个Alt的Action，来触发将获取回来的信息保存到一个跟该Action绑定的jssdk状态管理的Store里面。然后就可以调用wx.config来配置我们需要用到的JS接口列表了。

注意这里的wx这个对象是通过上一步的JS文件引入进来的。我们在react的客户端代码中可以直接通过window.wx对其进行引用：

window.wx.config({

...

})

步骤四：通过ready接口处理成功验证

wx.ready(function(){ // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。})

随后，react客户端负责jssdk状态管理的store会调用wx.ready来监听config配置是否成功，如果成功的话，就会将该store的一个ready状态设置成true。

这样的话，通过AltContainer绑定了该store的相应的Component组件就能知道响应的jssdk的api是否已经准备就绪，可以进行调用了。

步骤五：通过error接口处理失败验证

wx.error(function(res){ // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。})

同理，如果如果配置失败的话，那么就在wx.error这个监听接口中将ready状态设置成false。

2. 生成签名

如前面所述，我们需要用到jssdk的页面必须要要注入调用到的api的配置信息。

wx.config({

appId: '', // 必填，公众号的唯一标识

timestamp: , // 必填，生成签名的时间戳

nonceStr: '', // 必填，生成签名的随机串

signature: '',// 必填，签名，见附录1

jsApiList: [] // 必填，需要使用的JS接口列表

而注入JS接口到页面时，我们可以看到，还需要使用到其他一些信息。其中appId我们可以从公众号管理后台获得。signature是跟所访问页面的url关联的一个签名，它有专门的一套算法来生成。另外两个参数nonceStr和signature都是在签名的过程中生成的。

这里通过wx.config传进去这些参数，主要是为了让微信去判断我们生成的签名和微信通过这些信息生成的签名是否一致，如果不一致的话，那么注入到该页面的jsApiListj就失败。

那么我们在服务器这边的签名算法是如何的呢？根据微信开发文档我们需要提供以下4个参数，然后通过sha1算发来生成对应的签名：

noncestr：一个随机字符串，我们随便填写

jsapi_ticket：jsapi_ticket是公众号用于调用微信JS接口的临时票据

timestamp: 签名时间戳。注意这个时间戳需要和上面传入wx.config的时间戳一致

url: 调用JS接口页面的完整URL。我们可以从react客户端通过location.href获得，并传给服务器端

那么这里主要需要解决的就是如何获得jsapi_ticket这个临时票据了。

根据文档的描述，我们可以通过以下这个接口获得：

cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

从中可以看到，我们调用这个接口首先要获得一个access_token。这里微信也有相应的api来处理。

cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

这里需要用到我们的微信公众号的appId和secret，这些我们都是已知的，所以好办。

那么，也就是说，我们其实只需要提供我们的微信公众号的appId和secret，就能获取到access_token，从而就会获得我们需要的jsapi_ticket。

这里我们参考下github上一个示例(wechat-sdk-demo )的签名的实现。其传入的参数有两个，其中:

url: react客户端传进来的需要注入jsapi的页面url

callback: 一个回调函数，接受一个json格式的参数。主要是用来将生成的签名信息等回传给上层调用函数。

const config = { grant_type: 'client_credential', appid: 'xxxx', secret: "xxxxx", noncestr:'Wm3WZYTPz0wzccnW', accessTokenUrlin.qq.com/cgi-bin/token', ticketUrl:'com/cgi-bin/ticket/getticket',

}

exports.sign = function (url,callback) { var noncestr = config.noncestr,

timestamp = Math.floor(Date.now()/1000), //精确到秒

...

request(config.accessTokenUrl + '?grant_type=' + config.grant_type + '&appid=' + config.appid + '&secret=' + config.secret ,function(error, response, body){ if (!error &&response.statusCode == 200) { var tokenMap = JSON.parse(body)

request(config.ticketUrl + '?access_token=' + tokenMap.access_token + '&type=jsapi', function(error, resp, json){ if (!error &&response.statusCode == 200) { var ticketMap = JSON.parse(json)

cache.put('ticket',ticketMap.ticket,config.cache_duration) //加入缓存

callback({ noncestr:noncestr, timestamp:timestamp, url:url, jsapi_ticket:ticketMap.ticket, signature:sha1('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + url)

})

}

})

}

})

}

这里的流程和我们刚才描述的并无二致。首先是通过appId和secret获得调用获取jsapi_ticket的access_token，然后通过该access_token获得我们签名需要用到的jsapi_ticket。noncestr我们是提前随便填写好的。timestamp的算法也比较简单。

最后就是通过sha1这个库提供的方法，将jsapi_ticket，noncestr，timestamp和页面url进行sha1签名，然后将以上这些信息通过callback返回给上层调用函数。

那么我们往下看下我们的上层调用函数。其实就是我们的express路由:

app.get("/api/signature", function(req,res) { const url = req.query.url.split('#')[0]

signature.sign(url,function(signatureMap){

signatureMap.appId = wechat_cfg.appid

res.send(signatureMap)

})

根据微信开发文档需求，我们首先需要将传进来的url的锚点后面的数据给去掉，保留前面的有效部分。

然后就是调用上面的sign方法来生成签名。上面的签名方法最后传进来的json数据就是这里的signatureMap。我们最终会将这些数据发送回react客户端。

同时，通过上面的wx.config的示例，我们知道还需要用到微信公众号的appId。所以这里一并将其放到signatureMap中进行返回。

那么到此为止，react客户端调用服务端的"/api/signature"返回的数据示例如下:

{

noncestr: 'Wm3WZYTPz0wzccnW',

timestamp: 1476873698,

url: 'com/?code=001kGsd30xcm7F1PAFf305Uud30kGsdr&state=',

jsapi_ticket: 'sM4AOVdWfPE4DxkXGEs8VBqyVbs-TKGYp4d_ZSQa0Q5WvvMUPNQ6XGpyEcgKOD_xID_GrMCaalSmIF9JbrGaOg',

signature: '9268ffaf4b9eb0d296fcfefe3d2724118aa05e3c'

}

3. 客户端获取签名信息

3.1 获取签名信息并注入jssdk

和之前的获取微信用户信息一样，我们这里会建立一个新的Source文件WechatSdkSource.js来调用远程服务器的"/api/signature"接口:

var WechatSdkSource = {

fetchSignatureMap() { return {

remote(state,url) { return co(function *() { let signatureMap = null const getSignatureMapUrl = `/api/signature` try { let result = yield request.get(getSignatureMapUrl).query({url:url})

signatureMap = result.body

} catch (e) {

signatureMap = null

} //console.log("userInfo:", userInfo)

return signatureMap

})

local() { // Never check locally, always fetch remotely.

return null

}, success: WechatSdkActions.updateSignatureMap, error: WechatSdkActions.getSignatureMapFailed, loading: WechatSdkActions.getSignatureMap,

}

这里传进来的url由下面将要谈及的上层函数所生成。整个流程就没有什么好说的了，说白了就是通过相应的库发送一个带有url的query参数的请求到服务器端来请求签名信息，相信有跟着这个系列文章的朋友都是很清楚的了。

最终请求成功返回的时候就会调用WechatSdkActions的updateSignatureMap这个Action。

var alt = require('../alt')module.exports = alt.generateActions( 'updateSignatureMap', 'getSignatureMap', 'getSignatureMapFailed',

)

而这个action就会触发所监听的WechatSdkStore的onUpdateSignatureMap这个回调。

class WechatSdkStore { constructor() { this.signatureMap = [] this.errorMessage = null this.ready = false this.bindActions(WechatSdkActions) this.exportAsync(WechatSdkSource)

问题一：微信web开发者工具怎么用准备工具

微信公众号、微信个人号；

电脑；

使用步骤

微信web开发者工具下载，并安装。

启动微信web开发者工具。

登录微信公众号，进入web开发者工具，绑定个人微信号。

通过个人微信号，登录微信web开发者工具。

从微信公众号复制链接到地址栏，大功告成。

然后是需要移动调试，登陆开发工具，随意打开一个公众号的页面，复制链接放在开发工具的地址栏，现在基本上就可以在电脑上面进行调试了。

先选择Android设备调试--普通调试。

只要按照他的提示--调试步骤设置手机就可以，手机代理设置如图所示：

手机设置完毕代理以后，点击开发者工具页面中的开始调试就可以。

注意：

需要注意的是，Android 4.2 之后的设备，开发人员选项默认是隐藏的。

问题二：微信Web开发者工具怎么用参考一下这里：jingyan.baidu/...6

问题三：如何用微信开发者工具如何打开小程序首先登陆微信公布的简易教程网页，登陆上去后，点击导航栏上方的“工具”按钮。然后点击左侧边的导航栏“下载”按钮。

微信小程序开发工具有windows 64,windows 32和mac版本，根据自己的电脑情况，下载适合自己的版本。

把微信小程序开发工具下载回来后，选择适合的路径进行安装。

安装完开发工具后，会自动在桌面添加微信web开发者工具图标。通过点击微信web开发者工具图标打开微信小程序开发工具，然后用自己的微信软件扫描二维码登录，进入微信web开发者工具。

进入开发工具后，那个demo是由微信提供的，我们需要点击最左小角的关闭按钮，退出当前这个项目。然后点击添加项目添加一个新的项目，进入项目信息填充界面。

如果你有微信提供的AppID，那就再AppID那里填入你获取到的AppID。如果没有，那么就点击无AppID。

在项目名称那里，填入你自己项目的名称（这个随便填）。

项目目录那里，如果你是新创建一个项目，那么首先点击选择，选择一个存放你项目的文件夹。如果你是导入项目，那么就找到你那个项目的位置，直接导入就可以了。

最后店家添加项目就可以了。

问题四：微信公众平台开发者工具怎么用微信中的自定义菜单：可以设置三个大菜单，每个大菜单下最多可以延伸五个子菜单。点击父菜单会弹出该父菜单下的子菜单，点击每个子菜单，将会触发请求，返回信息。用户能够通过简单的点击获得账号提供的最主要的信息服务。

自定义菜单最大的优点是减少了用户的认知门槛，可以将公众账号里的重点信息入口直观的暴露给用户。当用户进入到公众账号时，可以一目了然的了解相关的服务，只需要点击，不需要再通过一系列的命令行交互（或者简化了命令行交互的方式，提供了更低门槛的入口）。

问题五：微信web开发者工具怎么用微信web开发者工具使用方法你看下韩顺平的微信课程里面用的是什么，你就可以用什么呀，工具嘛，好用就行

问题六：微信web开发者工具怎么使用微信web开发者工具主要功能：

使用自己的微信号来调试微信网页授权；

调试、检验页面的 JS-SDK 相关功能与权限，模拟大部分 SDK 的输入和输出；

使用基于 weinre 的移动调试功能；

利用集成的 Chrome DevTools 协助开发。

工具顶部菜单栏是刷新、后退、选中地址栏等动作的统一入口，以及微信客户端版本的模拟设置页。左侧是微信的 webview 模拟器，可以直接操作网

页，模拟用户真实行为。右侧上方是地址栏，用于输入待调试的页面链接，以及清除缓存按钮。右侧下方是相关的请求和返回结果，以及调试界面和登录按钮。

问题七：微信web开发者工具怎么用微信web开发者工具使用方法微信web开发者工具使用，用到的工具：电脑，步骤如下：

下载安装微信web开发者工具，打开微信web开发者工具界面如下：

2.输入要调试微信程序的url，并选择移动设备的类型（安卓或者ios），以安卓为例：

说明：左边选择相应的区块，右边的代码就会追踪到。

注意事项：打开调试工具中的url需要微信公众号平台授权登录微信web开发者工具。

问题八：微信web开发者工具怎么用启动微信web开发者工具

登录微信公众号，进入web开发者工具，绑定个人微信号

通过个人微信号，登录微信web开发者工具

从微信公众号复制链接到地址栏，大功告成

移动调试，敬请关注。

问题九：微信web开发者工具怎么用这个是需要开发人员来实现，具体需要看开发者文档

问题十：微信web开发者工具怎么用微信web开发者工具使用方法微信web开发者工具使用教程：

1、首先用户需要做的就是先下载安装，并启工具。

即刻下载使用==》微信web开发者工具下载

2、调试微信网页授权，具体操作步骤为：

1）开发者可以在调试器中点击“登录”，使用手机微信扫码登录，从而使用真实的用户身份来开发和调试微信网页授权。请确认手机登录页，绑定的公众号为“微信 web 开发者工具”。

2）为了保证开发者身份信息的安全，对于希望调试的公众号，我们要求开发者微信号与之建立绑定关系。具体操作为：公众号登录管理后台，启用开发者中心，在开发者工具――web 开发者工具页面，向开发者微信号发送绑定邀请。

3）开发者在手机微信上接受邀请，即可完成绑定。每个公众号最多可同时绑定10个开发者微信号。邀请确认页面如下图所示：

4）完成登录和绑定后，开发者就可以开始调试微信网页授权了，注意只能调试自己绑定过的公众号：

非静默授权的 URL：点击查看

在微信 web 开发者工具中上面的 URL，webview 模拟器显示效果如图：

点击“确认登录”即可带着用户信息跳转到第三方页面，很方便的进行后续的开发和调试。

静默授权的 URL：点击查看

在微信 web 开发者工具中打开该 URL 则会自动跳转到第三方页面。

（注意：如果使用了代理，需代理本身支持直连，才能调试页面。）

3、模拟JSSDK权限校验

通过 web 开发者工具，可以模拟 JSSDK 在微信客户端中的请求，并直观地看到鉴权结果和 log。以微信 JSSDK DEMO 页面为例：

demo.open.weixin.qq/jssdk

在调试器中打开该 URL，可以方便地在右侧的 JS-SDK Tab 中看到当前页面 wx.config 的校验情况和 JSSDK 的调用 log。如下是校验通过的页面：

如下是校验未通过的页面：

在“权限列表” Tab 中，可以查询到当前页面拥有权限的 JS-SDK 列表：

4、移动调试

移动调试功能是基于 weinre 的，并且做了一些改进，相比直接使用 weinre 有两个优点：

1）无须手工在页面中加入 weinre 调试脚本

2）可以在 weinre 的网络请求页卡中，看到完整的请求 log，非局限于 ajax 请求

（注意，移动调试功能暂不支持。）

5、Chrome DevTools

微信 web 开发者工具集成了 Chrome DevTools。同之前在 PC 上的调试体验一致，可以快速上手。

以上内容就是微信web开发者工具的一些基本使用方法，毕竟是一款适合开发人员使用的“高大上”软件，对于我这种“文盲”来说是根本不知道软件的具体使用方法的，这个还需要开发者自行摸索，相信它一定能够成为开发者开发必备的利器。...>>

问题一：手机模拟器怎么用？你要什么模拟器，模拟器有很多种，智能机可以后期安装，现在有的国产机已经自阀游戏模拟器！常用的模拟器有GB模拟器游戏

FC模拟器游戏

GG模拟器游戏

MD模拟器游戏

SFC模拟器游戏

GBA模拟器游戏

MGS模拟器游戏

C2doom模拟器游戏

问题二：手机模拟器是什么？干什么用的啊楼主说的手机模拟器是哪一端的呢？是电脑手机模拟器还是手机gba之类的模拟器呢？

前一种是电脑用来模拟手机的，主要用途就是测试或试玩手机游戏，例如评测手机游戏软件就需要。

后一种唬手机用来模拟gba的游戏机的模拟器，用来玩gba的游戏，两者有很大的不同哦。

问题三：安卓模拟器是什么，怎么用？需要连接手机到电脑吗？就是个软件。

安装以后，可以在里面运行安卓的apk程序。

和手机没关系。没有手机也能用。

国产的模拟器，连apk文件都不必找。在模拟器里直接就可以搜索了。比如靠谱助手、文卓爷等。

问题四：手机GBA模拟器怎么用首先先下载GameBoid的最新版，解压下载好的压缩包之后得到一个apk文件与gba_bios.bin文件，首先可以将apk安装包安装到手机上，然后在SD卡中新建一个文件夹将gba_bios.bin文件放入其中即可，比如新建一个名为GBA的文件夹，则gba_bios.bin文件的存放位置为SD/GBA/gba_bios.bin，然后点击手机中的软件图标开始运行软件，初次运行系统会提示找不到GBA BIOS文件，这时候只要手动查找到gba_bios.bin文件所在的SD卡对应目录即可，调试完成之后就可以开始正式玩游戏了，只要是网上能够下载的任意后缀为GBA格式的文件都能运行，当然首先你得找到你的文件所放置的SD卡目录，选择一个游戏之后单击，GameBoid模拟器就会自动加载运行了，其它的细节设置，在模拟器的设置选项里就可以自行调整了。

问题五：手机上怎么用模拟器没个手机都有些不同。不知道你什么样的手机，不好说。很多模拟器下了就可以直接打开的。

问题六：手机ons模拟器怎么用打开ons模拟器，里面有个游戏路径设置，选择SD卡就行了，7z是压缩文件，解压后把所有文件放在一个文件夹里，打开模拟器选择这个文件夹就行了

问题七：微信开发者工具怎么打开手机模拟器微信web开发者工具使用教程：