- 博客(40)
- 收藏
- 关注
RSS订阅原创 在uniapp中使用navigator.MediaDevices.getUserMedia()拍照并上传服务器
移动端拍照上传后图片不保存在用户设备上，试了好几种方法，uni-file-picker、uni.chooseImage、input type=‘file’，安卓手机都会默认把图片保存在手机，于是各种查资料，找到了以下方法，已验证可行。使用navigator.mediaDevices.getUserMedia()获取摄像头权限，并将视频流显示在video标签中。使用HTML的canvas标签来截取当前摄像头的画面，并将其转换为图片格式。
2024-08-13 14:26:44
1110
1
原创 SVN代码迁移到Git方法
一、新建一个文件夹myProject，将从SVN下载过来的代码复制一份拷贝到该文件夹下，注意：不要把.SVN文件拷贝过来。四、最后在Git仓库查看项目代码，大功告成。三、依次运行以下命令行将代码上传到Git。四、myProject项目模板创建成功。1.在SVN上新增一个项目。2.将代码提交到Git。
2023-08-02 13:51:07
721
原创 uni-app踩坑记
在默认的index.html中直接引入erada，页面样式会整个错乱，解决方案就是引入官方的index.html模板，再到上面引入外部JS。不要把v-if直接写在uni-forms-item标签上，可以在这上面包一层view，并将v-if写在view上。配置完成后无论是测试环境还是正式环境都带上/mobile/，否则会报错404。最重要的一步是在manifest.json中配置路径。在manifest.json中配置域名。
2023-07-27 16:05:42
2181
原创 彻底搞清扩展运算符...和解构赋值
1、对象的扩展对象的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象中。基本应用var json = { a:1, b:2, c:3 };var json2 = { ...json, d:999 };console.log(json2); //{ a:1, b:2, c:3, d:999 };合并对象var name = { "name": "lisa" };var age = { "age": 15 };var person = { ...name, ...ag
2021-06-29 15:00:04
2009
原创 JS数组中的find()、every()、some()和filter()方法傻傻分不清楚
var ages = [3,18,21,27];function checkAdult(age){ return age>=18;}ages.find(checkAdult); //18ages.some(checkAdult); //trueages.filter(checkAdult); //18,21,27//es6写法ages.find(age => age>=18); //18find()是在数组中找到第一个符合条件的
2021-06-07 16:54:27
2335
原创 js面向对象
学校里学过，但是已经忘的差不多了什么是面向对象？everything is Object，包含属性和方法的是类，类实例化出来的是对象，对象是真实存在的。比如对象Animal有name属性和eat()方法。面向对象的三大特征？1.封装：我们平时所有的方法和类都是一种封装，把内部的代码保护起来，可以供外部调用。2.继承：代码的复用，父类上的方法和属性，子类也可以拿来使用。3.多态：一种事物(动物)，可以有多种表现形式(鱼、猫、狗)常见的js构造模型？1.工厂模式function createP
2021-04-20 19:32:07
146
原创 前端模块化(AMD、CMD、commonJs、ES6)
为什么需要模块化？1.没有模块化的项目，通常需要在一个页面里引用多个<script>文件，分类性不强，不易维护。2.一个复杂的项目肯定有很多类似的功能，将独立的功能按规范封装成一个个独立的模块，并且可以被其他模块引用。3.常用的javascript模块化规范有四种：AMD，CMD，CommonJs，ES6模块化。AMD和CMD的区别？AMD是基于RequireJs(需要引入require.js)的规划范写的，它是通过define()函数来定义，第一个参数是数组，里面是一些需要依赖的包，
2021-04-17 15:26:06
982
原创 面试题之this的指向
1、在构造函数中let name='window'function Person(name,age){ this.name=name; this.age=age}this绑定在实例化的对象上let man=new Person('hkj',21)console.log(man.name) //hkj直接调用，this表示windowfun();2、在箭头函数中var name='hkj'function fun(){ var name="hkj1" retur
2021-04-15 19:00:58
496
原创 webpack的应用和理解
1、webpack的作用？a.模块打包。webpack里所有的文件都可以看作是一个个模块，可以将不同模块的文件打包整合在一起，保证项目结构的清晰和可读性。b.编译兼容。为保证各类浏览器的兼容性，webpack的loader机制可以将一些less、scss、jsx等转换成浏览器可以支持的代码。c.能力扩展。通过webpack的plugin机制，实现对代码的压缩打包和优化，要想使用一个插件只需要require()它，然后将它添加到plugins数组中。2、webpack的打包原理？a.读取webpac
2021-04-07 16:21:58
328
2
原创 js倒计时汇总
获取倒计时//返回截止日期的倒计时function countDown(endTime) { let d, h, m, s, ms: any; //1.获取现在的时间 var presentDate = new Date(); //2.获取时间戳 var funtureTime = new Date(endTime.replace(/-/g, '/')).getTime(); var presenTime = presentDate.getTime
2021-03-23 15:05:28
229
原创 css一些手生系列
一些css手生系列1、animationanimation:myAnima 1s linear infinite; //后两个属性表示匀速和循环播放-moz-animation:myAnima 1s linear infinite; /* Firefox */-webkit-animation:myAnima 1s linear infinite; /* Safari and Chrome */-o-animation:myAnima 1s linear infinite; /* Oper
2021-03-18 16:09:28
142
2
原创 ionic如何使用json动画和svga动画
json动画npm install --save ng-lottieapp.module.ts和你需要写入动画的文件module.ts引入import { Component, NgModule } from '@angular/core';import { LottieAnimationViewModule } from 'ng-lottie';@NgModule({ imports: [ LottieAnimationViewModule.forRoot() ]})ex
2020-06-11 12:03:37
558
原创 js大转盘
直接上代码<!--大转盘html--><div class="wheel"> <div class="wheelBox"> <ul id="wheel" class="wheel-list"> <li style="transform: rotate(0deg);"> <i></i> <div class="prize"> <i
2020-06-11 11:42:32
912
2
原创 ionic3监听滚动事件回到顶部
<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">scrollEvents="true"必须加，否则不生效。topTimer = null;onScroll(event){ this.topTimer && clearTimeout(this.topTimer); this.topTimer = setTimeout(function(){ event.detai
2020-05-25 18:13:40
444
原创 ionic4 使用EventEmitter3更新数据
安装：npm install --save eventemitter3创建event.service.tsimport { Injectable } from '@angular/core';import { EventEmitter } from 'eventemitter3';@Injectable({ providedIn: 'root'})export class E...
2019-11-14 14:37:55
581
原创 使用swiper插件获取后台数据的坑
使用swiper插件获取后台数据时，loop:true会失效。原因就是dom元素还没渲染出来，添加一个定时器即可解决。setTimeout(()=>{ this.mySwiper = new Swiper('#swiper-container',{ observer:true,//修改swiper自己或子元素时，自动初始化swiper observeParents:t...
2019-11-14 14:27:40
1289
转载 移动端如何调试？
https://blog.youkuaiyun.com/lihangxiaoji/article/details/81357787
2019-09-16 15:10:04
178
原创 如何在ionic中使用swiper
1.在入口页index.html引入文件<!-- Link Swiper's CSS --><link rel="stylesheet" href="/assets/css/swiper.min.css"><!-- Swiper JS --><script src="/assets/js/swiper.min.js"></script...
2019-09-09 14:25:45
1237
原创 ionic fixed定位后苹果手机上滑下滑，定位的元素会抖动
这个问题困扰了几天没找到什么好的解决办法，偶然翻文档发现这个组件。<ion-fab vertical="top" horizontal="end" slot="fixed"> <ion-fab-button> <ion-icon name="add"></ion-icon> </ion-fab-button></...
2019-09-09 14:08:44
472
原创 ionic4的填坑记录
在app.module.ts中导入离子插件时，报奇葩错误Type “NetworkOriginal” is not assignable to type 'Provider'解决：最新的ionic4需要在你的import结束时添加/ ngx。import { Network } from "@ionic-native/network/ngx";import { Device } from...
2019-06-06 10:52:35
629
原创 ionic--底部tab替换图标
1、tab替换自定义图标tabs.html<ion-tab [root]="tab1Root" tabTitle="借款" tabIcon="tab-loan"></ion-tab><ion-tab [root]="tab2Root" tabTitle="认证" tabIcon="tab-auth"></ion-tab><ion-ta...
2019-04-02 17:18:12
558
原创 ionic拍照上传
打开控制台安装camera和file、file-transfer插件ionic cordova plugin add cordova-plugin-cameranpm install --save @ionic-native/cameraionic cordova plugin add cordova-plugin-filenpm install --save @ionic-native...
2019-03-29 15:54:36
325
原创 ionic获取手机通讯录contacts
打开控制台安装contacts插件ionic cordova plugin add cordova-plugin-contactsnpm install @ionic-native/contactsapp.module.ts引入import { Contacts } from '@ionic-native/contacts';providers: [ Contacts ]contact...
2019-03-29 15:29:54
1174
原创 js获取图形验证码
function getCaptchaToken(){ ajaxRequest(baseUrl+'/h5/captchaToken',function(data){ var data=data.data; $(".captchaImg").attr('src',baseUrl+'/h5/captcha?captchaToken='+data.captchaToken); /...
2019-03-25 16:23:47
1704
原创 移动端背景图铺满屏幕
&lt;div class="divBox"&gt; &lt;/div&gt;.divBox{ background: url(../images/bg1.png); position: fixed; width: 100%; height: 100%; background-size:cover;}亲测这样写会失真，有些手机会把图片拉...
2019-01-29 14:26:08
1278
原创 前端面试题集合，持续更新中（附答案，简单易懂）
输入www.baidu.com并按下回车，中间发生了什么？1、 浏览器先尝试从Host文件中获取该请求对应的IP地址，如果没有找到，就使用DNS域名解析服务器来解析IP地址。2、 建立TCP连接3次握手。3、 发送HTTP请求。4、收到服务器的响应，浏览器解析HTML文本，构建DOM树，解析css，构建样式树，两者合成render树，最后渲染在页面上。webpack和gulp的区别1、........................................................
2019-01-09 15:49:58
7870
1
原创 js登录设置cookie
COOKIE基础及应用什么是COOKIE==>页面用来保存信息,比如:自动登录,记住用户名COOKIE的特性–同一个网站中,所有的页面共享同一套cookie–数量,大小有限(不超过4k)–过期时间//设置cookiefunction setCookie(key,value,day){ var cookie=key+'='+encodeURIComponent(value......
2018-12-21 15:10:00
6587
原创 angular实现新闻公告滚动和图片轮播
新闻公告滚动//template&lt;div id="news"&gt; &lt;div id="scrollBox" [class.scroll_top]="flag"&gt; &lt;span *ngFor="let item of notice"&am
2018-12-21 11:02:56
3061
原创 Angular2样式绑定
1、[style.propetyName]a. 基本用法//template&lt;p [style.fontSize]='fSize'&gt;&lt;/p&gt;&lt;p [style.width.px]='width200'&gt;&lt;/p&gt; //带单位//component.tsfSize: string='14px';width200: st
2018-12-19 11:38:22
450
原创 前端必会基础知识：原型和继承
1、理解原型对象无论什么时候，只要创建了一个新函数，就会为该函数创建一个prototype属性，这个属性就是函数的原型对象，该原型对象还有一个constructor属性和一个__proto__属性，由一个构造函数new出来的就是实例对象，它也有__proto__属性。他们之间的关系如下：function Person(){}; var per=new Person();Person.pr......
2018-12-13 14:21:43
1156
原创 函数的柯里化
看了不少大佬的文章，终于对柯里化有了初步的理解，简单总结一下。什么是柯里化？在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。看了概念还是一头雾水，用代码解释一下。例如有一个简单的加法运算：function add(a,b,c){ return a+b+c}ad......
2018-12-12 16:02:54
212
原创 简单总结position定位和元素水平垂直居中
positionposition的属性值共有四个常用的：relative、absolute、fixed、static。首先普及一下文档流的知识：显示元素对象在窗口排列时所占用的位置，自上而下，从左到右。脱离文档流会影响其他元素的位置。relative：相对定位，不脱离文档流，在文档流原先的位置进行位移。absolute:绝对定位，脱离文档流，相对于最近的且不为static的父元素进行定位，...
2018-12-11 17:22:55
7827
原创 for、for...in、for...of、forEach和map之间的区别
遍历数组//for…in遍历属性名称key，for…of遍历属性值value let arr=[a,b,c]; for(let i=0; i&amp;amp;lt;arr.length; i++){ console.log(i) //a,b,c 最早学会使用的 } for(let i in arr){ console.log(i) //0,1,2 } fo.........
2018-12-11 16:21:04
643
原创 MVC、MVVM的区别和联系
网上的资料很多，面试也经常问到，为了进一步加深理解，还是以博客的方式记录下来。MVCMVC是Model-View-Controller的简写，M是后端传递的json数据，V是指用户看到的HTML页面，C即处理页面的js逻辑，MVC是单向通信，也就是View和Model必须通过Controller来承上启下。流程图如下：...
2018-12-11 11:36:50
322
原创 函数防抖和函数节流
首先分别用一句话区分函数防抖和节流的区别。函数防抖就是在用户停下相应动作，并在给定时间过去之后仅被调用一次。函数节流是用户在执行相应动作时，每隔一段时间发一次请求。针对一些频繁触发的事件如scroll、keyup、resize，如果正常绑定事件的话，可能在很短的时间内连续触发事件，十分影响性能。这里可以用防抖和节流来优化页面。函数防抖举个栗子，用户的输入事件keyup怎么处理呢？ti......
2018-12-10 17:34:09
312
原创 浏览器兼容性问题
1、消除不同浏览器的默认边距 *{ margin:0; padding:0; }2、多张图片排列中间会有间隙 float:left3、两个div设置上下边距，边距大小会重合或者以大的那个边距为准4、子元素设置margin-top不生效，它会附加给父元素，解决方案：子元素设置padding-top5、当input设置了高度时，在火狐和ie9以下会出现文本不能和输入框垂直居中的现象，...
2018-12-04 11:49:37
209
原创 前端面试—网站性能优化
1.1 浏览器缓存浏览器在向服务器发起请求前，会先查询本地是否有相同的文件，如果有，就会直接拉取本地缓存，缓存策略如下图：
2018-11-29 17:56:30
2332
原创 HTTP1.0、HTTP1.1以及HTTP2.0 主要特性对比
HTTP1.0早期1.0版本的http协议是一种无状态、无连接的应用层协议。浏览器每次发送请求都和服务器建立一个tcp连接，进行三次握手，服务器处理完后立即断开连接，服务器也不记录过去的状态。对于数据量大的长连接请求来说，如果该请求没有得到及时响应，就会阻塞下一个请求。http1.1就是来解决这些问题的。HTTP1.1首先是长连接，http1.0需要在请求中加上connection：ke.........
2018-11-29 11:19:51
641
原创 移动端适配小方案
做前端开发也有一段时间了，现分享一个移动端适配的小方案；将根元素html的font-size设置成4vw，也就是4%的视宽，接下来子元素的计算方式为1rem=设计图的大小X4%；举个栗子：设计师出的psd图是750px，则子元素的1rem为750X4%=30px，如果psd图是320px，则子元素的1rem为320X4%=12.8px，现在就假设给我的设计图是750px的，然后里面有一张图片是...
2018-11-20 17:04:38
141
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人