- 博客(64)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 教你用Cordova打包Vue项目
现在国内越来越多的开发者使用Vue开发混合app，但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的，有兴趣的可以去学习使用一下。因为我本身是做angular+ionic的，所以比较青睐cordova，下面我就教大家怎么使用cordova打包Vue项目：
2017-05-12 11:32:15
3551
2
原创 使用plugman开发cordova 高德地图定位插件
在开发的过程中我们更多的是使用别人开发的cordova插件，但是在使用的过程中经常会遇到一些不合自己心意的问题，那么我们就来使用plugman开发一个属于自己的cordova插件吧。 源码地址 : https://github.com/DaiHuaXieHuaKai/GaoDeLocation.git 下面就以开发一个高德地图的定位插件为例：第一步：检查是否具备开发环境检查是否有cordova和
2017-02-10 13:49:09
9570
7
原创 Ionic2 可以左右滑动的Segment
ionic2为我们提供了一个非常好的组件叫segment，一般的使用是没有问题的但是我们如果想要给segment加上一个可以滑动的事件的时候就会遇到一些问题，以下就是个人见解。 在ionic2中使用swipe的时候，没有像1中那样提供左滑还是右滑，而是使用的$event事件。这样就为我们处理左滑还是右滑带来麻烦，但是如果我们使用过HammerJS 的话我们就知道HammerJS 中处理事件是通过e
2016-12-05 16:59:42
12084
3
原创 Ionic2 get和post请求样例
在ionic2的service中使用http请求数据返回一个Promise： 首先在项目路径下执行ionic g provider HomeService，会在项目的中生成一个providers的文件夹，里面会生成一个home-service.ts文件。 然后在你要在使用用service的component中注入HomeService,例如在home.ts中import {HomeService
2016-11-18 17:05:26
19008
4
原创 flex布局兼容写法
.flex { display: -webkit-box; display: -ms-flexbox; display: flex;}.flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; fl...
2019-02-24 20:24:53
490
原创 Koa2 路由拆分成多文件
在使用koa-router的时候会遇到路由的配置，虽然基本的配置很简单，但是当我们的业务越来越复杂，涉及到的路由也越来越多，最开始的单文件路由配置就难以维护了。所以我们需要将路由根据模块进行拆分，从而根据模块配置相应的路由。但是我们一般在进行拆分的时候可能会遇到下面这样的用法，这属于常规用法，但是模块多了也就不怎么好看了。app.use(A.routes())app.use(A.al...
2018-08-16 14:41:56
3979
1
原创 使用CSS3自定义属性实现换肤功能
开始之前先说说css3的自定义属性，之前我们在写css的时候全部都是使用自身属性，比如margin,padding等。但是你曾是否见过这样的css:root{ --primary-color:#989898; --light:#fff; --dark:#000;}其中的–primary-color、–light、–dark就是自定义的属性。自定义属性的命...
2018-07-19 15:55:50
2251
1
原创 react-native从头开始封装三方sdk（二）
完成了第一步，下面开始飞。 以集成腾讯信鸽推送为例注册信鸽申请应用等按照腾讯文档来即可。（注意包名要是app的包名不是library的包名）ps:按照手动配置的方式出现support-v4重复引用问题，尝试多种方式没有解决。暂且放弃。使用jcenter配置的方式最终配置结果： testlibrary下的build.gradleapply plugin: 'com.and...
2018-07-02 10:56:40
1688
原创 react-native从头开始封装三方sdk（一）
1.新建项目demoreact-native init democd demoreact-native run-android(想尽一切方法把项目跑起来，这一步都过不了的话后面就不用看了)2.工欲善其事，必先利其器。要想飞我们先学会爬。我们先实现JS调用原生方法（1）使用Android Studio打开demo->android（2）新建一个Mod...
2018-07-02 10:50:54
7108
1
原创 如何创建一个Progressive Web Apps应用程序
这篇文章主要介绍怎么创建一个PWA程序。首先听说bootstrap4非常好，那我们就把bootstarp4项目变成我们的PWA程序。顺便推荐一个node插件live-server，用来当做本地服务器运行你的项目。Vs Code也可以安装此插件。第一步：拥有一个web页面为了展示效果我们从https://startbootstrap.com/下载一个模板。随便下载一个模板，修改项目名称为...
2018-03-19 11:08:12
1520
原创 Progressive Web Apps(PWA)核心技术-使用Firebase Cloud Messaging实现推送通知
Chrome目前使用Firebase云消息传递（FCM）作为其推送服务。 FCM最近采用了Web Push协议。 FCM是Google云消息传递（GCM）的后续产品，支持相同的功能和更多功能。要使用Firebase云消息传递，您需要在Firebase上设置项目（请参阅VAPID部分以绕过此步骤）。 大致流程如下：1、在Firebase控制台中，选择创建新项目。 2、提供项目名称，然后单击...
2018-03-19 11:07:19
1515
原创 Progressive Web Apps(PWA)核心技术-Push Notifications
PWA的推送是基于Notifications API 和 Push API，Notifications API让应用程序向用户显示系统通知。 Push API允许service worker处理来自服务器的推送消息，即使应用程序处于不活动状态。推送通知术语通知 - 在应用的普通用户界面（即浏览器）之外向用户显示的消息，推送消息 - 从服务器发送到客户端的消息推送通知 - 为响应推送消...
2018-03-19 11:06:23
959
原创 Progressive Web Apps(PWA)核心技术-Indexed DB
在使用的过程中我们通常使用cache缓存html、css、js等文件信息，但是一些特殊的数据需要我们借助数据库的支持，这里推荐使用IndexedDB。IndexedDB是一个大型的noSQL存储系统。 它使您可以在用户的浏览器中存储任何内容。 除了通常的搜索，获取和存储操作之外，IndexedDB还支持事务。检查浏览器是否支持IndexedDBif (!('indexedDB' i...
2018-03-19 11:05:48
343
原创 Progressive Web Apps(PWA)核心技术-Fetch API
简单来说Fetch API就是一个请求资源的接口，比XMLHttpRequest更简单。 Fetch支持跨源资源共享（CORS），正式环境需要HTTPS。请求示例：fetch('examples/example.json').then(function(response) { if (!response.ok) { throw Error(response.status...
2018-03-19 11:05:11
356
原创 Progressive Web Apps(PWA)核心技术-使用Cache API
上篇文章介绍了文件的缓存，这里我们介绍一下Cache API的属性和方法。检查浏览器是否支持Cache APIif('caches' in window){ //支持}创建缓存caches.open('example-cache').then(function(cache) { //创建一个名为example-cache的缓存并返回一个cache对象...
2018-03-12 16:00:39
421
原创 Progressive Web Apps(PWA)核心技术-Cache API
Service Worker API带有一个Cache接口，可以让您创建按请求键入的响应存储。 缓存资源的常见模式有：service worker安装、用户交互、网络响应。1、在service worker安装的时候缓存应用程序脚本 我们可以在这里缓存Html、css、js等一些静态资源。self.addEventListener('install', function(event)...
2018-03-12 15:58:06
475
原创 Progressive Web Apps（PWA）介绍
Progressive Web App的介绍：Progressive Web Apps（PWA）是一个结合了最好的web和app经验的渐进式网络应用程序。它对用户来说是非常有用的，它不需要安装，只需要从浏览器标签开始访问。随着用户与app建立的关系，它变得越来越强大。即使在片状网络上，它也可以实现快速加载，并发送相关推送通知。它可以在主屏幕上创建图标，并加载为顶级全屏体验。Prog
2018-02-07 11:43:52
804
原创 Cordova真机测试之GapDebug
相信很多ionic的开发者一般的调试方式都是采用的Chrome的真机调试（chrome://inspect）进行的调试的，或许有很多人为了不麻烦还是采取的改一点，然后打包alert()。毕竟我大多数时候都是这样。 这里我推荐大家使用一款专门用于phonegap（cordova前身）的调试工具GapDebug。GapDebug介绍GapDebug，是为混合移动开发人员提供免费的调试和应用管理平台。它
2017-11-02 13:38:13
4438
3
原创 异步模式之JS、Promise、RXJS
在我们的开发过程中经常会遇到一个问题：一个方法需要在另一个方法执行结束之后才开始执行。这就是我们所说的异步。现在我们假设有两个方法分别为fn1(),fn2();且fn2()在fn1()执行完后才开始执行。JavaScript实现使用setTimeout延迟2s执行fn2(),使用这种方式有个缺点是fn1()的执行时间不可控，而且如果fn2()需要fn1()的结果作为参数的话，这样可能会导致整个流程混
2017-10-30 10:56:25
4403
翻译 ionic3 从UIWebView升级到WKWebView（翻译）
在iOS中，现在已经有两个网页浏览器，UIWebView和WKWebView。Ionic应用程序已经在历史版本中使用UIWebView，但之后不再使用。 Ionic现在在构建iOS时默认使用WKWebview。我们坚信，WKWebview是任何应用程序的最佳选择，因为它具有对旧版本的Webview（UIWebView）的许多改进。 这些功能包括：JIT将JS代码转换为机器代码，运行速度更快改善了
2017-10-19 09:49:56
4582
原创 Ionic3 透明导航栏、渐变导航栏
在ionic中实现透明导航栏非常简单，主要用到三个属性:1、no-border2、transparent3、fullscreen先来看看效果图： 实现代码：<ion-header no-border>//加入no-border让header无边框 <ion-navbar transparent>//加入transparent让header透明 <ion-title>
2017-10-10 09:59:33
5503
1
原创 spring boot常用的依赖
名称 描述 Pom spring-boot-starter-thymeleaf 使用Thymeleaf视图构建MVC Web应用程序的启动器 Pom spring-boot-starter-data-couchbase 使用Couchbase面向文档的数据库和Spring Data Couchbase的启动器 Pom spring-boot-starter-arte
2017-10-10 09:06:23
4953
原创 Ionic2像使用字体图标一样使用png图标等
在前面写了一篇文章是关于在ionic中使用iconfont的，但是在实际的开发过程中会发现，前端设计的很多图标都是png或者jpg的，无法像使用字体图标一样进行使用。 但是我们一般使用png这样的图标的时候都是使用img标签或者是某标签给它加上background-image的方式。 如果我们想要像使用字体图标那样使用png图标我们可以按照下面的方式操作。比如我们要自定义一个load图标 先在
2017-08-09 11:10:13
921
2
原创 Cordova 实现沉浸式（透明）状态栏效果
沉浸式状态栏（Immersive Mode）和透明状态栏（Translucent Bar）。这两个概念很多地方的解释都不是很清晰，所以导致很多人都各有各的认识。所以这里我也有一个自己的认识，笔者认为沉浸式状态栏也可以说是全屏模式，即隐藏状态栏与导航栏。 而透明状态栏是不隐藏状态栏但是它所呈现的是透明的。因为默认情况下状态栏都是黑底白字。而我们现在要实现的就是透明状态栏下的全屏模式。话不多说，看效果：
2017-07-05 15:04:31
14835
12
原创 Ionic3 自定义组件实现图片懒加载效果
在使用ionic3的过程中，我们可以使用angularjs的组件特性进行组件的自定义开发，对一些特定条件下的需求开发对应的组件。下面我们就通过自定义组件来实现图片的懒加载效果。当我们需要加载的图片很大，但是我们又不愿意做压缩让图片失真，所以我们需要使用图片的懒加载效果。实现流程首先新建一个img-lazy-load组件：ionic g component img-lazy-load会在src目录下生
2017-06-14 14:20:35
6182
2
原创 如何实现隐藏input的光标
在开发的过程中会遇到各种各样的奇葩需求，比如输入框输入的时候不要显示光标。不得不说这个需求的应用场景太少了，但是既然提出来了就得找方法去解决，在多番尝试之后最终发现，像网上说的什么设置input readonly、disabled、onfocus=”this.blur()”等等方法，都没达到效果。我的input框是需要输入的，只是隐藏光标，并非不可用啊。后来在自己脑门大开的时候发现可以通过以下代码实
2017-05-25 08:50:56
37715
7
原创 Ionic3 瀑布流布局
瀑布流布局是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 瀑布流布局一般使用在网页中，在移动端用的比较少但是也不可缺。下面就介绍一下如何在ionic3中使用瀑布流布局。 首先创建一个项目，这里不多做介绍。我们用about这个模块来进行瀑布流的开发。 这里先介绍一下实现的流程： 我们先要定义一个contain
2017-05-19 14:35:50
4313
4
原创 webpack的简单使用实现倒计时
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 对于webpack的使用我们大多数时间都是在项目中去生成使用，比如angular、vue等，但是对它了解甚少，下面我们就对webpack的使用做一个简单的介绍。第一步：全局安装webpack安装webpack必然首先需要有nodejs环境，有了环境之后执行npm install
2017-05-16 10:23:03
764
原创 Ionic2 使用loading组件实现下载进度显示效果
一般的loading组件在官方提供下没有说明怎么去动态改变content内容，所以不容易实现进度条的效果。一般代码 let loading = this.loadingCtrl.create({ spinner: 'hide', content: '...' }); loading.present();为实现加载进度的效果其实官方提供了方法的，只需要通过
2017-05-04 14:35:08
4529
原创 Ionic2-解决在使用slides的时候autoplay、loop等Input Properties报错问题
在我使用ionic提供的最新slides组件的时候，在使用autoplay等属性的时候 <ion-slides autoplay="3000" loop=true pager=true > <ion-slide *ngFor="let slides_image of slides_images" > <img src="{{slides_image.im
2017-04-24 10:09:21
5935
原创 使用Ionic3 新特性Lazy Loading加速应用
因为我们使用命令创建的项目是基于ionic2，我们首先要使用ionic3的新特性Lazy Loading就必须对我们的项目进行更改。下面就以修改home页为例。第一步：移除app.module.ts中declarations, entryComponents的 HomePage，并移除import { HomePage } from '../pages/home/home'这一项;第二步:在home
2017-04-20 15:55:06
5350
原创 在AppCan中使用Vue.js开发
在appcan升级到4.0过后新增了一个MVVM的开发模式，对于这种模式底层提供的api实在是有限，而其中最好用的也就属于双向绑定和基于组件开发。同样现在比较流行的AngularJs和Vue.js都具有这样的优势，但是因为angularjs是国外的，对于一些开发者来说文档看起来比较困难，但是Vue.js是国内的框架。在多番尝试之后我毅然决定采用Vue.js来结合AppCan进行开发。 原本还有一些
2017-04-11 15:40:03
3882
2
原创 angular2+nodejs实现图片上传
在使用angular2进行图片上传的时候，遇到了各种各样的问题。在多番尝试之后最终成功上传图片，下面将我的方法分享给大家：nodejs 后台代码var express = require("express");//网络请求模块var request = require("request");//引入nodejs文件系统模块const fs = require('fs');//引入body-
2017-03-27 12:25:52
3113
1
原创 nodejs 使用async进行BT吧最新电影数据爬取
在百度上面有许多关于使用nodejs进行网页数据爬取的例子，但是大多数都只是爬取的单页面数据。但是设想如果我们爬取到的是一个页面的url，然后我们要再次访问url进行下一个页面的爬取。这样有许多人就可能会想到执行两次，但是事实上我们只需要一次请求就可以完成。但是因为nodejs的异步机制，这就让我们必须要使用到async的walterfall和whilst，下面就以抓取BT吧最新电影数据为例：var
2017-03-23 10:22:01
1277
原创 AppCan MVVM框架简单介绍
相信熟悉appcan的开发者都知道，appcan官方在4.0中引入了许多新的特性和功能，其中引入的MVVM在我看来是最好的一个特性，因为之前用了很长一段时间的AngularJS，所以对这种MVVM的模式非常感兴趣。 MVVM（Model-View-ViewModel)是在MVC(Model-View-Control)模式之后引出的新的开发模式，他与MVC模式一样用于把视图（界面）和数据进行解耦，不
2017-02-22 16:03:27
4411
原创 在npm上面发布自己的插件
在上一篇文章中我们已经开发了一个自己的插件，但是我们的插件是通过以下的方式进行安装的：cordova plugin add https://github.com/DaiHuaXieHuaKai/GaoDeLocation.git --variable API_KEY=your key如果我们想要想安装device插件那样通过cordova plugin add cordova-plugin-devi
2017-02-10 17:12:18
4216
原创 cordova保存图片到相册
将图片保存到相册的三种方式： 一、文件操作 有三个参数： 1）URL 2）文件夹名称你想在你的SD卡的创建 3）文件名称（你可以给任何名称的文件）所有类型的文件可以通过使用此代码下载。 //第一步检查参数和网络转态 function DownloadFile(URL, Folder_Name, File_Name) { if (URL == null && Folder_Name =
2017-02-08 09:52:40
11332
4
转载 Ionic2双击退出应用
在Ionic2项目结构解析中，我们知道在 src/app/app.component.ts 初始化项目，因此我们可以在这里监听Android返回按键，实现双击退出应用。Ionic2 Platform中提供了监听返回按键的API registerBackButtonAction(callback, priority)， 参数 类型 描述 callback Function 返回键
2017-02-05 17:05:06
3267
原创 创建Node.js 的npm应用模块
一、创建Node.js模块封装（自己在本地使用，非公开） 下面以创建一个验证手机号码格式是否正确的模块为例： 1、创建一个名为validate的文件夹 2、在该文件夹中创建一个validate.js的文件 3、在validate.js文件中加入以下代码var mobileRex = "^(13[0-9]|15[012356789]|17[03678]|18[0-9]|14[57])[0-9]
2017-01-11 16:08:53
449
原创 Ionic2 使用自定义图标
在ionic2中使用自定义图标，如iconfont（阿里巴巴矢量图标）。 先在http://www.iconfont.cn/ 中找到自己需要的图标，然后将图标加入购物车，然后下载该图标。 下载完成后解压，打开文件demo_unicode.html可以看到它提供的使用方法，我们在ionic2中按照以下方法使用： 1、在项目的assets目录下新建fonts文件夹，然后将下载解压后的iconf
2016-12-28 10:31:46
4973
gapdebug_patch1
2017-10-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人