微信公衆號開發遇到的一些問題

寫這篇文章，主要是在前不久的微信公衆號開發的時候，遇到了一些問題，記錄一下，並但願其餘在遇到這些問題，能夠進行快速定位及處理。

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`，並且前端繪圖，比後天繪圖，更容易調試和修改。