我的2017年度总结

2019年8月24日 116次阅读 来源: T_one

2017是充分的一年，这一年写了这几个项目：一个微信民众号开辟，两个hybrid app开辟，一个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的操纵，代码以下。

    <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加油！
以上！

    原文作者：T_one
    原文地址: https://segmentfault.com/a/1190000013326167
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