我的2017年度总结

Taonce 发布于2019-08-26 11:47 / 500人阅读

摘要：创建页面监听，等待微信端页面加载完毕触发音频播放创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放场景记录页面加载时间不准确。

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的操作，代码如下。

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

云服务器 GPU云服务器年度总结年度盘点年度报告技术年度精选

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107569.html

2016年总结 - 收藏集 - 掘金

摘要：然而这次的文章，就像贺师俊所说的这篇文章是从程序员这个老年度总结前端掘金年对我来说，是重要的一年。博客导读总结个人感悟掘金此文着笔之时，已经在眼前了。今天，我就来整理一篇，我个人认为的年对开发有年终总结掘金又到 2016 Top 10 Android Library - 掘金过去的 2016 年，开源社区异常活跃，很多个人与公司争相开源自己的项目，让人眼花缭乱，然而有些项目只是昙花一...

DataPipeline 2019-08-20 16:04 评论0 收藏0
染陌的 2017 年度总结

摘要：写在前面看到了死月佳楠等朋友都写了关于的年度总结，总觉得自己也应该写点东西来回首过去的一年，顺便展望一下未来的年。在这份榜单上排在的位置，年也希望更上一层楼。年底跟女朋友结束了四年的恋爱长跑，成功领证。写在前面看到了死月、doodlewind、佳楠等朋友都写了关于 2017 的年度总结，总觉得自己也应该写点东西来回首过去的一年，顺便展望一下未来的 2018 年。由于之前忙于撰写《...

AdolphLWQ 2019-08-26 11:48 评论0 收藏0
2017--年度个人总结

摘要：离职新路线年的总结在这里年总结，其实在发布这个文章之前，就已经跟阿里那边再谈新的，会以的级别入职阿里闲鱼部门。总所周知，我司在月份调整了一次架构，具体如下美团调整了组织架构。 17年的总结来的更晚一点，其实是一直在犹豫要不要写，主要感觉去年一年折腾的有点凶残，连续换工作以及地点，一路走来有纠结，有痛苦，有快乐，有兴奋，有迷茫，有得有失，所以想了很久，还是来记录下这一年的关键点。离职 ...

2450184176 2019-08-22 15:19 评论0 收藏0
2017--年度个人总结

摘要：离职新路线年的总结在这里年总结，其实在发布这个文章之前，就已经跟阿里那边再谈新的，会以的级别入职阿里闲鱼部门。总所周知，我司在月份调整了一次架构，具体如下美团调整了组织架构。 17年的总结来的更晚一点，其实是一直在犹豫要不要写，主要感觉去年一年折腾的有点凶残，连续换工作以及地点，一路走来有纠结，有痛苦，有快乐，有兴奋，有迷茫，有得有失，所以想了很久，还是来记录下这一年的关键点。离职 ...

TIGERB 2019-08-01 18:41 评论0 收藏0