7

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
1.3k 声望13 粉丝

抬头看看天,低头写写bug