Notes for a front-end developer, esyou.net

0%

其实在使用了多次phonegap-plugin-barcodescanner插件后,发现这个插件其实有个问题,就是在android手机上,扫码界面没有取消按钮或返回按钮,但是ios上却提供了一个取消按钮。当我们点击返回按钮时,会导致android上触发两次backButton的事件,从而导致页面回退2页,本来我们只是想关闭扫码页面而已,但却在关闭扫码页面后,当前页面又返回到上一页。
以下场景应用在ionic上,如果是非ionic应用,请根据cordova官方提供的监听backButton事件来进行监听是否触发了返回按钮。

barScannerServicce.ts

对phonegap-plugin-barcodescanner进行封装,并手动修改对应的状态

阅读全文 »

在使用cordova开发APP的时候会发现,在安卓上会出现部分问题,就比如我们想要保持当前Cordova APP的状态,然后去查看其他APP这种简单的APP间的切换(简单说就是当你从Cordova APP切换到微信或者其他程序的时候),就会导致Cordova APP直接被后台kill,在ios上好像没有这样的问题发生。
为了防止出现这种问题导致体验性差我们可能需要其他方式对此问题进行解决,经过查阅Cordova官方文档发现,其实Cordova提供了以下一些监听事件

deviceready,resume和pause三个事件就是我们这次的重点了,从字面意思对这三个事件进行理解,可以得知deviceready就是设备准备好了,resume是设备恢复(或者理解成APP恢复),pause就是暂停(APP暂停),在相应的页面中编写以下代码我们可以监听到APP目前的暂停与恢复状态,而由此来判断APP是否处于激活状态。

阅读全文 »

使用cordova或者ionic进行app开发时,在浏览器端总是无法监听到cordova插件的运行效果,我们总是需要将app安装到手机上进行运行查看,但是在手机上我们仅能进行查看运行效果,如果哪里出错了我们并无法发现,也不会报console错误,chrome为我们提供了一个很不错的设备调试工具,通过chrome的设备调试工具,我们可以连接到手机以及模拟器,并进行监听运行状态。
如果你使用的是手机进行调试,那么请打开你的usb调试功能,否则chrome无法识别你的设备,我使用的是android逍遥游模拟器,下面就来看看如何进行调试吧!

手机USB调试打开,数据线连接到电脑

在命令行输入

1
adb devices
阅读全文 »

由于之前遇到一个项目使用的ionic中的tabs来做导航条,实际在使用中,总是觉得怪怪的,并且不只是影响到使用效果,更是发生了很多令我费解的问题,由于导航级别太多、分类太复杂,从而导致了tabs的展示令人头痛。不过由于项目已经固化了,没法再进行相应修改和调整,目前也没有重构的打算。也是由于这个一个tabs,当时让我想到了使用Slides组件来打造一个导航条。大家可以先看一下效果:

根据Slides的滑动特性,其实还是可以做出很漂亮的导航效果来,下面直接上代码,如果对slides不是很了解的,可以查看相关官方文档
https://ionicframework.com/docs/api/components/slides/Slides/

阅读全文 »

有时候在处理某些URL时,可能会遇到404等情况,比如我们在国内使用谷歌地图api一样,我们在请求的时候可能会发生404问题,这个时候我们又想去判断下当前url为404的话,我们则采用其他地图的api,当然我这里所说的仅仅只是一个使用场景,可能你也会遇到其他更多场景,并且也需要验证当前URL的有效性,因此我就直接采用了XMLHttpRequest的方式进行对URL的有效性进行验证。当然对于谷歌地图这个场景,我不建议大家使用这种方法啦,毕竟谷歌地图的api总是抽风,有时候可以访问有时候又不能访问,并且经常不会出现404,基本都是延时很久,所以这个方法不适用与谷歌地图与百度地图的切换判断。
代码及其简单,并且测试也通过了,大部分情况下只要遇到404页面,到能判断到是否有效

阅读全文 »

http拦截器的使用主要用于http请求,比如设置http请求头,常用于header中包含token或者cookie,以及设置请求方式为 application/x-www-form-urlencoded 或 application/json等,也可以对请求的api进行拦截。

在angular4中使用 @angular/common/http进行http请求,来做拦截器,相关代码如下:

InterceptorService.ts(此处为ionic3框架使用的方法,angular4 WEB请看下一个实例代码)

阅读全文 »

expressJS是个很轻量且简单的JavaScript后端框架,基于nodeJS开发。可以利用express简单的就可以输出reset api,当然它可以连接任意数据库。

准备工作

1、安装nodeJS(请自行安装)

