前端知识
追梦的小猴子
编程人员
展开
-
vscode笔记(一)- vscode自动生成文件头部注释和函数注释
1、安装插件KoroFileHeader2、设置在vscode左下角点击设置按钮,选择“设置”,然后输入“fileheader”,文件头部注释:Fileheader:custom Made 函数注释:Fileheader:cursor Mode随便点击哪个"在setting.json"中编辑,输入以下设置后保存,然后重启vscode更新设置:// 文件头...转载 2020-04-27 19:53:04 · 3435 阅读 · 1 评论 -
VUE内容绑定
1、数据和方法绑定(1)方法都存储在methods中,调用方法的时候在JS中直接this.xxx(),在html中采用@click=”xxx()”;(2)属性都存在data中,调用属性时在JS中直接this.xxx,在html中采用{{xxx}};示例:2、绑定属性属性绑定主要是把data中定义的数据绑定到html元素的属性上,可以通过v-bind:src=,也可以通过:s...原创 2020-03-20 09:36:15 · 389 阅读 · 0 评论 -
Vue-Devtools安装配置教程(转)
可以先看视频教程:链接最简便的方法是用FQ来通过google应用商店进行安装,但是大多数人还是处在非FQ的状态尝试过安装Node的方法来安装,但是极其不建议用这个方法安装,非常麻烦,而且必须要有node的基础,非常不接地气下面来一个最简便的方法(送给伸手党):查看过很多博客大多数都是,要安装Vue-Devtools,在一个github下面用git clone或者手动下载一个叫做vu...转载 2019-11-28 15:43:26 · 343 阅读 · 0 评论 -
angular2指南
序对后端开发来说,前端是神秘的,眼花缭乱的技术,繁多的框架,出名的不出名的好几百种,看是“繁荣”,其实显得杂乱无章,但是我们在做开发的时候,技术选型还是主流的那么几个:浅析angular,react,vue.js Node.js。node官网:https://nodejs.org/ nodejs不是一个js框架,千万不要认为是类似jquery的框架,nodejs是js运行时,运行环境,类比java...转载 2018-03-02 11:14:43 · 219 阅读 · 0 评论 -
angualr2.0入坑
Angular 2.0 于去年 9 月正式发布。尽管同一时间里 React/Vue 大放光彩,圈子社区也是热闹非凡,他们的优点不言而喻,不过这里不谈 React / Vue,更不是要比出个谁优谁劣(知乎上的对比已经很多了[Facepalm]),这篇文章只关注 Angular 本身,好好地聊聊 Angular 这个迟来的平台。新版 Angular 推出后,官方不再取用 AngularJS 这个名称了...转载 2018-03-02 11:27:53 · 254 阅读 · 0 评论 -
Eclipse中离线安装ADT插件详细教程
转自:https://blog.csdn.net/dr_neo/article/details/46941859在搭建Android开发环境的时候,我们需要为Eclipse安装ADT(Android Development Tools)插件,这个插件可以为用户提供一个强大的Android集成开发环境。通过给Eclipse安装ADT插件,用户才能够完成快速新建Android项目、创建界面、调试程序、...转载 2018-04-16 14:36:13 · 290 阅读 · 0 评论 -
浅谈Cordova框架的一些理解
转自:https://www.cnblogs.com/cr330326/p/7082821.html浅谈Cordova框架的一些理解前言因为工作原因,最近需要研究Cordova框架,看了其中的源码和实现方式,当场在看的时候马上能理解,但是事后再回去看相关源码时候却发现之前理解的内容又忘记了,又不得不重新开始看,所以总觉得需要记录下来,这样也表明之前也是学习过,俗话说「好记性不如烂笔头 」,想必也是...转载 2018-04-16 15:20:21 · 707 阅读 · 0 评论 -
理解Ionic、Angular、Cordova及插件之间的关系
首先我们需要明确以下几个概念:1.即使我们将移动端web页面做得和原生应用及其相似,在我们的页面中也无法像原生应用那样调用原生的能力,当然通过输入框触发键盘、图库、拍照等操作不在这里“调用原生能力”的范畴。2.单纯的web页面不能提交到应用商店被用户使用。然后,我们分别就它们之间的关系做出解释:Ionic和Angular首先要明确的是Ionic是Angular的衍生品,Angular是单独的JS库...转载 2018-04-18 16:48:27 · 437 阅读 · 0 评论 -
angularjs+ionic+cordova+Android studio的环境配置
AngularJs各个 angular.js 版本下载 是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等 AngularJS 通过新的属性和表达式扩展了 HTML。 AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications)...转载 2018-04-18 16:49:46 · 1082 阅读 · 0 评论 -
Web App、Hybrid App、 Native App区别
目前主流应用程序大体分为三类:Web App、Hybrid App、 Native App。一、Web App、Hybrid App、Native App 纵向对比首先,我们来看看什么是 Web App、Hybrid App、 Native App。1. Web APPWeb App 指采用Html5语言写出的App,不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用,基本上可以说是触屏...转载 2018-04-23 10:22:13 · 509 阅读 · 0 评论 -
Postman安装步骤
Postman是一种网页调试与发送网页http请求的chrome插件。我们可以用来很方便的模拟get或者post或者其他方式的请求来调试接口。1.Postman_v4.1.3下载地址:http://files.cnblogs.com/files/ycdx2001/Postman_v4.1.3.rar下载后解压出来。2.打开chrome添加扩展3.chrome打开:chrome://apps/ 4...转载 2018-05-11 16:05:58 · 225 阅读 · 0 评论 -
ionic build android (或cordova build android)报错:Error: Could not find an installed version of Gradle
执行ionic build android (或cordova build android)打包时报错的解决方案错误如下:Error: Could not find an installed version of Gradle either in Android Studio,or on your system to install the gradle wrapper. Please incl...转载 2018-04-27 11:51:30 · 442 阅读 · 0 评论 -
angular4管道过滤
自定义管道新建一个管道multiple,ng g pipe pipe/multiple修改multiple.pipe.tsimport { Pipe, PipeTransform } from '@angular/core';@Pipe({ name: 'multiple'})export class MultiplePipe implements PipeTransform {...转载 2018-05-05 22:36:51 · 1496 阅读 · 0 评论 -
Ionic2中ion-tabs输入属性
Ionic2中ion-tabs输入属性水平有限,高手请绕道。1、设置标签栏的位置在Ionic2中Tabs的使用很多,但默认情况下IOS、Android、wp上显示位置都不同(如下图),影响了产品的一致性,找到好多资料,都没搞定,今天查看官方的资料时,发现其实很简单。 需要的效果:12345<ion-tabs tabbarPlacement="bottom"> <ion-tab...转载 2018-05-18 21:10:33 · 395 阅读 · 0 评论 -
Cannot find module “@ionic-native/geolocation”
进行ionic开发遇到获取百度地图式遇到Cannot find module “@ionic-native/geolocation”,,,,Try this:delete geolocation plugin:ionic plugin re cordova-plugin-geolocationthen:npm install @ionic-native/core --savenpm install...原创 2018-05-06 21:10:57 · 1300 阅读 · 1 评论 -
ionic3实现三级联动
目录安装 ion-multi-picker导入 app.module.ts创建 provider创建 page一个坑更多效果图1. 安装 ion-multi-picker终端运行:npm install ion-multi-picker@2.1.0 --save2. 导入 app.module.ts...import {MultiPickerModule} from 'ion-multi-pic...转载 2018-05-07 17:31:42 · 1616 阅读 · 0 评论 -
ionic3 命令行报错解决方法大全
目录:1.cordova 7.0 版本 build ios 失败2.ios-deploy 报错3.cordova-hot-code-push-cli 安装报 permission deniedYou need to be logged into your Ionic account in order to run ionic cordova resources.4.官方账号登录报 4045..io...转载 2018-05-20 21:26:37 · 583 阅读 · 0 评论 -
怎样在ionic2中引入jquery?
npm install jquery --savenpm install -g typingstypings install dt~jquery --global --save在ts文件头部添加import $ from 'jquery'在html文件中添加<div id="div1"></div>在ts中$('#div1')......转自:https://blog.cs...转载 2018-05-15 16:31:12 · 1026 阅读 · 1 评论 -
ionic3在首页与子页面同使用tabs
ionic3在首页与子页面同使用tabsimport { App } from 'ionic-angular'; 请勿使用this.navCtrl.push(nextPage);或者在app.module.ts设置tabsHideOnSubPages需要先获取root页面,从root页面进行跳转即可:this.app.getRootNav().push(tabsPage);转自:https://w...转载 2018-05-27 21:28:21 · 1196 阅读 · 0 评论 -
Ionic2中的相册选择和拍照上传——ImgService
目录目录前言Cordova准备ImgService服务的实现ImgService服务的使用示例效果相册选择器的汉化参考前言 在APP中启动相册选择器或者拍照上传图片这些功能是非常常见的。对于Ionic2,我们只能通过cordova插件实现调用原生的功能。下面将简单的封装一个选择相册或拍照上传图片的ImgService服务。具体如下。Cordova准备 下载安装所需的Cordovar插件: Im...转载 2018-06-04 15:24:19 · 318 阅读 · 0 评论 -
ionic3从手机相册选择多张照片预览并上传到服务器
安装插件①image-picker选择多张照片--参照https://ionicframework.com/docs/native/image-picker/命令--ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage me...转载 2018-06-04 22:05:59 · 2599 阅读 · 0 评论 -
ionic常见问题
记录一个ionic常见问题库:http://www.ionic.wang/article-articlelist-id-76.html原创 2018-06-12 21:33:43 · 261 阅读 · 0 评论 -
ionic3 自定义插件安装失败问题解决 Error: Failed to get absolute path to installed module
问题阐述在开发自定义插件时可能会出现多次安装插件的情况,如果不幸的话可能会出现如下报错:Error: Failed to get absolute path to installed module[ERROR] An error occurred while running cordova plugin add E:\TestPlugin --save (exit code 1).123解决方...转载 2018-06-06 00:24:06 · 869 阅读 · 0 评论 -
一个学习ionic2的教程分享
https://www.jianshu.com/p/d087eba81eb0原创 2018-06-22 11:00:58 · 274 阅读 · 0 评论 -
【Ionic】---App名字和图标修改+启动画修改(SplashScreen)
APP名字1修改项目目录下config.xml--name标签END APP图标和启动画1在项目的根目录下创建resources文件夹在文件夹中都放入icon.png(应用图标,最小192x192px,不带圆角),splash.png(启动屏幕,最小2208x2208px,中间区域1200x1200px)(可以是png、psd、ai)2在cmd中进入项目所在文件夹执行:ionic resource...转载 2018-07-09 19:56:04 · 1141 阅读 · 0 评论 -
the connection to the server was unsuccessful(file ///android_asset/www/index.html)
问题描述:使用ionic serve在浏览器上运行app没有问题,但是android真机运行报错the connection to the server was unsuccessful(file ///android_asset/www/index.html)解决方法:在config.xml添加<preference name="loadUrlTimeoutValue" value="70...转载 2018-07-16 11:13:22 · 5911 阅读 · 0 评论 -
ionic开发篇之踩坑集
一、API篇1.接口无法访问百度地图、自定义API无法访问,远程调试结果显示404 原因是cordova 5.x的版本增加了“Content-Security-Policy”用于解决安全访问的问题。默认情况下,只能访问本机资源。解决方法: 1.添加白名单插件,在项目目录下执行ionic plugin add cordova-plugin-whitelist12.在index.html头部增加<...转载 2018-07-03 14:11:55 · 1304 阅读 · 2 评论 -
error: resource android:attr/fontVariationSettings resource android:attr/ttcIndex not found.
当我运行ionic build android时,出现以下问题。 解决这个问题如下:查找和替换 com.android.support:support-v4: com.android.support:support-v4:27.1.0 在platform/android目录里。将下面代码添加到platforms/android/app/build.gradle 和 platforms/androi...转载 2018-07-03 14:20:46 · 6014 阅读 · 1 评论 -
https://blog.csdn.net/kongjunchao159/article/details/51689702
微信URL Scheme在外部浏览器中,可以通过<a href="weixin://">打开微信APP也可以通过加一些参数,打开微信APP里的指定页面<a href="weixin://dl/scan">扫一扫</a><a href="weixin://dl/feedback">反馈</a>转载 2018-07-16 17:06:30 · 573 阅读 · 0 评论 -
用div控制文字长度,超出范围用...表示
<div style="width:300px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden;">实时订重置密码成功实时订重置密码成功实时订重置密码成功</div>备注:其他元素也可用,比如<span></span>...原创 2018-07-04 10:33:39 · 4117 阅读 · 0 评论 -
chorme浏览器的Access-Control-Allow-Origin拦截限制
今天在公司调试一个项目,这个项目的前后端是分离开的,也就是说前后端是在两个站点上的。我负责的前端页面在请求后端数据的时候数据可以拿到,但是chrome安全级别高,自动拦截跨域和站点的数据请求及交互,出现如下图所以的问题: 在网上查找了很多资料,只知道原因是chrome浏览器安全拦截,但始终没有找到解决办法,最后询问了公司的大牛,给出指导,终于解决的这个问题,现将解决思路梳理一下,以备大家遇到类似...转载 2018-07-11 09:46:57 · 3817 阅读 · 0 评论 -
ionic3 java服务器(SpringMVC) 文件的上传与下载
安装插件官网https://ionicframework.com/docs/native/file-transfer/https://ionicframework.com/docs/native/file/https://ionicframework.com/docs/native/file-chooser/https://ionicframework.com/docs/native/fi...转载 2018-07-17 17:45:40 · 229 阅读 · 0 评论 -
ionic1使用imagepicker在安卓手机上闪退问题
在上一篇文章中,提到了如何在ionic1中使用imagepicker插件,并且实现该插件显示中文(汉化)问题有兴趣可以看看:ionic1使用ImagePicker插件并且显示中文(汉化)1、这次要解决的问题是app在一些手机上打开相册时,莫名闪退问题。在上一篇文章中我们这样使用imagepicker插件。通过连接手机联调后,可以查看相关的错误原因error $scope.openImageP...转载 2018-07-06 16:15:59 · 736 阅读 · 0 评论 -
ionic1使用ImagePicker插件并且显示中文(汉化)
在使用ionic开发时,打开相册应该是使用比较频繁的插件之一。下面讲讲我在项目中使用(这部分官方比较详细,就简单描述)以及解决插件显示英文问题1、imagepicker安装cordova plugin add cordova-plugin-image-picker2、在ionic1开发中的使用2.1在js文件中angular.module("app").controller("imagePicke...转载 2018-07-06 16:17:07 · 369 阅读 · 1 评论 -
ionic3实现app运行时的网络判断
最近在开发ionicapp,由于需要需要判断手机网络是否正常:安装插件:$ ionic cordova plugin add cordova-plugin-network-information$ npm install --save @ionic-native/network接着在app.modules.ts中全局声明:import { Network } from '@io...原创 2018-07-31 14:23:43 · 1787 阅读 · 0 评论 -
从后台获取图片的base64格式,直接显示在界面上失败,报base64 unsafe
最近做项目从后台获取图片的base64格式,直接显示在界面上失败,报base64 unsafe,怎么解决:首先说下原因,原因是后台返回的数据包含有空格和换行,解决: //去除字符串中的空格和换行 formatString(value) { if (value == null || value == "" || value == undefined) { re...原创 2018-07-31 18:58:27 · 5068 阅读 · 0 评论 -
js阻止事件冒泡及浏览器默认行为
//阻止事件冒泡函数 stopBubble(e) { if (e && e.stopPropagation) e.stopPropagation() else window.event.cancelBubble = true } // 阻止默认浏览器动作 stopDefault(e) { if (e &&a...原创 2018-07-31 19:01:34 · 175 阅读 · 0 评论 -
js发送get请求在url后面添加参数为json对象报错解决方案?
js发送get请求在url后面添加参数为json对象报错解决方案?(1)var obj1=JSON.stringify(obj);将对象转化成JSON字符串(2)'${ctx}/gis/view?obj='+encodeURIComponent(obj1, 'utf-8');在请求中加上encodeURIComponent进行编码处理...原创 2018-08-06 13:44:01 · 16240 阅读 · 0 评论 -
高德地图(AMap)JavaScript API的使用
申请JSAPI的开发者key申请地址:http://lbs.amap.com/dev/key 引入高德地图JavaScript API文件:<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script> 创建...转载 2018-08-06 18:13:24 · 8204 阅读 · 2 评论 -
js获取各浏览器的高度和宽度(考虑兼容性)
最近考虑动态调整div的尺寸,所以需要获取浏览器的尺寸又需要兼容所有浏览器:var width= window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;var height = window.innerHeight||document.documentElement.client...原创 2018-08-13 16:19:42 · 1322 阅读 · 0 评论