個人2017年度總結

2017是充實的一年，這一年寫了這幾個項目：一個微信公衆號開發，兩個hybrid app開發，一個PC端後臺erp，還有我的博客項目。

所用到的技術棧

一、PC端erp屬於維護項目，技術棧爲jq+bootstrap。
二、移動端的技術棧是webpack+vue+sass+mint-ui。
三、我的博客項目技術棧是php+webpack+vue+sass+element-ui。

hybrid app開發

與原生app交互所使用的是WebViewJavascriptBridge，github地址：WebViewJavascriptBridge。
WebViewJavascriptBridge用來實如今Web前端與客戶端之間進行消息傳遞，有iOS版本與Android版本，因此能夠統一消息通信機制。

遇到的問題

1）場景：公衆號項目每次跳轉的時候總會有invalid signature出現。

解決方法：每次頁面跳轉的時候都initWx，在app.vue裏面

created() {
    this.$router.beforeEach((to, from, next) => {
        wx.config({
            debug: true, // 開啓調試模式
            appId: '', // 必填，公衆號的惟一標識
            timestamp: , // 必填，生成簽名的時間戳
            nonceStr: '', // 必填，生成簽名的隨機串
            signature: '',// 必填，簽名
            jsApiList: [] // 必填，須要使用的JS接口列表
        });
    }）
}

2）場景:audio標籤進行音頻播放在微信不會播放或者不會自動播放

解決方法:用js給audio加上src，用js進行autoplay的操做，代碼以下。

<audio id="music" loop autoplay="autoplay">
        <source  type="video/mp3" >
        <source  type="video/ogg" >
        Your browser does not support HTML5 video.
    </audio>
        
    
    mounted(){
        let musicEle=document.querySelector('#music');
        musicEle.src="xxx.mp3";
        //--建立頁面監聽，等待微信端頁面加載完畢 觸發音頻播放
        document.addEventListener('DOMContentLoaded', function () {
            function audioAutoPlay() {
                var musicEle0 = document.getElementById('music');
                    musicEle0.play();
                document.addEventListener("WeixinJSBridgeReady", function () {
                    musicEle0.play();
                }, false);
            }
            audioAutoPlay();
        });
        //--建立觸摸監聽，當瀏覽器打開頁面時，觸摸屏幕觸發事件，進行音頻播放
        document.addEventListener('touchstart', function () {
            function audioAutoPlay() {
                var musicEle0 = document.getElementById('music');
                    musicEle0.play();
            }
            audioAutoPlay();
        });
    }

3）場景：記錄頁面加載時間不許確。

解決方法：使用window.performance新特性,網上資料衆多，此處很少贅述。

移動端項目的一些優化

a）去除console：在build/webpack.prod.conf.js

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    drop_console: true,//去除console.log
    pure_funcs: ['console.log'],//去除console.log
  },
  sourceMap: false,
}),

b）去除打包的.map：config/index.js

productionSourceMap: false,

c）vue組件按需加載：參考文檔 vue-router官方文檔

const abc = () =>import ('@/components/abc')
export default new Router({
  routes: [
    {
      path: '/abc',
      name: 'abc',
      component: abc
    },
  ]
})

d）項目的體積問題：服務端開啓gzip，資源放在cdn上。查看項目的各模塊的體積大小可以使用webpack-bundle-analyzer，以前文章有所介紹，點擊此處

http請求封裝

沒有使用axios，本身封裝了平時用的get，post請求。github地址

移動端log查看工具

常常用的是 vConsole

其餘

沒有其餘，單身狗一隻，只能擼代碼。

總結

2017終於着手vue的實際項目，以前都是本身學習的，學的過程當中沒踩到的坑大大小小都碰到好多。進行hybrid app的開發時，與android和ios同窗溝通是很是重要的,以前沒這樣交互過，調試花了很久，摔倒了不可怕，可怕的是你沒爬起來。不足的地方有：github逛的仍是太少，項目什麼的都沒有好好整理，還有寫文章寫的少，應該多寫些總結性的文章。2018加油！以上！