微信公众号jssdk接入指南

好久没有写点东西了，最近手里做了一个小小的H5项目，其中用到了微信jssdk。

一提到微信开发，大家肯定很容易想到微信那复杂的文档，我也遇到了同样的问题。

接入jssdk的过程是比较曲折的，所以在这里写一篇文章记录一下接入过程，也希望能够给大家提供一点帮助。

一、微信官方文档阅读

首先，我们要接入微信jssdk，那么第一步就是要阅读微信开发文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432

打开这个网页，在左边的菜单栏，依次点击：微信网页开发 - 微信JS-SDK说明文档。

打开之后，我们就可以看到微信JS-SDK接入说明了。

概述，我就不多说了，我们直接来看使用步骤。

二、微信JSSDK使用步骤

微信JSSDK使用步骤有以下五步：

步骤一：绑定域名

这里需要我们先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。也就是这样：

点击设置之后，弹出这样一个输入框：

这里，大家可能就会有疑问了？需要备案的域名，这我怎么办呢？别急，这里我交大家用内网穿透的方式，来搭建本地开发环境。

内网穿透传送门：https://blog.csdn.net/RabitMountain/article/details/85298819

好了，大家实现了内网穿透，那么这个txt文件我们放到哪里呢？tomcat的默认访问路径是ROOT，大家直接丢进去就好，但要注意把原来的东西删掉，要不然会因为示例中可能使用的springmvc造成请求转发，进而无法访问到这个txt文件。

步骤二：引入js文件

这个我也就不多说了，直接在你的网页里引入js文件就行

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

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

这个是前端html页面中需要我们处理的，就是通过wx.config()注入欸之信息，要不然就会无法调用其他接口。

wx.config({
   
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

这些东西，除了jsApiList，我们都需要从后端获取，那我们就向后台发起一个请求，然后后台封装一下返回给前端是不是就好了，很简单吧。

appId简单，直接从微信后台拿来用就行。

timestamp，后台直接生成就行，但要注意要以秒为单位。

nonceStr，java后台随便使用个uuid就可以了。

signature，这个有点东西啊，但也别急，微信有文档，我们慢慢看。

JS-SDK使用权限签名算法

在生成签名之前我们必须先了解一下jsapi_ticket。

jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket。

步骤如下：

1. 获取access_token

我们据先获取access_token：思路很简单，就是我们用代码向微信服务器发一个请求，来换取它返回的access_token就行了。在写代码直接，我们还要添加ip白名单。这是因为微信规定，通过开发者ID及密码调用获取access_token接口时，需要设置访问来源IP为白名单。

添加了这个之后，我们来看一下代码：

WechatUtil.java

import com.alibaba.fastjson.JSONObject;

import java.security.MessageDigest;
import java.util.Formatter;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

public class WechatUtil {
   

    private static String appId = "xxxxxxxxxx";
    private static String appSecret = "xxxxxxxxxxxxxxxxxxxx";

    public static JSONObject getAccessToken() {
   
        String accessTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appId=APPID&secret=APPSECRET";
        String requestUrl = accessTokenUrl.replace("APPID", appId).replace("APPSECRET", appSecret);
        return WebUtil.doGet(requestUrl);
    }

    // 后面还有部分代码
}

WebUtil.java

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import org.apache.http.HttpEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;

import java.io.I