微信公众号网页开发
基本配置1.设置—公众号设置—功能设置—配置JS接口安全域名安全域名配置规则如下 2.开发—基本配置开发者密码第一次使用需要重新设置记录 开发者ID(AppID) 开发者密码（AppSecret）后面会用到 3.IP白名单配置推荐填写当前本地开发IP地址和服务器IP地址本地开发地址获取方式服务器IP地址（根据自己的服务器Ip地址自行填写）多个IP地址填写用回车隔开 4重要的一步在：微信公众号-开发-接口权限查看想要调用的开发接口是否可用如果有相关接口权限无法开启，推荐使用：微信公众平台-开发-开发者工具-公众平台测试帐号开发 开始开发1.引入JS文件在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/... 2通过config接口注入权限验证配置（最重要的一步）wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '', // 必填，公众号的唯一标识 timestamp: , // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串 signature: '',// 必填，签名 jsApiList: [] // 必填，需要使用的JS接口列表});appID（前面在微信公众号基本配置中已经拿到了）jsApiList:['uploadImage','updateAppMessageShareData'] (例：上传图片接口,和自定义分享接口) 签名算法（微信官方提供）jsapi_ticket生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。 参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）：https://developers.weixin.qq....用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi...2.1签名获取拆解第一步GET请求access_tokenaccess_token的有效期为7200秒（不必反复请求）https://api.weixin.qq.com/cgi... grant_type是获取access_token填写client_credentialappid是第三方用户唯一凭证secret是第三方用户唯一凭证密钥，即appsecret**appid 和 secret 在前面的基本配置中其实都已经拿到。但是由于开发者密码（AppSecret）是校验公众号开发者身份的密码，具有极高的安全性。不能直接暴露在前端代码中，所以access_token的请求需在后端完成，这里签名的生成过程都在后端完成。 当前以node搭建后端服务//获取到access_token示例var url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`; request(url, function (error, response, body) { if (!error && response.statusCode == 200) { console.log("access_token值" +JSON.parse(body).access_token) } });第二步GET请求jsapi_ticketjsapi_ticket的有效期为7200秒（不必反复请求）https://api.weixin.qq.com/cgi...用第一步获取到的access_token的值进行请求 //var url = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi` request(url, function (error, response, body) { if (!error && response.statusCode == 200) { console.log("jsapi_ticket值" + JSON.parse(body).ticket); } });第三步生成算法签名const timestamp = parseInt(Date.now() / 1000) //生成签名的时间戳const nonceStr = Math.random().toString(36).substr(2, 15) //生成签名的随机串let jsapi_ticket //在第二步生成let url//签名用的url必须是调用JS接口页面的完整URL（前端请求服务端接口带入） ...