2017是充实的一年。今年写了几个项目：一个微信公众号开发，两个hybridapp开发，一个PC后台erp，一个个人博客项目。使用的技术栈1.PC端erp是维护项目，技术栈是jq+bootstrap。2、移动端的技术栈是webpack+vue+sass+mint-ui。3、个人博客项目的技术栈是php+webpack+vue+sass+element-ui。Hybridapp开发和nativeapp交互使用WebViewJavascriptBridge，github地址：WebViewJavascriptBridge。WebViewJavascriptBridge用于实现Web前端与客户端之间的消息传递。有iOS和Android版本，可以统一消息通信机制。遇到的问题1）场景：公众号项目每次跳转都会出现invalidsignature。解决方法：每次页面跳转initWx，created()inapp.vue{this.$router.beforeEach((to,from,next)=>{wx.config({debug:true,//开启调试模式appId:'',//必填，公众号的唯一标识timestamp:,//必填，生成签名的时间戳nonceStr:'',//必填，生成签名的随机字符串signature:'',//必填，签名jsApiList:[]//必填，需要使用的JS接口列表});})}2)场景：audio标签不会播放或者微信不会自动播放解决方法：使用js给audio添加src，使用js进行自动播放操作，代码如下。您的浏览器不支持HTML5视频。mounted(){letmusicEle=document.querySelector('#music');musicEle.src="xxx.mp3";//--创建页面监听器，等待微信页面加载并触发音频播放.play();document.addEventListener("WeixinJSBridgeReady",function(){musicEle0.play();},false);}audioAutoPlay();});//--创建一个触摸监听器，当浏览器打开页面时，触摸屏幕触发事件播放音频（'音乐'）;musicEle0.play();}audioAutoPlay();});}3)场景：记录页面加载时间不准确解决方法：利用window.performance的新特性，网上资料很多，这里不再赘述。移动项目的一些优化a)删除控制台：在build/webpack.prod.conf.jsnewwebpack.optimize.UglifyJsPlugin({compress:{warnings:false,drop_console:true,//删除console.logpure_funcs:['console.log'],//去掉console.log},sourceMap:false,}),b)去掉打包的.map:config/index.jsproductionSourceMap:false,c)Vue组件按需加载：参考官方vue-routerdocument文档constabc=()=>import('@/components/abc')exportdefaultnewRouter({routes:[{path:'/abc',name:'abc',component:abc},]})d)项目大小：服务端启用gzip，资源放在cdn。查看项目各个模块的大小，可以使用webpack-bundle-analyzer，上一篇介绍过。点这里不使用axios封装http请求，自己封装平时的get和post请求。github地址移动端日志查看工具，经常使用vConsole，别的不说。只有一只只会编码的单身狗。总结一下，终于在2017年开始了vue的实际项目，之前是自学的，在学习过程中遇到了很多没有踩到的坑。在开发HybridApp的时候，跟android和ios的同学交流很重要。以前从来没有这样交互过，调试了很久。摔倒并不可怕，可怕的是没有爬起来。不足之处是：访问github的人还是太少，项目组织的不好，写的文章也很少。应该写更多的结论性文章。2018年加油！多于！
