一个Bug的修复,促使我写了一个package

一个Bug的修复的经历,促使我写了一个package

Kntt

1 minute read

项目地址:vue-webview-js-bridge 主要功能:基于WebViewJavascriptBridge开发的webview-js-bridge的vue插件,后面废话较多,可以直接看项目。如果刚好闲来无事,权当打发时间 故事背景 本人前端,在一个移动办公APP团队。由于业务简单,并没有使用RN,WEEX等技术。简单的使用native做了一个壳,主要逻辑都是前端控制。主技术栈是Vue. bug出现 在一段时间内,团队接到多人反馈,APP每天都需要重新登陆。作为团队的前端我很诧异,因为登陆大token在前端保存,有效期是三天,怎么可能会每天都要登陆呢? 排查原因 token有效期三天这个肯定没有问题 团队成员手机都没出过问题,证明逻辑没问题 收集问题反馈人手机信息,发现所有反馈人员的手机有一个共同点,储存空间都不足(ios),问题也主要集中在苹果手机 定位问题原因,可能是因为手机储存空间不足,把储存的token清理了。按着这个思路开始排查… 难道是手机内存空间不足,把储存的token当作没用的信息清理了?(token存在localstorage里面)。 通过google发现,ios确实存在这种情况,当手机储存空间不足时候会把系统认为无用的信息清理掉,给主要程序提供运行环境。 问题复现 找到一台储存空间不足的苹果测试机,登陆到APP后,找一部非常大的电影下载。这时候系统就会清理空间来满足下载电影的需求。结果发现APP需要重新登陆了。问题复现,原因确认。 解决问题 一个小APP,仅仅为了储存token而引入sqlite之类的本地数据库,很有些大材小用。但是localstorage,cookie等能储存的地方又都在系统清理的范围内。最后决定把token储存在native端。 解决方案 native开发类似localstorage的功能 token存入native端 前端启动时查询native端是否存在token,存在就同步到localstorage,不存在,跳转登陆页面。 其他逻辑不变 方案确定,一个字,撸起袖子一顿猛干。。。 坑中有坑 你说难受不难受…,就不描述经过了,心疼。直接说结论了 前端和Native端通信采用的是WebViewJavascriptBridge,问题就出在这里,见代码: import jsBridge from ‘./utils/native’ // 省略n行… router.beforeEach((to, from, next) => { if (to.meta.auth) { // 问题出在这里,从APP启动到vue运行到这里,jsBridge实例还未初始化完成,导致jsBridge是undifined jsBridge.callHandler(‘getStorage’, {key: ‘token’}).then(res => { let token = res.

[Flutter-前端视角]学习总结

学习flutter过程的一些个人简介,包括前三篇笔记,能容不多,仅是个人觉得需要注意的地方,后续还会继续更新,欢迎一起探讨~

Kntt

3 minute read

[Flutter-前端视角]dart语言学习笔记(1) [Flutter-前端视角]dart语言学习笔记(2) [Flutter-前端视角]dart语言学习笔记(3) 对应的前端HTML标签 HTML里面的标签在flutter里面叫做Widget,但是Widget并不是html里面的标签,因为css里面的一些属性也处理成相应的Widget了。 也就是说Widget包含标签和CSS属性 h1~h6,p,span文字相关标签 // Text类,可以看作是块级的文字显示 new Text( "Lorem ipsum", style: new TextStyle( fontSize: 24.0 fontWeight: FontWeight.w900, fontFamily: "Georgia", ), ) // 行内文字使用TextSpan类 new TextSpan( style: bold24Roboto, children: <TextSpan>[ new TextSpan(text: "Lorem "), new TextSpan( text: "ipsum", style: new TextStyle( fontWeight: FontWeight.w300, fontStyle: FontStyle.italic, fontSize: 48.0, ), ), ], ) 这两个类都只能处理文字样式,fontsize, fontweight等。间距等属性要借助其他类去处理 img标签 // 网络图片 Image.

[Flutter-前端视角]dart语言学习笔记(3)

学习flutter过程,个人对于dart的见解,以及学习过程的记录,欢迎指正~

Kntt

2 minute read

类和对象 Dart是一门使用类和单继承的面向对象语言 >所有的对象都是类的实例,并且所有的类都是Object的子类 定义 类的定义用class关键字 如果未显式定义构造函数,会默认一个空的构造函数 使用new关键字和构造函数来创建对象 2.构造函数 如果只是简单的参数传递,可以在构造函数的参数前加this关键字定义或者参数后加: 再赋值 没有函数体的函数可以直接写;来结束函数声明 class Point { num x; num y; num z; // 第一个值传递给this.x,第二个值传递给this.y, 类似js中的解构赋值 Point(this.x, this.y, z) { this.z = z; } // 命名构造函数,格式为Class.name(var param) Point.fromList(var list): x = list[0], y = list[1], z=list[2]; //当然,上面句你也可以简写为:this相当于自身的构造函数 //Point.fromList(var list):this(list[0], list[1], list[2]); String toString() => ‘x:$x y:$y z:$z’; } void main() { var p1 = new Point(1, 2, 3); var p2 = new Point.