VUE開發微信H5頁面總結

CV程式設計師發表於2019-03-03
VueH5

寫在前面

剛入門前端的時候寫過很多的微信H5頁面，時隔多年感覺應該是手到擒來，不曾想竟很是費了一些功夫。現在把本次開發過程中遇到的問題以及我是如何解決的，做個記錄。防止自己以後再去解決解決過的問題。
github：github.com/qq9694526/v…

一、微信網頁授權

網頁授權流程分為四步，這裡只說前端需要做的，其中的第一步：跳轉授權頁面獲取code。
這裡分享下我的授權邏輯（下圖），它有兩個優點：

  1. 授權跳轉在dom渲染之前，體驗會好一些；
  2. 本地儲存了openId，前後端均不用頻繁的與微信伺服器互動。
Alt

二、微信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;
}
複製程式碼

參考資料：blog.csdn.net/guxuehua/ar…

五、ios路由/跳轉頁面後分享失效

問題現象：ios微信路由到另一個頁面選擇圖片OK，但分享失效，重新整理這個頁面分享就正常了。
已累計嘗試解決超過8小時，至今未果。
參考資料：www.zhihu.com/question/59…

六、上傳圖片報錯：處理異常

這個報錯甚是詭異，因為前端和後端程式碼均沒有“處理異常”這4個字。本來想甩鍋給微信不管了的，但隨後在做限制上傳圖片大小功能的時候陰差陽錯的給解決了。
問題原因：後端tomcat服務預設設定表單提交資料大小上限為2M，大於2M就會報錯。
解決辦法：後端大神把server.xml中maxPostSize的值改為-1後解決。
參考資料：blog.csdn.net/w1875690157…

七、正確匯出圖片格式

這個專案首頁基本是由圖片堆砌成的，一開始切出來的圖(預設.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
<div class="poster-img-wrap">
    <div class="poster-img-place"></div>
    <img class="poster-img" :src="user.picAddress" alt="">
</div>
複製程式碼
//less
.poster-img-wrap {
    position: absolute;
    top: 28%;
    left: 0;
    right: 0;
    width: 80%;
    margin: 0 auto;
    .poster-img-place {
        width: 100%;
        padding-top: 125%;
    }
    .poster-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
複製程式碼

十一、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);
}
複製程式碼

其實能解決全靠這篇博文，這裡就不贅述了。blog.csdn.net/nongweiyila…
神奇的是，我能看到這篇文章全來賴於地鐵上無聊開啟了很久沒開啟的CSDNapp，切到前端分類，“不滾動”三個字立馬映入眼簾，點進去的第一眼 ，就感覺是對的人了。迷茫的時候就看書，古人誠不我欺！

一些忠告

  • 能小程式就別網頁開發；
  • 不意淫不揣摩待定的需求；
  • 堅持看圖作業的優良傳統；
  • 迷茫的時候就看書，焦慮的時候去學習；

相關文章