先列一下需要的基本参数，后边会有具体的介绍（开发代码在附录内）
var config = 'http://192.168.20.21:8074'
// 其他后台服务地址
var otherConfig = 'http://192.168.20.21:8072'
// 微信公众号的appid
var appid = 'wxf9c06891de9d8b25'
// 公众号页面获取微信授权后的跳转地址
var redirect_uri = 'http%3A%2F%2Fdhz.mydeskmedia.com%2Fwebapp%2Fcdm%2FweChatOfficialAccount%2Findex.html'
// 页面地址
var url = 'http://dhz.mydeskmedia.com/webapp/cdm/weChatOfficialAccount/index.html'
// 微信公众号的app密匙
var appSecret = 'f763316a3bf97934641ab2d68555b7a6'
// 通过微信公众号的接口获取到token
var token = '',
// 微信用户的openid
openid = '',
// 生成js-sdk签名的临时票据
jsapi_ticket = '',
// 签名
signature = '',
// 生成签名的时间戳
signTimestamp = '',
// 生成签名的uuid
signNonceStr = ''
第一步：获取code
如下方的代码先检测url地址是否有code信息，如若没有则调用微信的申请授权页面：
https://open.weixin.qq.com/connect/oauth2/authorize
该页面为微信获取授权页面，后面需要添加参数进行访问，参数分别为（固定顺序添加）：
appid，redirect_uri，repsponse_type，scope，state，#wechat_redirect，forcePopup(非必填)
例：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx807d86fb6b3d4fd2&redirect_uri=http%3A%2F%2Fdevelopers.weixin.qq.com&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
forcePopup：用于控制是否强制弹出授权页面。当 forcePopup 参数为 true 时，无论用户是否已经授权过，都会强制弹出授权页面，让用户重新进行授权；当 forcePopup 参数为 false 或者不传递该参数时，如果用户已经授权过，就直接获取用户的 openid，否则就返回错误信息。
微信访问改页面时如下图所示：
第二步：获取openid、access_token
token的获取和code不同，我们需要通过后台进行访问接口获取，前台页面无法访问改接口去进行token的获取（跨域）。需要后台进行访问。在下方的代码中通过 /wechatScanCode/getAccessToken 进行获取。
微信的接口为：
api.weixin.qq.com/sns/oauth2/…
该接口地址在后台调用可以获取到 openid 和 access_token ，其中 grant_type 配置项可以填写为 authorization_code 和 client_credential 。
authorization_code 和 client_credentiald 区别
在微信公众平台和小程序平台中，获取 access_token 时，grant_type 参数有两种取值：authorization_code 和 client_credential，分别对应不同的授权类型。
authorization_code 授权类型用于获取用户的 openid 和 access_token，通常用于网页授权流程中。在网页授权流程中，用户需要先授权给公众号或小程序，然后通过回调地址获取到一个授权码 code，最后使用授权码 code 换取用户的 openid 和 access_token。调用 api.weixin.qq.com/sns/oauth2/… 接口时，需要将 grant_type 参数设置为 authorization_code，同时需要提供 AppID、AppSecret 和 code 等参数，微信服务器会返回一个 access_token 和 openid，用于后续的接口调用。
client_credential 授权类型用于获取公众号或小程序的 access_token，通常用于服务器端接口调用。在服务器端接口调用中，不需要用户授权，只需要使用公众号或小程序的 AppID 和 AppSecret 进行授权即可。调用 api.weixin.qq.com/cgi-bin/tok… 接口时，需要将 grant_type 参数设置为 client_credential，同时需要提供 AppID 和 AppSecret 等参数，微信服务器会返回一个 access_token，用于后续的接口调用。
需要注意的是，authorization_code 和 client_credential 授权类型对应不同的接口和返回结果，需要根据实际情况选择合适的授权类型和接口。
client_credentiald 详细介绍
在获取 access_token 时，grant_type 参数的取值为 client_credential，表示使用客户端凭证（AppID 和 AppSecret）进行授权。调用 api.weixin.qq.com/cgi-bin/tok… 接口时，需要将 grant_type 参数设置为 client_credential，同时需要提供 AppID 和 AppSecret 等参数，微信服务器会返回一个 access_token，用于后续的接口调用。
在获取 jsapi_ticket 时，grant_type 参数的取值为 client_credential，表示使用客户端凭证（AppID 和 AppSecret）进行授权。调用 api.weixin.qq.com/cgi-bin/tic… 接口时，需要将 grant_type 参数设置为 client_credential，同时需要提供 AppID 和 AppSecret 等参数，微信服务器会返回一个 jsapi_ticket，用于后续的 JS-SDK 签名验证。
需要注意的是，grant_type 参数是必须的，不同的授权类型对应不同的 grant_type 参数取值。在调用接口时，需要根据实际情况设置 grant_type 参数，否则会返回错误信息。
第三步：获取js-sdk签名
通过前面的两步，我们已经获取了openid，code，access_token
拥有这三项参数后我们就可以进行公众号页面的开发了，如果需要用到微信的一些功能，比如微信扫一扫，分享，定位等等就需要使用到微信的 JS-SDK 。
引入：
res2.wx.qq.com/open/js/jwe… （支持https）。
以上两个是JS-SDK的静态资源地址我们可以在 script 标签内进行访问，也可复制下来本地文件引入。
引用后我们需要测试一下接入，调用 wx.config 传递令牌等参数进行接入权限验证配置。
所需参数：
debug，appId，timestamp，nonceStr，signature，jsApiList
其中 signature 是签名需要算法生成，老规矩交给后端（前端也可以但是没必要），同时 signature 的生成算法是加入了 timestamp 和 nonceStr 的，所以交由后端一并生成后一起返回。
jsApiList 内填写你需要用到的wxApi，例如：jsApiList: ['scanQRCode']
debug 是调试参数会将wxApi的结果以alert的形式展示，参数是 true、false
第四步：开始开发
获取了token，code，以及签名之后我们就可以进行开发了，前三步的代码在下面展示。
另外说一些需要注意的点：
1，code值只能用一次，所以需要配置获取失败后返回重新访问页面地址而不是reload页面，因为reload的话页面上的url还是无效的code无法刷新。
2，redirect_uri 的地址需要转码，并且要在域名服务内进行配置域名要经过ICP备案。
3，访问微信接口时要将后台服务的外网 IP 配置到微信公众品台内的开发设置 IP 白名单内。
4，appid和app密匙等尽量放在后台内，统一向后台申请获取。
附录：申请授权和申请使用扫一扫api代码
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
//获取url中code参数
var code = GetURL('code');
//获取地址栏参数
function GetURL(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
};
//如果没有code，转跳到授权页进行授权
if (!code) {
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
} else if (code.length > 0) {
getToken()
}
// 获取token
function getToken() {
$.ajax({
url: config + "/wechatScanCode/getAccessToken?code=" + code,
type: "get",
dataType: "json",
contentType: "application/json",
success: function (data) {
token = data.data.access_token
openid = data.data.openid
jsapi_ticket = data.data.jsapi_ticket
signature = data.data.sign
signTimestamp = data.data.timestamp
signNonceStr = data.data.nonceStr
wxInit()
// 业务功能方法
checkOpenidBinding()
}
})
}
// 初始化微信
function wxInit() {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: appid, // 必填，公众号的唯一标识
timestamp: signTimestamp, // 必填，生成签名的时间戳
nonceStr: signNonceStr, // 必填，生成签名的随机串
signature: signature, // 必填，签名
jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
});
wx.ready(function () {});
}
</script>
