VUE開發微信H5頁面總結

時間 2019-11-17

標籤 vue 開發微信 h5 頁面總結简体版

原文原文鏈接

寫在前面

剛入門前端的時候寫過不少的微信H5頁面，時隔多年感受應該是手到擒來，未曾想竟非常費了一些功夫。如今把本次開發過程當中遇到的問題以及我是如何解決的，作個記錄。防止本身之後再去解決解決過的問題。
github：github.com/qq9694526/v…javascript

1、微信網頁受權

網頁受權流程分爲四步，這裏只說前端須要作的，其中的第一步：跳轉受權頁面獲取code。這裏分享下個人受權邏輯（下圖），它有兩個優勢：php

受權跳轉在dom渲染以前，體驗會好一些；
本地存儲了openId，先後端均不用頻繁的與微信服務器交互。

2、微信jssdk受權

若是你頁面中有用到分享、上傳圖片、微信支付等功能，那麼須要先進行js-sdk受權。我這邊封裝成了2個方法：initConfig和setShare，方便在路由/頁面切換的時候重複調用。css

//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);
    });
 }
複製代碼

3、webpack-dev-server解決跨域

講真的全部跨域解決方案都必須有服務端的參與，誠然這個問題是瀏覽器拋出的，但讓前端去解決真的很冤。下面兩個配置讓你永遠告別跨域煩惱。本地開發用webpack-dev-server，測試生產環境用nginx。html

//接口根路徑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;
    }
}        
複製代碼

4、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…vue

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

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

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

這個報錯甚是詭異，由於前端和後端代碼均沒有「處理異常」這4個字。原本想甩鍋給微信無論了的，但隨後在作限制上傳圖片大小功能的時候陰差陽錯的給解決了。
問題緣由：後端tomcat服務默認設置表單提交數據大小上限爲2M，大於2M就會報錯。
解決辦法：後端大神把server.xml中maxPostSize的值改成-1後解決。
參考資料：blog.csdn.net/w1875690157…webpack

7、正確導出圖片格式

這個項目首頁基本是由圖片堆砌成的，一開始切出來的圖(默認.png)壓縮後在400k-1.3M之間。一開始還覺得PSD素材有問題。直到項目最後才閃回，想起圖片格式的知識點，改導出成.jpg格式後壓縮出來的圖片基本控制在100K之內了。具體的.png.jpg這些圖片格式的知識有興趣的本身查。ios

8、vuex使用之同步用戶信息

講道理小項目是不該該用vuex的，可是用着確實爽，即簡單又省心省力。因爲我老是忘記它的方法名，因此在這裏貼下代碼，方便之後隨時cv。nginx

//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);
複製代碼

9、使用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);
});
複製代碼

10、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%;
    }
}
複製代碼

11、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);
}
複製代碼