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的必要安装均需考虑在内