2018项目总结

2018项目总结

针对Vue框架

• mixin （复用逻辑好方案 https://cn.vuejs.org/v2/guide/mixins.html#基础
  组件引用：

import checkstatus from "@/mixin/CheckStatus.js"
export default {
    mixins: [checkstatus,mergecart],
};

CheckStatus.js:

// 父组件引用请粘贴如下内容 并将mixins中对应好引入 mixins: [checkstatus],
// import checkstatus from "@/mixin/CheckStatus.js"
export default {
    data() {
        return {
            isLogin:false,
            idStatus: 0, // 1:未提交 2:审核中 3:已审核 4:失败
            cardBinded: false,
			cartQuantity:0,
            basicParams:{
                token: this.getStore("token"),
                channelId: $globalVar.channelId 
            }
        }
    },
    methods: {
        /*
        @TODO:判断用户是否已登录
        @author:CKP
        @return:isLogin boolean
        */   
        async checkLogin(){
            let token = this.basicParams.token;
            if(token) {
                await this.$http.post('pri/api/accountInfo/goldAccountInformationQuery',{...this.basicParams},false).then((res) => {
                    if(res.data.rntCode.toLowerCase() == 'ok') {
                        this.isLogin = true;
                    } 
                })
            }
            console.warn('是否已登录:'+ this.isLogin)
        },
        /*
        @TODO:判断身份验证状态
        @author:CKP
        @return:idStatus 1:未提交 2:审核中 3:已审核 4:失败
        */ 
        async checkIdStatus() {
            await this.$http.post("api/goldCertification/queryGoldCertificationStatus",{...this.basicParams},false).then(res => {
                if (res.data.rntCode.toLowerCase() == "ok") {
                    this.idStatus = res.data.responseParams.key;
                }
                if (res.data.rntCode.toLowerCase() == 'nocertification'){
                    this.idStatus = '1';
                }
            });
        },
    }
}

• 表单输入验证

限制input框输入内容字符时
1）若不会因绑定值变化而触发请求，可采取watch+正则表达式方案来进行动态屏蔽非法字符
2）若绑定值的变化会触发请求，使用方案一会导致页面/组件初始化时触发多次冗余请求，建议将正则验证方法与input控件通过【@input】来绑定（PS：不用@keyup绑定的原因是在中文单词时按住shift键，或通过手机联想单词选词时，输入的值不能被keyup事件监听到，而上述操作均能被@input监听到）

针对通用技术相关

• JSBridge

let setupWebViewJavascriptBridge = function (callback) {
    if (window.WebViewJavascriptBridge) {
        return callback(window.WebViewJavascriptBridge);
    }
    if (window.WVJBCallbacks) {
        return window.WVJBCallbacks.push(callback);
    }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function () {
        document.documentElement.removeChild(WVJBIframe)
    }, 0)
}

const BRIDGE = {
    // H5注册方法，供App调用
    getAppToken: function () {
        setupWebViewJavascriptBridge(function (bridge) {
            bridge.registerHandler("transmitToken", function(data) {
                localStorage.setItem('tokenTest',data);
                localStorage.setItem('token',data);
                console.log('App返回给我了：')
                console.log(data)
            })
        })
    },
     // H5调用App注册的原生登录
    callAppLogin: function () {
        let currentUrl = location.href;
        let params = {
            currentUrl
        }
        setupWebViewJavascriptBridge(function (bridge) {
            bridge.callHandler("app_login", params)
        })
    },
     // H5调用App注册的调往原生首页方法
    callAppIndex: function () {
        let currentUrl = location.href;
        let params = {
            currentUrl
        }
        setupWebViewJavascriptBridge(function (bridge) {
            bridge.callHandler("app_index", params)
        })
    },
}

export default BRIDGE;

• 与App嵌套交互
• 页面初始化
• 大数据埋码

确保测试环境协议https，否则会有PC浏览器发送成功，而移动设备无法发送成功问题
动态配置的页面，每个组件加载完本组件渲染数据依赖的接口后，都要调用查找埋点dom元素的方法，而该方法在注册click事件时，需要先进行事件解绑，否则会绑定多次导致数据偏差

• 清除本地缓存

谨慎稳妥思考本地数据何时，在何地存储，以及何时何地删除，与App嵌套交互式尤为重要，根据交互方式不同（地址栏传参考虑在路由处添加监听，JSBridge则需要全局注册），在用户注销登录时清除什么，在用户进入登录页面时清除什么，在App token传输更新时 清除及更新什么， 均需要认真思考

针对组员协作

• 融入团队

第一时间破冰，将新伙伴介绍给大家，将组内成员技能擅长方面及为人处事风格做简要说明，安排一些需要协作的简单事宜进行协作购以达到快速融入队伍

• 融入项目

开通新人相关权限，如OA账号，git，svn，phabricator绑定开发组等，期待安置的项目要优先本地启动并熟悉项目技术点与代码，针对项目业务需求，项目代码结构及页面间关系进行详细讲解

针对与不同部门间沟通及注意点

• 对接UI

1）UI提供设计稿，根据原型查看有无遗漏页面，弹窗，及切图，以及各个页面初始化无数据时的提示相关设计是否完备
2）某些固定尺寸及宽高比展示内容，提醒设计严格执行（如业务方提供商品素材为5:4比例，设计方也应尽量按照此比例进行相关展示设计

• 对接产品

人无完人，PRD文档难免有疏漏，开发在需求评审会以及评审后，均应将需求及操作流程在脑中有思考及模拟，留意各种情况是否考虑完善，如文本溢出，各种初始化空值及极值情况的交互等

• 对接运维

本地安装新插件或版本改动，均需及时告知运维同事进行及时同步，否则在代码提测部署时，需要花费大量时间解决部署问题（npm node sass 版本尤为注意，以及跨平台cross-env的必要安装均需考虑在内