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

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

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