"移动端"栏目下的所有文章

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

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

一、安卓上的横屏与竖屏

首先我们先来看一下android上的某些原生Activity属性
安卓 Activity 在设备上的显示方向。如果 Activity 是在多窗口模式下运行,系统会忽略该属性。Activity有以下几种属性值 阅读更多

解决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的解决办法

2017/12/21ionic 标签:1

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 中文乱码处理

2017/11/27nodejs 标签:0

在使用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上无法全屏的问题

2017/11/14移动端 标签:5

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属性

阅读更多

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

2017/11/12HTML5+CSS3 标签:0

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

html5 video

html5 video


首先我们要了解一下html5中的media事件以及属性 阅读更多

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

2017/11/02HTML5+CSS3 标签:0

这是一道前端开发中常常被问到的基础问题,该如何画一个三角形?该如何画一个圆?被问到的时候,可能在你脑海里飘过的就是“我好像在哪里看过,但是记不得了”,我们往往觉得很简单的问题,往往却被面试官问到脸红、紧张。下面就来说说利用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;
}

阅读更多

利用nodeJS发送邮件

2017/10/14nodejs 标签:0

做过后端的童鞋都知道发送邮件这样的功能并不复杂,使用目前已有的后端技术比如java、.net、php等编写一个发送邮件的功能是很简单的,但是要编写很多代码,比如java中利用jmail发送邮件并不是一件简单的事情。随着nodeJS的发展,如今利用前端技术实现发送邮件,简直是小菜一碟,不仅仅是代码量减少了,也提高了开发效率。
今天主要说的是使用nodeJS的Nodemailer发送邮件
1、首先我们得准备一个QQ邮箱或者GMAIL邮箱(只要支持smtp服务的就可以),主要用于发送邮件。比如QQ邮箱我们可以做如下设置即可开启POP3/SMTP服务,并且可以发送邮件。
进入QQ邮箱后点击左上角的设置,再选择账户,如图

QQ邮箱POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务

QQ邮箱POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务


将其全部设置为开启即可,这样就可以利用QQ邮箱发送邮件了。 阅读更多

使用webpack配置ES6开发环境

2017/09/24nodejs 标签:0

1、ES6简介

由于ES6无法直接运行在浏览器中,只能通过babel来进行解析转换(编译)成ES5才可以运行在浏览器中,因此我们就需要给ES6搭建相关的环境,才可以开心的写ES6。
目前很多框架都使用了ES6,比如react、vuejs、angular等这些主流前端框架。ES6简洁了很多ES5的代码,让我们可以少写很多代码,当然如果你还了解typescript以及coffeescrpt,那么就更加方便你进行各种开发了。但是问题来了,这些基于ES6的所有框架以及语法糖都需要搭建相关的环境才能够正常运行ES6

2、webpack

webpack是一个前端打包工具,简单说webpack是将所有JavaScript组件以及依赖的库整合为一个js文件,将所有CSS整合为一个css文件。使用webpack可以很方便的打包各种JavaScript组件。

3、准备工作

1)、安装nodeJS(安装方法请到官方查看)
2)、使用npm初始化项目

npm init ES6

ES6是我们开发的项目文件夹
运行上面的命令后会让你填写一些有关项目描述等信息,并且在ES6文件夹下会生成一个package.json的文件
3)、全局安装webpack
npm install -g webpack

4、安装依赖

配置ES6环境,我们需要安装以下几个必须的依赖包 阅读更多

share

AD