2、安装express-generator(采用全局安装)

npm install express-generator -g

3、创建项目(我采用的是ejs模板引擎)

express –view=ejs myapp

4、连接mysql,请自行安装mysql数据库,我们需要安装mysql依赖

npm i mysql

创建数据库名为chat并创建数据库表:

1
`CREATE TABLE IF NOT EXISTS message(
2
            id char(100) PRIMARY KEY,
3
            from_user_id int(20) NOT NULL,
4
            to_user_id int(20) NOT NULL,
5
            read_status int(1) NOT NULL DEFAULT 0,
6
            content text NOT NULL,
7
            create_time timestamp NOT NULL DEFAULT NOW()
8
        ) ENGINE=InnoDB DEFAULT CHARSET=utf8;`
阅读全文 »

为了保证全段传递都后端的数据安全性,比如用户登录时输入的密码,在post发送请求中可能会直接暴露了明文。因此可能需要前端进行相应的加密传递到后端,再由后端进行解密后再继续操作。

我使用base64的加密方式对密码进行加密,不过大家都知道base64很容易就被破解了,因此,我会替换掉几个base64生成字符串中的字母,这样就可以达到别人很难破解的目的了。具体直接看代码!

阅读全文 »

最近升级了cordova到7.1.0后,发现执行打包命令ionic build android的时候就出现了spawn EACCES的错误,搞了半天,到google搜索了半天,找到的解决方法都是直接使用ionic platform rm android;ionic platform add android的方法去解决,但是我试过很多次后,竟然没有任何效果,我直接怀疑起了我自己的人生观。看来google好像也没有找到我需要的答案啊,看来老外的解决办法也是超级LOW啊!都是一个方法,总之我从各类国外的网站寻找答案,最终我被打败了,最终还是使用百度搜索到了答案,看来百度并不坏啊!还是咋们中文强悍。
其实出现这个问题主要是由于Android Stdudio中的gradle权限不够导致的android无法打包。下面我们就来设置一下相关权限吧!
此方法仅限于Mac以及linux平台,Windows平台的朋友请自寻解决方法。
在Android Stdudio安装之后,有这么一个目录
/Applications/Android\ Studio.app/Contents/gradle/gradle-4.1/bin/gradle
正是由于我们没有权限操作这个目录,由此才需要将此目录设置一下权限,可以设置为777,也可以设置为755,随便你这么设置。使用下面的命令命令设置

1
sudo chmod 755 /Applications/Android\ Studio.app/Contents/gradle/gradle-4.1/bin/gradle

上面代码中Android\ Studio.app,一定要有“\”,否则会报错,这是Mac下对目录的处理,linux中也许不需要这样写命令哦!

使用nodeJS的addons模块进行处理中文字符的时候,总是乱码。期间查询过很多关于C++或者C的中文乱码解决办法,但是大多都是直接在原生的C以及C++中使用,并没有专门的在V8引擎中直接使用的实例,由此我从网上拷贝了几个代码过来后,发现编译的过程中一直都是报错的,也就是说无法直接使用啊!通过跟底层开发的同事的不断努力,终于在nodeJS中搞出来了编码转换的问题,并且测试通过,代码如下:

1
int code_convert(char *from_charset,char *to_charset,char *inbuf,size_t* inlen,char *outbuf,size_t* outlen){
2
  iconv_t cd;
3
  int rc;
4
  char **pin = &inbuf;
5
  char **pout = &outbuf;
6
7
  cd = iconv_open(to_charset,from_charset);
8
  if (cd==0) return -1;
9
  std::memset(outbuf,0,(int)(*outlen));
10
  if (iconv(cd,pin,inlen,pout,outlen)==-1) return -1;
11
    iconv_close(cd);
12
    return 0;
13
}
14
//UNICODE码转为GB2312码
15
int u2g(char *inbuf,size_t* inlen,char *outbuf,size_t* outlen){
16
  return code_convert("utf-8","gb2312",inbuf,inlen,outbuf,outlen);
17
}
18
//GB2312码转为UNICODE码
19
int g2u(char *inbuf,size_t* inlen,char *outbuf,size_t* outlen){
20
  return code_convert("gb2312","utf-8",inbuf,inlen,outbuf,outlen);
21
}

使用方法

1
int inLen = strlen(ctext);
2
  size_t inLenSize,outLenSize;
3
  inLenSize = inLen;
4
  outLenSize = 256;
5
  char outBuf[outLenSize];
6
  //printline();
7
  int convLen = u2g(ctext, &inLenSize,outBuf,&outLenSize);