私の2017年度総括

2017年は充実した1年で、この年はこのいくつかのプロジェクトを書きました:1つの微信公衆番号開発、2つのhybrid app開発、1つのPC側バックグラウンドerp、そして個人ブログプロジェクト.
使用されるテクノロジスタック
1、PC側erpはメンテナンスプロジェクトに属し、技術スタックはjq+bootstrapである.
2、モバイル側の技術スタックはwebpack+vue+sass+mint-uiである.
3、個人ブログプロジェクト技術スタックは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の操作を行い、コードは以下の通りです.

    
        
    
    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
その他
他にはありません.独身犬は1匹で、コードを引くしかありません.
まとめ
2017はついにvueの実際のプロジェクトに着手し、これまでは自分で勉強していたが、勉強の過程で踏んでいなかった穴は大きくも小さくもたくさんあった.hybrid appの開発を行う際、androidやiosの同級生とコミュニケーションすることが大切です.これまでこのようにやり取りしたことがありません.デバッグに時間がかかりました.転んでも怖くありません.恐ろしいのはあなたが起きていないことです.足りないところは、githubをぶらぶらしているのが少なすぎて、プロジェクトなどがきちんと整理されていないこと、文章を書くことが少ないこと、総括的な文章を書くべきだということです.2018頑張れ!以上!