HTML中使用微信JSSDK

1、公众号配置白名单。开发=》基本配置

白名单

2、公众号配置安全域名。设置=》公众号设置 =》功能设置

安全域名

3、利用公众号的appid和secret去获取access_token

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx5cf48c5cc481df38&secret=a263924268f61cd0d5504416aa22672c

获取到的access_token只能管2小时：
{"access_token":"41_3NyEWZCZox-oTj6ol09UCKhuZ9H52z8GXOx6R2rFgEMGvM5YT9eIBQ_srrVVkINvZx49Blh9g133sp8L96TOPv2Ns90HpU8QfIv49N197dOhQSIakST51-JrCfz9_6NUmU7DBMk614HVtcmUOHNfAEAGZF","expires_in":7200}

4、利用access_token去获取ticket

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=41_3NyEWZCZox-oTj6ol09UCKhuZ9H52z8GXOx6R2rFgEMGvM5YT9eIBQ_srrVVkINvZx49Blh9g133sp8L96TOPv2Ns90HpU8QfIv49N197dOhQSIakST51-JrCfz9_6NUmU7DBMk614HVtcmUOHNfAEAGZF&type=jsapi

{"errcode":0,"errmsg":"ok","ticket":"O3SMpm8bG7kJnF36aXbe81aUhT53oj4_3fM_G3W6p92N-vA359ddoy-0eDnPyuju6-nCKSL1mRaDIQWFFQ_3RA","expires_in":7200}

5、获取 timestamp、nonceStr、signature

String ticket = "O3SMpm8bG7kJnF36aXbe81aUhT53oj4_3fM_G3W6p92Ko4dFfiIjkBRXXTxxC6YFcYYFsyZThrzTvxG7yNB70g";
String webUrl = "http://caihong.ecishan.net/demo/selectAdd.html"; //需要验签的页面

String timestamp = Long.toString(System.currentTimeMi1llis() / 1000); //当前时间戳
String nonceStr = UUID.randomUUID().toString(); //随机数

String signatureStr = "jsapi_ticket=" + ticket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" + webUrl;
String signature = DigestUtils.sha1Hex(signatureStr); //进行sha1签名

System.out.println(timestamp);
System.out.println(nonceStr);
System.out.println(signature);

6、将timestamp、nonceStr、signature这三个参数给前台页面

wx.config({
     debug: true, // 是否开启调试模式。
     appId: 'wx5cf48c5cc481df38', // 必填，公众号的唯一标识
     timestamp: '1611586114', // 必填，生成签名的时间戳
     nonceStr: '7fae024a-11e4-472c-a0f3-da0a249fc32a', // 必填，生成签名的随机串
     signature: '93f9f01425fe81320a17992ba56ce218baadfcbf',// 必填，签名
     jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表 这里填写需要用到的微信api openlocation为使用微信内置地图查看位置接口
 });

7、页面引入js

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

8、注册完之后，可以使用JSSDK中的API。

wx.ready(function(){
    wx.getLocation({
        type: 'wgs84',
        success (res) {
            console.log(res)

            const latitude = res.latitude
            const longitude = res.longitude
                
            console.log(gcj02tobd09(latitude, longitude))
            aimap.setView([latitude, longitude], 16); //地图定位

        },
        error(res){
            console.log(res)
        }
    })
})