如何在dva+umi+react+antd-mobile框架中中和谐的使用微信的JSSDK？

安装微信JSSDK

安装：

npm install weixin-js-sdk

使用：

var wx = require('weixin-js-sdk');

 

签名生成

第一步：获取AppID、AppSecret：

测试环境获取AppID、AppSecret

第一步：点击以下网站，以下网站为测试公众号入口:

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421137522。

第二步：打开该网站后在左侧点击【开始开发】->【接口测试号申请】，在右侧点击【进入微信公众帐号测试号申请系统】进行测试账号申请，如下图所示：

      

第三步：在测试号信息中获取AppID、appSecret。

正式环境获取AppID、AppSecret

登录微信公众平台在【开发】->【基本配置】中获取AppID、AppSecret，如下图

第二步：获取access_token：    

打开微信公众平台接口调试工具网址链接如下：https://mp.weixin.qq.com/debug/cgi-bin/apiinfo

  打开链接之后，接口类型选择【基础支持】，接口列表选择【获取access_token接口/token】，appid填入步骤一中获得的appid,secret填入步骤一中获得的AppSecret。点击【检查问题】获取access_token。

第三步：获取jsapi_ticket

用第二步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket），下图中的ticket后的值即为jsapi_token：

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

第四步：获取签名等相关信息

将二、三步中获得的AccessToken、jsapi_ticket以及你要签名的URL填写进main方法，运行main方法获取签名。

1. import java.security.MessageDigest;  
2. import java.security.NoSuchAlgorithmException;  
3. import java.util.UUID;  
4.   
5. public class Sign {  
6.   
7.     public static void main(String[] args) {    
8.         //1、获取AccessToken    
9.         String accessToken ="13_llOksrm98OSbyBWiSjLpM2b_hzcV-OcIu09zB2gUJVUyhAF2vjLuUu8qyO7SzqYUSPCGsIOriag07y42P3bd5Djd72HMlboFAaxeA94GNCwnKq8Ljqz9MKgGOWmyYuwNn63WIaP9HG-iY3-aLOBhAHAXAN";       
10.         //2、获取Ticket    
11.         String jsapi_ticket = "HoagFKDcsGMVCIY2vOjf9g9aJwPyuNxgm8-aq3zpoe4h39930te4n-8UijouKixecx5e8oz_p83txamoPoXg2w";    
12.         //3、时间戳和随机字符串    
13.         String noncestr = UUID.randomUUID().toString().replace("-", "").substring(0, 16);//随机字符串    
14.         String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//时间戳              
15.         //4、获取url    
16.         String url="http://192.168.11.173:8000/main";      
17.         //5、将参数排序并拼接字符串    
18.         String str = "jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"×tamp="+timestamp+"&url="+url;    
19.         //6、将字符串进行sha1加密    
20.         String signature =SHA1(str);    
21.         //结果输出  
22.         System.out.println("jsapi_ticket="+jsapi_ticket+"\n");  
23.         System.out.println("noncestr="+noncestr+"\n");  
24.         System.out.println("timestamp="+timestamp+"\n");  
25.         System.out.println("url="+url+"\n");    
26.         System.out.println("参数："+str+"\n签名："+signature);    
27.     }    
28.       
29.     public static String SHA1(String decript) {    
30.         try {    
31.             MessageDigest digest = java.security.MessageDigest.getInstance("SHA-1");    
32.             digest.update(decript.getBytes());    
33.             byte messageDigest[] = digest.digest();    
34.             // Create Hex String    
35.             StringBuffer hexString = new StringBuffer();    
36.             // 字节数组转换为 十六进制 数    
37.                 for (int i = 0; i < messageDigest.length; i++) {    
38.                     String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);    
39.                     if (shaHex.length() < 2) {    
40.                         hexString.append(0);    
41.                     }    
42.                     hexString.append(shaHex);    
43.                 }    
44.                 return hexString.toString();    
45.          
46.             } catch (NoSuchAlgorithmException e) {    
47.                 e.printStackTrace();    
48.             }    
49.             return "";    
50.     }  
51. }  

52. 第五步检验签名是否生成正确

    https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign&token=&lang=zh_CN

53. 使用JSSDK

    使用JSSDK有以下前提：

    所在开发的小程序不能是个人类型与海外类型的小程序。

54. 在测试环境下使用

    第一步：申请测试公众号，设置JS接口安全域。

    该步骤的目的就是为了在测试环境下，设置JS接口安全域名。测试公众号入口：

    第一步：点击以下网站:

    https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421137522。

    第二步：打开该网站后在左侧点击【开始开发】->【接口测试号申请】，在右侧点击【进入微信公众帐号测试号申请系统】进行测试账号申请，如下图所示：

55. 

56. 第三步：申请完测试账号后，在JS接口安全域名处设置JS接口安全域名。

    注意：

    （1）、JS安全接口域名只填写域名即可。

    错误域名示范：

    https://test.zz.com、

    https://test.zz.com /test/、

    http://test.zz.com、

    http://test.zz.com/test

    正确域名示范：

    test.zz.com

    （2）、这填写的网站的域名必须与将要签名的网站的域名保持一致。

57. 

58. 第四步：用开发小程序的企业账号扫描测试号二维码并关注测试账号，关注后将会在右侧显示关注者的信息。

59. 

60. 第二步：引入JS文件

    详情请看【安装微信JSSDK】

    第三步：通过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: '',// 必填，签名
    
        jsApiList: [] // 必填，需要使用的JS接口列表
    
    });

    注意：wx.config({}); 中的appId 需要和测试公众号或正式的appId保持一致；

          wx.config({}); 中的signature 获取签名请看【签名生成】  

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

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

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

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

    接口调用说明

    所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：

    1.success：接口调用成功时执行的回调函数。

    2.fail：接口调用失败时执行的回调函数。

    3.complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。

    4.cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。

    5.trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。

    备注：不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回。

    以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性errMsg，其值格式如下：

    调用成功时："xxx:ok" ，其中xxx为调用的接口名

    用户取消时："xxx:cancel"，其中xxx为调用的接口名

    调用失败时：其值为具体错误信息

61.  

    在正式环境下使用

    不同的是第一步JS安全接口域名的设置，其他都一致。

    正式环境下设置JS接口安全域名

    登录微信公众平台，在左侧菜单栏设置->公众号设置->功能设置->JS接口安全域名区域，点击设置进行JS接口安全域名设置，如图所示：

     

     

62.