分类目录归档:前端开发

ionic2+使用Slides打造漂亮的导航条

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

Slides打造手机导航条
Slides打造手机导航条

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

angular2+数据更新但视图不更新的解决方法

最近项目中总是遇到一些莫名其妙的问题,当然这个项目已经存在已久,之前也有过这样的问题,现在感觉问题总是显得很突出,大部分问题都是由于数据更新后,视图无法及时更新而导致的,由于项目的代码原因,我就不多去深入为什么会发生这个问题了,主要的是说一下解决这个问题的方法。
场景
如果你在组件中定义了一个变量,当你使用console能将其值打印出来,可是我们能看到的视图中,这个变量并没有任何值或者改动。又或者你在一个点击事件中去改变相关变量的值,让其显示在视图上,但是当你点击事件触发后,变量的值是改变了,但是视图却为更新。这个时候你就可以使用以下几种方法

1、直接使用ngZong.run()

我们可以将某个要发生改变的变量或者方法直接放到ngZong.run()中。比如:
ngZong.run(()=>{this.closeNum()})

2、ChangeDetectorRef.detectChanges()

此方法本人使用的不多,并没有切确的深入了解这个方法,而且我在进行测试中,这个方法对我来说并未产生任何效果,如果你想要尝试一下,建议看一下官方文档https://angular.io/api/core/ChangeDetectorRef#!#detectChanges-anchor

3、直接使用ngDocheck()生命周期

我们可以将相关代码直接放到ngDocheck中,即可实现视图强制更新。但是一定要注意ngDocheck特别像setInterval,不论你数据是否发生改变他都会执行,并且任意一个事件都有可能触发它。因此得需要慎用,以防影响到性能

关于混合APP横屏、竖屏、翻转的解决方案

我们都知道,cordova或者phonegap都提供了一系列很牛的插件,为我们做开发省了不小力气,在app开发中,有一些app适合竖屏展示,某些app又适合横屏展示,因此我们得去设置它相关的config.xml

一、安卓上的横屏与竖屏

首先我们先来看一下android上的某些原生Activity属性
安卓 Activity 在设备上的显示方向。如果 Activity 是在多窗口模式下运行,系统会忽略该属性。Activity有以下几种属性值 继续阅读关于混合APP横屏、竖屏、翻转的解决方案

解决ionic3错误:No provider for NavController

有时候感觉ionic会发疯,比如今天我就遇到一个很奇葩的error,我一直在其他页面使用NavController或者Nav都未遇到任何问题,偏偏就在我目前新建的这个页面上出现了这样的一个error,No provider for NavController。
在网上寻找了很久的解决方法,尝试过直接使用app.getActiveNav没有成功,尝试过网上说的@ViewChild(‘Nav’) nav:NavController;也没有成功。后来在ionic论坛上找了相关解决方法,地址是:https://forum.ionicframework.com/t/why-cant-i-import-navcontroller-and-viewcontroller-into-service-or-app/40999/50
可以看到相关代码是这样的:

import { App, NavController } from 'ionic-angular';
constructor(
    public app: App,
    public navCtrl: NavController,
    ) {}
//此处才是最重要的代码
get navController(): NavController {
    return this.app.getRootNav();
}
testNav() {
    //这样使用get的navController
    this.navController.setRoot(Login);
 }

cordova-ios4.5.x与xcode打包中遇到Error code 65 for command的解决办法

iphone X的到来又给各种打包添乱了!iOS11的到来,也导致了各种升级造成的各种问题。由于之前公司项目一直在使用cordova-4.4.0,最近为了程序能够在iphone X上能够全屏,因此使用了cordova-ios4.5.x版本。假如使用的是4.4.0版本,那么在iphone X中就会有各种适配问题。因此必须得升级为4.5.x的相关版本。但是升级后导致了打包过程中出现Error code 65 for command。这样的错误按理说是不应该出现的,但是确实就发生了,最终我再查看我的一些插件过程当中发现一个名为cordova-plugin-console的插件在cordova-ios4.5.x版本中已经包含了这个插件,由此就怀疑应该是由于插件重复而导致的问题。由此我就删除了cordova-plugin-console插件,这个过程偶尔成功过,如果我再次rm ios后再次add ios后,这个问题依然又出现了!
由此,根据各种平时处理iOS问题的经验,我得到了以下相关的解决办法!
1、删除cordova-plugin-console插件

