剛入門前端的時候寫過很多的微信H5頁面，時隔多年感覺應該是手到擒來，不曾想竟很是費了一些功夫。現在把本次開發過程中遇到的問題以及我是如何解決的，做個記錄。防止自己以後再去解決解決過的問題。
一、微信網頁授權
網頁授權流程分為四步，這裡只說前端需要做的，其中的第一步：跳轉授權頁面獲取code。 這裡分享下我的授權邏輯（下圖），它有兩個優點：
- 授權跳轉在dom渲染之前，體驗會好一些；
- 本地存儲了openId，前後端均不用頻繁的與微信服務器交互。
二、微信jssdk授權
如果你頁面中有用到分享、上傳圖片、微信支付等功能，那麼需要先進行js-sdk授權。我這邊封裝成了2個方法：initConfig和setShare，方便在路由/頁面切換的時候重複調用。
//main.js
import wxsdk from './config/wxsdk.js' //該模塊提供initConfig和setShare方法，具體代碼太長見github
Vue.prototype.wxsdk = wxsdk;//掛載到全局
//使用
created() {
this.wxsdk.initConfig(location.href.split("#")[0], () => {
this.wxsdk.setShare(this.user.openId);
});
}
三、webpack-dev-server解決跨域
講真的所有跨域解決方案都必須有服務端的參與，誠然這個問題是瀏覽器拋出的，但讓前端去解決真的很冤。下面兩個配置讓你永遠告別跨域煩惱。本地開發用webpack-dev-server，測試生產環境用nginx。
//接口根路徑http://47.105.59.***:9090/zt-wx
//以vue-cli搭建的項目config舉例 config/index.js
dev: {
proxyTable: {
'/zt-wx': {
target: 'http://47.105.59.***:9090', //目標接口域名
changeOrigin: true //是否跨域
}
},
}
//實際發起請求時的url
this.http.get(`/zt-wx/api/wx/info`).then(); //http是我自己對axios的再封裝
//nginx代理配置
server {
location /zt-wx {
proxy_pass http://47.105.59.***:9090;
}
}
四、iso初次加載白屏、跳轉白屏
問題現象： ios頁面初次加載白屏，刷新後正常，但切換到其他頁面再後退，又會白屏。
問題原因：在ios機器上使用webview開發Vue項目時候，go history(-1)，無法將body的高度拉掉，使得內容被遮住了。
解決辦法：html，body都是100%，#app撐起了父元素的高度，但是瀏覽器默認的滾動scroll並不是#app，而是body,某些因素，造成返回history 後，無法復原（ios 的鍋），為此，我們將#app進行了絕對定位，並讓它重新成為 scroll 的對象，從而解決問題。
#app {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
參考資料：
https://blog.csdn.net/guxuehua/article/details/79026655
五、ios路由/跳轉頁面後分享失效
問題現象：ios微信路由到另一個頁面選擇圖片OK，但分享失效，刷新這個頁面分享就正常了。
解決方式：在IOS分享出錯，但是刷新一下即可分享成功的主要原因是：vue-router切換的時候操作的都是瀏覽器的歷史記錄，iOS會把第一次剛進入時的URL作為真實URL。安卓會把當前URL作為真實URL。
根據IOS和安卓的區別我們可以用設備檢測來區分用他們
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){
// 處理iOS
} else (/(Android)/i.test(navigator.userAgent)) {
// 處理安卓
}
在IOS下我們可以把第一次進入的url保存起來，然後在使用微信SDK獲取簽名的時候使用
而安卓分享只需要每次調用encodeURIComponent(location.href.split('#')[0])即可；
六、上傳圖片報錯：處理異常
這個報錯甚是詭異，因為前端和後端代碼均沒有“處理異常”這4個字。本來想甩鍋給微信不管了的，但隨後在做限制上傳圖片大小功能的時候陰差陽錯的給解決了。
問題原因：後端tomcat服務默認設置表單提交數據大小上限為2M，大於2M就會報錯。
解決辦法：後端大神把server.xml中maxPostSize的值改為-1後解決。
參考資料：
https://blog.csdn.net/w18756901575/article/details/79374621
七、正確導出圖片格式
這個項目首頁基本是由圖片堆砌成的，一開始切出來的圖(默認.png)壓縮後在400k-1.3M之間。一開始還以為PSD素材有問題。直到項目最後才閃回，想起圖片格式的知識點，改導出成.jpg格式後壓縮出來的圖片基本控制在100K以內了。具體的.png.jpg這些圖片格式的知識有興趣的自己查。
八、vuex使用之同步用戶信息
講道理小項目是不應該用vuex的，但是用著確實爽，即簡單又省心省力。由於我總是忘記它的方法名，所以在這裡貼下代碼，方便以後隨時cv。
//config/store.js
const store = new Vuex.Store({
state: {
user: {}
},
mutations：{
updateUser(state, data){
state.user = data;
}
}
})
//在組件中使用
computed: {
user() {
return this.$store.state.user;
}
}
//在需要的時候更新數據
this.$store.commit("updateUser", user);
九、使用html2canvas生成的海報不顯示圖片
問題原因：引入的圖片資源路徑跨域造成的。
解決辦法：我先是按照官方給的那個php的方案弄的，未能解決。最後舔著臉讓後端大佬把圖片資源目錄挪到我web服務目錄下給解決的。
//安裝
npm install --save html2canvas
//引入
import html2canvas from "html2canvas";
//使用
const myPosterWrap = document.getElementById("posterWrap");
html2canvas(myPosterWrap).then(canvas => {
this.posterSrc = canvas.toDataURL("image/png");
this.uploadPosterImg(this.posterSrc);
});
十、css黑科技之放置指定比例的圖片
就是把不定寬圖片按指定比例顯示，直接上碼（1：1.25）。
//html![]()
十一、ios頁面加載不全不能滾動
問題描述 ：ios從首頁進入，跳轉其他頁面再後退到首頁，首頁只顯示一屏內容且無法滾動。
問題原因：首頁子元素的高度是動態設置的。在於ios瀏覽器內核的別緻渲染邏輯：它會預先找到相應的overflow: scroll元素，如果子元素高度高於父元素，則建立原生的scrollView實現滾動。問題就出現在這個“預先”上，它預先獲取的高度並不是子元素渲染後的真實高度。
解決辦法：給設置了滾動的#app元素下的子元素p-index設置min-height: calc(100% + 1px);
#app {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.p-index{
min-height: calc(100% + 1px);
}
複製代碼
其實能解決全靠這篇博文，這裡就不贅述了。
https://blog.csdn.net/nongweiyilady/article/details/83039868
神奇的是，我能看到這篇文章全來賴於地鐵上無聊打開了很久沒打開的CSDNapp，切到前端分類，“不滾動”三個字立馬映入眼簾，點進去的第一眼 ，就感覺是對的人了。迷茫的時候就看書，古人誠不我欺！
一些忠告
能小程序就別網頁開發；
不意淫不揣摩待定的需求；
堅持看圖作業的優良傳統；
迷茫的時候就看書，焦慮的時候去學習；
