微信公众号开发遇到的一些问题

写这篇文章，主要是在前不久的微信公众号开发的时候，遇到了一些问题，记录一下，并希望其他在遇到这些问题，可以进行快速定位及处理。

1. 微信底部工具栏白条，
   1.首先，底部工具栏白条出现的原因是由于，浏览器跳转留下了历史信息，所以如果我们用H5开发时，如果需要跳转页面，使用window.location.replace这样不会留下历史信息。
   2.由前端获取微信授权，调用微信的API，微信在授权之后重定向原页面时，会出现底部工具栏白条，且回退是微信授权的空白页，体验极差，处理办法：其实授权可以让后台去调用微信授权，这样让后台重定向页面的时候，不要留下历史信息，就可以拿到微信返回过来的参数，这样也可以减少对后端的多次请求，由后端一次性返回微信返回的参数。

2 . 微信分享

1.微信分享，大家都做过，调用微信API 的分享接口，使用微信浏览器的右上角···去进行分享到朋友，或者分享到朋友圈，但是分享出去的是一个图文模块，更多产品需求是分享图片，识别图中二维码来进入我们的页面或者将图片分享出去，但是微信的分享图片机制是分享长摁位置的图片，而不是将页面直接转化为图片
 2. 后台可以将分享页面，使用后台的插件进行绘图，但是后台毕竟是服务端语言，对图形文字字体的处理没有浏览器端处理的完美，比如 如果微信昵称包含emjio表情包，那么在绘图的时候就不会展示的很好，因为是是做H5页面，所以我们可以使用canvas去进行绘制图片，因为渲染在浏览器，所以对emjio的支持度很高
 
直接贴代码
html
```
   
```
js
```
// 绘图

var canvas = document.createElement('canvas');

        canvas.width = 750;
        canvas.height = 1206;
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.onload = function () {
         var img_left = new Image();
        
         img_left.onload = function () {
                 var img_ewm = new Image();
                 img_ewm.onload = function(){
                ctx.font = "24px 黑体";
                ctx.drawImage(img, 0, 0);
                ctx.drawImage(img_left, 310, 160,115,115);
                ctx.drawImage(img_ewm, 310, 925, 115, 115);
                ctx.fillStyle = "#773f15";
                ctx.textAlign='center';
                ctx.fillText(nickName,375,138);//用户昵称
                //$('body').html(canvas);
                $('.imageShare').attr('src',canvas.toDataURL("image/jpeg"))
                 }
                 img_ewm.src='../../images/financialTest/ewm.png';//二维码
                img_ewm.crossOrigin = "anonymous";
         }
         img_left.src="/wechat/getuserImagesV2?urlHead="+urlHead;//用户头像
         img_left.crossOrigin = "anonymous";
    }
    img.src='../../images/financialTest/'+imageType;
    img.crossOrigin = "anonymous";
```

 这样，就可以直接将分享页转化为`img`，而且前端绘图，比后天绘图，更容易调试和修改。