cordova plugin rm cordova-plugin-console

2、更新pod到最新版本

cd platforms/ios
pod update

如此以来,就可以开开心心的打包iOS包了!

NodeJS addons 中文乱码处理

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

int code_convert(char *from_charset,char *to_charset,char *inbuf,size_t* inlen,char *outbuf,size_t* outlen){
  iconv_t cd;
  int rc;
  char **pin = &inbuf;
  char **pout = &outbuf;

  cd = iconv_open(to_charset,from_charset);
  if (cd==0) return -1;
  std::memset(outbuf,0,(int)(*outlen));
  if (iconv(cd,pin,inlen,pout,outlen)==-1) return -1;
    iconv_close(cd);
    return 0;
}
//UNICODE码转为GB2312码
int u2g(char *inbuf,size_t* inlen,char *outbuf,size_t* outlen){
  return code_convert("utf-8","gb2312",inbuf,inlen,outbuf,outlen);
}
//GB2312码转为UNICODE码
int g2u(char *inbuf,size_t* inlen,char *outbuf,size_t* outlen){
  return code_convert("gb2312","utf-8",inbuf,inlen,outbuf,outlen);
}

使用方法

  int inLen = strlen(ctext);
  size_t inLenSize,outLenSize;
  inLenSize = inLen;
  outLenSize = 256;
  char outBuf[outLenSize];
  //printline();
  int convLen = u2g(ctext, &inLenSize,outBuf,&outLenSize);

Cordova打安卓包报错ionic Error: spawn EACCES

最近升级了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,随便你这么设置。使用下面的命令命令设置

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

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

解决iPhone X上无法全屏的问题

iPhone X的齐刘海确实挺有型的,但是个人并不喜好。最近测试人员对app进行测试的时候发现了iPhone X上的显示效果超级恶心,无法全屏等各种问题,由此不得不解决这个问题。据了解这个问题是iPhone X自带的问题,不过在apple官方并没有找到相关解决办法,网上找了一番,找到相关的解决办法了。
本文主要参考以下两篇文章内容,两篇文章结合起来才能得到相关的解决办法
https://forum.ionicframework.com/t/iphone-x-and-ionic/105197/14
http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

1、在meta中增加viewport-fit=cover属性

继续阅读解决iPhone X上无法全屏的问题

个性化html5中的video,打造属于自己的html5视频播放器

本文使用的都是CSS3以及html5中的video实现的播放器,在PC与手机端都可以完美播放,目前还未实现播放进度条的拖移功能,后续会增加这个功能。
demo效果查看地址:https://king2088.github.io/html5-vPlayer/
先看效果图:

html5 video
html5 video

首先我们要了解一下html5中的media事件以及属性 继续阅读个性化html5中的video,打造属于自己的html5视频播放器

老生常谈系列之CSS3画三角及画圆

这是一道前端开发中常常被问到的基础问题,该如何画一个三角形?该如何画一个圆?被问到的时候,可能在你脑海里飘过的就是“我好像在哪里看过,但是记不得了”,我们往往觉得很简单的问题,往往却被面试官问到脸红、紧张。下面就来说说利用css画出各种基本图形的代码。
1、画圆
画圆,我们可以利用CSS3中的border-radius方法具体使用是将一个四方形设置上等宽等高后,再去设置边框的弧度为宽高的一半

.circle{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: blue;
}

2、画三角形:
思路是将某两个边框设置为透明,然后设置三角形底边的边框颜色以及高度即可

//向上
.triangle-up{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 20px solid red;
}
//向左
.triangle-left{
    width: 0;
    height:0;
    border-bottom: 20px solid transparent;
    border-top: 20px solid transparent;
    border-right: 20px solid blueviolet;
}
//等边三角形,底边等于左右边的和
.triangle{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
//直角三角形,四边形的相邻两边的边框设为一样的宽度,一边透明,一边有颜色
.triangle-90{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-bottom: 50px solid maroon;
}

继续阅读老生常谈系列之CSS3画三角及画圆