小程序webview内嵌H5页面调用JSSDK接口

最近公司的一个项目需要小程序和公众号开发，为了节省开发时间，决定使用小程序的组件内嵌H5页面这样就能和公众号同步起来，因为需要调用微信的接口，所有整个配置起来还是很繁琐的，这里做个总结，有什么说的不对的地方还请大家提出来。

H5页面

这边是以vue页面调用扫一扫的接口为例

1.页面加载时，需要以当前页面的url向服务端请求四项参数：appId，timestamp，nonceStr，signature，这里要注意：当前页的url需要encodeURIComponent

//页面加载时候执行
 created(){
      this.getWeChatToken();
    },

//获取token
      getWeChatToken(){
        //获取当前页面的url
         let pageUrl=encodeURIComponent(window.location.href.split('#')[0]);
         getToken(pageUrl).then(response=>{
          this.tokenRes=response.data;
           this.config();
        })
      },
//执行配置
config(){
        wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: this.tokenRes.appId, // 必填，公众号的唯一标识
              timestamp: this.tokenRes.timestamp, // 必填，生成签名的时间戳
              nonceStr: this.tokenRes.nonceStr, // 必填，生成签名的随机串
              signature: this.tokenRes.signature, // 必填，签名，见附录1n
              jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
        wx.ready(function() {
              console.log("配置成功")
            });
        wx.error(function(res) {
              console.log("配置失败")
            })
      },

服务端

服务端需要做两件事：

第一件：
通过小程序的appId和appsecret获取到accessToken，再通过accessToken获取jsapiTicket，因为每天的获取次数是有限的，所以需要做本地缓存，accessToken、jsapiTicket的有效期是7200秒。我这边的实现方式是：定时器+redis

 //项目启动请求一次Token
     @PostConstruct
     public void proiectBeginExecute(){ getAccessTokenAndJsapiTicket();}
     //每隔100分钟请求一次Token
     @Scheduled(fixedRate=1000*60*100)
     public void eachExecuteTimer(){getAccessTokenAndJsapiTicket();}


    public void getAccessTokenAndJsapiTicket(){
        //先获取access_token
        String accessTokenUrl="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+appID+"&secret="+appsecret;
        String accessTokenRes=doGet(accessTokenUrl,null);
        JSONObject jsonObject = JSONObject.parseObject(accessTokenRes);
        String accessToken=jsonObject.get("access_token").toString();
        //通过access_token获取jsap_ticket
        String jsapiTicketUrl="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+accessToken+"&type=jsapi";
        String jsapiTicketRes=doGet(jsapiTicketUrl, null);
        JSONObject jsonObject2 = JSONObject.parseObject(jsapiTicketRes);
        String jsapiTicket=jsonObject2.get("ticket").toString();
   
        //放进redis
        logger.info("HostAddress:" +addr.getHostAddress());
        logger.info("HostName:" +addr.getHostName());
        logger.info("放进redis中的jsapiTicket=" +jsapiTicket);
        logger.info("放进redis中的accessToken=" +accessToken);
        redisCache.setCacheObject("jsapiTicket", jsapiTicket);
        redisCache.setCacheObject("accessToken", accessToken);
    }

注意：
appID和appsecret自己去小程序管理页里面去找（强调下:是小程序的appID不是个人的）
doGet方法是http请求，redisCache是工具类具体实现这里没有。
以上是服务端做的第一件事。

第二件
封装前端需要的几个参数，这边最好结合开发者文档去看，传送门：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

 public Map<String, String> getWxConfig(String requestUrl) throws Exception{
        //url转码
        String s = URLDecoder.decode(requestUrl,"UTF-8");
        Logger logger = LoggerFactory.getLogger(AccessTokenConfig.class);
        Map<String, String> ret = new HashMap<String, String>();
        //accessToken
        String accessToken = redisCache.getCacheObject("accessToken");
        logger.info("redis中获取的accessToken="+accessToken);
        //jsapiTicket
        String jsapiTicket = redisCache.getCacheObject("jsapiTicket");
        logger.info("redis中获取的jsapiTicket="+jsapiTicket);
        //签名随机戳
        String timestamp = Long.toString(System.currentTimeMillis() / 1000);
        //签名随机串
        String nonceStr = UUID.randomUUID().toString();
        //加密前的signature
        String sign = "jsapi_ticket=" + jsapiTicket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" + s;
        logger.info("sign:"+sign);
        //signature加密(SHA-1)
        String signature = "";
        signature = DigestUtils.sha1Hex(sign);
        //封装map
        ret.put("appId", appID);
        ret.put("timestamp", timestamp);
        ret.put("nonceStr", nonceStr);
        ret.put("signature", signature);
        ret.put("jsapi_ticket",jsapiTicket);
        ret.put("url", s);
        return ret;
    }

这里的appId还是小程序的，和上面一样
代码部分就是以上

管理页的配置

光有以上代码还不行：必须要在小程序的管理页配置上合法域名，而且必须是https的（公众号只需要http就行了），所以要去申请ssl证书，配置到自己的服务里面，我自己用的是nginx代理，配置过程这里省略了

遇到的坑

先声明一下，因为本人技术能力有限，以下有些观点不一定是正确的，可能大牛有更好的解决方式，仅仅做个参考：
1、一开始用的是自己申请的小程序，然后去用webview组件，发现根本没法用页面出不来，后来才知道个人小程序不支持webview
2、我用的小程序的appid和appsecret，但是微信接口死活调不到，实在没办法换成公众号的就行了，但是我这种小程序+公众号的开发还好，如果仅仅开发小程序的怎么办，但是微信开发文档上的确是说的用小程序的appid就行了，这个问题到现在都没解决，希望有大神能解答。
3、还有个nginx配置ssl证书那一块，在nginx的配置文件引入ssl密钥文件的时候，网上大都用的绝对路径，我试了不行，用相对路径就可以了。
4、总体来说感觉还是很繁琐的，而且还有好多细节没提到，这里也只是给大家一个大体的方向。