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

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

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

2 . 微信分享

1.微信分享，你们都作过，调用微信API 的分享接口，使用微信浏览器的右上角···去进行分享到朋友，或者分享到朋友圈，可是分享出去的是一个图文模块，更多产品需求是分享图片，识别图中二维码来进入咱们的页面或者将图片分享出去，可是微信的分享图片机制是分享长摁位置的图片，而不是将页面直接转化为图片
 2. 后台能够将分享页面，使用后台的插件进行绘图，可是后台毕竟是服务端语言，对图形文字字体的处理没有浏览器端处理的完美，好比 若是微信昵称包含emjio表情包，那么在绘图的时候就不会展现的很好，由于是是作H5页面，因此咱们可使用canvas去进行绘制图片，由于渲染在浏览器，因此对emjio的支持度很高
 
直接贴代码
html
```
   <img class="imageShare" style="display:block"/>
```
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`，并且前端绘图，比后天绘图，更容易调试和修改。