liayn523的博客

原创 ionic3/ionic4 要配置android ios使用一套css样式

ionic3以上的版本android和ios的css使用同一套样式的方法如下：1.进入app.module.ts；2.修改app.module.ts的内容@NgModule({ declarations: [ MyApp, TabsPage ], imports: [ IonicModule.forRoot(MyApp, { ba...

原创 ionic3 -- ion-scroll 标签不滚动问题

今天在项目用使用ionic3<ion-scroll></ion-scroll>标签实现照片滑屏滚动呈现的样式，但是出现了两个问题：1.在标签中放入照片数组之后，照片不显示；代买如下：<ion-list > <ion-scroll scrollX="true" > <ul class="pics">

原创 Cordova --- 第三方app实现微信登录功能

最近公司项目中需要添加微信登录功能，由于我们的项目使用了ionic的框架，所以项目中基本使用了cordova的插件，下面把实现流程简单说一下：第一步：登录微信开放平台（点击打开链接）1.如果您的项目在微信的开发平台上没有创建过项目则需要在微信开放平台上创建项目，至于在微信上如何创建项目获取微信的分享等功能，可以在百度上查找方法，由于我们的项目在微信平台上已经创建了，直接在项目中点击申请登录

原创 Doctype作用

1.声明位于文档中的最前面，处于标签之前，告知浏览器的解析器，用什么文档类型规范来解析这个文档；2.严格模式的排版和js运作模式是以该浏览器支持的最高标准运行；3.在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作；4.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

原创 HTML语义化的理解

1.用正确的标签做正确的事情；2.HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；3.即使在没有样式CSS情况下也可以以一种文档格式显示，并且是容易阅读的；4.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的却终，利于SEO；5.便于读源代码的人对网站更容易将网站分块，便于阅读维护理解。

原创 怎么解决 display:inline-block 之间显示间隙问题？

1.移除空格（div之间回车）；2.使用margin负值；3.使用font-size：0；4.letter-spacing;5.word-spacing;

原创 display:none和visibility:hidden的区别

display:none:隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢， 就当他从来不存在。visibility:hidden:隐藏对应的元素，但是在文档布局中仍保留原来的空间。

转载 CSS 选择符有哪些

1）id 选择器（#myid）2）类选择器（.myclassname）3）标签选择器（div，h1，p）4）相邻选择器（h1 + p）5）子选择器（ul > li）6）后代选择器（li a）7）通配符选择器（* ）8）属性选择器（ a[rel = "external"]）9）伪类选择器（a: hover, li: nth - child）

原创 ionic -- 调用相机拍照失败或者照片不显示（Camera cancelled）

我们用的是ionic框架，而项目中调用手机拍照的功能是使用cordova插件中的cordova plugin add cordova-plugin-camera插件，但是在有些android拍完照片之后，照片不显示，并且弹出错误信息Camera cancelled的错误，解决办法为：在项目的文件夹config.xml中加上此句：加上此信息之后，重新build项目测试就可以。。。。。

转载 ionic --- 在ios无法使用focus,ios focus失效的问题

问题：基于ionic的ios的hybird APP 无法使用focus()获取焦点和键盘的问题。我的代码如下:directive:1 .directive('focusMe', function($timeout) {2 return {3 link: function(scope, element) {4 $timeout(function() {5 element[0]

原创 Bootstrap -- 富文本编辑器bootstrap-wysiwyg的使用方法

最近公司需要做一个文本编辑器，由于我们使用的bootstrap的框架，所以选择了使用bootstrap-wysiwyg的轻量级的插件，研究这个插件花费了我一些时间，接下来记录我走过的坑，希望对大家有用：1.需要在index.html页面引入的css文件：这是官方文档上引用的css文件，都是网络获取的，你可以下载到你本地，这加载更快；2.需要在index.html页面引入

原创 CSS -- 图片宫格不变形显示

最近在项目中需要实现类似手机相册的功能，照片九宫格显示，且不管什么样大小的照片显示都不会变形的功能，废话不多说，直接看代码：HTML： CSS：.confirmphotos{ width: 100%; background: #FFF; padding-left: 3%}.confirmphotos:after{ c

原创 Cordova -- 监听移动端(手机)网络连接情况

因为我们项目使用ionic的框架，这个框架可以直接用cordova的插件；1.在项目中安装插件cordova plugin add cordova-plugin-network-information2.使用场景可以监听手机的网络连接情况，如连接与未连接，连接的是4G/3G还是WIFI,知道网络的状态及什么网络时，就可以在数据加载时出现断网的情况下做判断，或者图片加载时做判断。

转载 ionic2 -- 环境搭建和ionic2项目目录介绍

1环境搭建一年前研究混合框架，初步确定了四种方案给公司选择，ionic，hbuilder，wex5,React-native这四个框架各有优缺点，ionic和react－native是国外框架，相对好一点，文档更新很快，就不一一说了，大概的思路都是一样的，js逻辑实现，同时调用原生功能，h5，CSS3 UI实现，其实他们都有自己的ui框架，当时选择了国内的hbuiler，开发了三款应用，i

转载 webstorm -- 2017 激活破解

1.2017.2.27更新选择“license server” 输入：http://idea.imsxm.com/2.2016.2.2 版本的破解方式：安装以后，打开软件会弹出一个对话框；选择“license server” 输入：http://114.215.133.70:410173.2016.2.3 版本的破解方式：目前最新的就是2.3版本，在打开的Lic

原创 Ionic -- Ionic1与Ionic2的区别

现在公司使用ionic1的框架做项目，ionic2发布之后想把项目迁到ionic2上来，所以研究一下，发现把项目从ionic1迁入到ionic2是有点。。。Ionic专注于以标准的HTML、CSS、和JavaScript来构建的移动站点，并可以通过Cordova打包成移动App，只需要编写一次代码，就可以分别部署到Ios、Android等多种移动平台上。接下来我们介绍一下这两个框架的区

转载 javascript --- 使用btoa和atob来进行Base64转码和解码

javascript原生的api本来就支持,Base64,但是由于之前的javascript局限性，导致Base64基本中看不中用。当前html5标准正式化之际，Base64将有较大的转型空间,对于Html5 Api中出现的如FileReader Api, 拖拽上传,甚至是Canvas,Video截图都可以实现。一.我们来看看，在javascript中如何使用Base64转码var s

原创 JS --- 显示当前日期时间和星期几

转载 JS --- 计算两个日期之间的天数

JS计算两个日期之间的天数 function btnCount_Click(){ s1 = "2006-12-18" s2 = "2007-1-5" alert("第一个日期；"+s1+"/n第二个日期："+s2+"/n相差"+DateDiff(s1,s2)+"天") } //计算天数差的函数，通用

原创 angularjs --- 自定义时间格式的过滤器

项目中需要时间格式的过滤器，像微信的时间显示一样，如下的样式.filter('FormatStrDate', function() { // 两个时间相差的天数 //sDate1和sDate2是2006-12-18格式 function DateDiff(sDate1, sDate2){ var aDate, oDate1, oDate2, iDays;

原创 Http ---- 协议中的各种长度限制总结

HTTP1.0的格式request(HTTP请求消息)结构:一个请求行.部分消息头,以及实体内容，其中的一些消息内容都是可选择的.消息头和实体内容之间要用空行分开.GET /index.html HTTP/1.1 //请求头,下面都是消息头.Accept: */*Accept-Languang:en-usConnection:keep-aliveHost:l

转载 HTTP --- 头部详细解释

HTTP 头部解释================================================ Accept告诉WEB服务器自己接受什么介质类型，*/* 表示任何类型，type/* 表示该类型下的所有子类型，type/sub-type。 Accept-Charset浏览器申明自己接收的字符集Accept-Encod

转载 Websocket——Websocket原理

偶然在知乎上看到一篇回帖，瞬间觉得之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有。所以转到我博客里，分享一下。比较喜欢看这种博客，读起来很轻松，不枯燥，没有布道师的阵仗，纯粹为分享。废话这么多了，最后再赞一个~一、websocket与httpWebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP

原创 cordova ---- 获取手机设备信息 IMEI

我们的项目是ionic。。。此功能是利用Phonegap的Device 提供有：device.model     :返回设备的模型或产品的名称device.cordova  :返回cordova的版本device.uuid        :返回手机 uuid device.version   :返回系统版本  device.platform  :返回手机

原创 升级node.加速的方法

今天，又发现一个超级简单的升级node.js的方法。一行命令搞定，省去了重新编译安装的过程。node有一个模块叫n（这名字可够短的。。。），是专门用来管理node.js的版本的。首先安装n模块：npm install -g n第二步：升级node.js到最新稳定版n stablen后面也可以跟随版本号比如：n v0.10.26或n 0.10.26另外分享几个

转载 utf-8中的汉字占用多少字节

占2个字节的：〇占3个字节的：基本等同于GBK，含21000多个汉字占4个字节的：中日韩超大字符集里面的汉字，有5万多个一个utf8数字占1个字节一个utf8英文字母占1个字节在查找 UTF-8 编码资料时发现，很多的帖子说的 UTF-8 编码里，一个汉字占用3个字节，有的还做了个证明，大概是这样的，创建一个没有BOM的UTF-8编码的文本文件，里面保存了几个汉

转载 HTML5 --- 页面资源预加载技术(Link prefetch)加速页面加载

不管是浏览器的开发者还是普通web应用的开发者，他们都在做一个共同的努力：让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快：使用CSS sprites，使用图片优化工具，使用.htaccess设置页面头信息和缓存时间，JavaScript压缩，使用CDN等。我曾经介绍过本站上使用的一些速度优化技术。而在HTML5里，出现了一个新的用来优化网站速度的新功能：页面资源预加载/

转载 HTML5 --- 上传图片base64编码显示缩略图

营业执照 添加图片 $('input[type=file]').change(function(){ var inputObj=$(this);//input对象 var liObj=$(this).parent('a').parent('li');//input所在li对象 var aObj=$(this).par

原创 HTML5 --- 知识库

这里没有详细的解释，可以看这个链接里的内容：http://lib.csdn.net/base/html5（点击打开链接）

原创 ionic ---- 控制ios状态栏的显示，隐藏，颜色

前段时间在ionic项目中遇到这样的问题，ios的导航栏隐藏被手机的状态栏遮挡住了，解决方法：1.安装插件：cordova plugin add org.apache.cordova.statusbar2.检查index文件中，是否引入了script src="cordova.js">script>3.在项目app.js文件夹中，加入如下的js代

原创 JS -- 辨别访问浏览器判断是android还是ios系统

项目中需要，判断android或ios系统，代码如下： /* * 智能机浏览器版本信息: */ var browser = { versions: function() { /* * navigator对象的属性 * 浏览器代号: navigator.appCodeName * 浏览器名称: navigator.app

转载 关于AngularJs中监听事件及脏循环的理解

这篇文章讲解的很好，大家可以参考，地址如下：http://www.mamicode.com/info-detail-1508620.html（点击打开链接）

原创 angularjs -- 密码输入框的内容可见与隐藏（ng-class）

在注册或登录密码输入框右侧会出现一个眼睛的小图标，点击时密码可见或隐藏，这个功能用angularjs的ng-class的属性，很容易就实现了，如下：1. html代码： 设置密码： 重复密码： 2.controller代码：// 初始化输入框的变量 $scope.inputType = "text"; $scope.input

原创 ionic -- 使用cordova的插件实现分享到QQ、微博、微信

我在现在的ionic项目中已经实现了微信和QQ分享，都是是有cordova的插件，我把这些插件的网址放到这里，如果插件解决不了大家的问题，可以给我留言，咱们共同讨论。1.分享到微信https://github.com/xu-li/cordova-plugin-wechat（点击打开链接）2.分享到QQhttps://github.com/iVanPan/Cordova_QQ（点

原创 ionic -- 仿微信通讯录

今天项目中需要做类似微信通讯录的好友通讯录，由于我们的项目中是用ionic中框架的，用jquery的插件库的时候，有的事件不能用，所以只能用ionic加angularjs的方法了，把自己写的过程做了一下记录，如下：1. 我们需要把右侧的列表显示出来；这个列表是由数组中按用户名的首字母排列后的数组；2. 把通讯录中所有的首字母包含英文字母放到数组中$scope.list；$rootSc

原创 cordova—— 监听手机软键盘出现和隐藏事件及获取软键盘的高度

我们在ionic移动端项目中往往需要在输入框获取焦点，手机软件盘弹出或者隐藏的时候做一些操作，接下来为大家介绍一个cordova的一个插件：1.首先，安装cordova的关于键盘事件的插件cordova plugin add ionic-plugin-keyboard2.然后，使用这个插件提供的监听函数，监听键盘的动作// 监听键盘出现window.addEventListene

原创 ionic —— 手动控制content中的滚动条滚动位置之ionicScrollDelegate

最近在做ionic的项目关于类似微信朋友圈功能的内容列表展示，内容下面有评论这条内容的功能，当手机软件盘出现之后，要评论的内容部分就被键盘遮挡住，这时就需要控制滚动条，使其自动向上滚动一个键盘的高度，具体功能使用了ionic的$ionicScrollDelegate命令，详细如下： //delegate-handle="控制滚动区域的名字" // 点击是触发滚动的位置

原创 ionic ——— 下拉刷新及上拉加载

最近项目中使用了ionic的下拉刷新及上拉加载的功能；下拉刷新还好写，但是在做上拉加载的时候遇到了点问题，下面先给大家把这个两个功能的代码代码写上，然后在说问题。HTML页面： <ion-refresher pulling-text="下拉刷新..." on-refresh="doRefresh()"> <ion

转载 JavaScript——封装输出log信息的方法

最近项目中需要整理统一的log信息打印形式，由我同事负责封装出了一个信息打印的函数，觉得非常 使用，于是自己在把代码拿来记录一下，并做了相应的注释// 封装一个在日期显示时，月、日、分等位数不足两位的用"0"补齐function add0(obj){ if(obj<10){ obj = '0'+obj; return obj; }else{ r

原创 ionic -- 开机动画时间设计

在项目中由于开机时有单页面的跳转，会出现黑屏和白屏的效果，此时就想通过设置ionic的开机动画，延长开机动画的时间，来掩盖页面加载的白屏问题：查阅资料后发现，只要在config.xml 文件了增加两句话就可以了：             这些内容直接复制到config文件里就可以了。