移動端微信微信公衆號作題小遊戲踩的小坑

         前幾天公司接到一個在微信公衆號中要開發一個作題的小遊戲，裏面大概內容是作八道題，根據答對多少題，最後生成一個圖片格式的聘書。微信默認長按圖片能夠發給好友，點擊分享能夠分享到朋友圈，可是不能直接將圖片分享到朋友圈，須要先保存圖片到本地才能夠往朋友圈發，或者分享帶連接的地址，微信默認分享朋友圈連接是沒有縮略圖的，自定義能夠添加。

          首先項目使用的是vue.js寫的界面，數據都是放到js中的，裏面的題都是單選，每當有選中的選項就會跳到第二頁，以此類推，知道最後一題，有選中的就會出現提交按鈕，提交以後，根據答題對的個數，判斷相應的職位，而後將職位回顯到html頁面上，而後經過 「html2canvas.js」 這麼一個canvas插件將圖片生成放到最頂層便可，這時候會出現一個問題，生成的圖片不清晰，朕也是在網上各類教程超看，絕大多數人說將頁面放大到兩倍，生成圖片縮小便可，但是我試了好屢次最終失敗告別了這個方案，決定放棄使用清晰的圖片。後來想一想，客戶看到確定回不滿意，怎麼辦！ 怎麼辦！ 

         以後下班回到家，又作了個demo.各類測試。各類調試，依然失敗，後來把頁面順便又看了一遍，忽然發現head中有這麼一句代碼  「

        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />」

        這段代碼相信你們都不陌生，過多的不解釋了， 我把這段代碼修改爲 「<meta name="viewport" content="user-scalable=no" />」  神奇的事情就發生了，再次生成圖片的時候圖片竟然和html同樣清晰，我反覆試了好屢次，對頁面沒什麼影響，ok，搞定，大快人心啊！這個坑我用了兩天時間解決