- 博客(122)
- 收藏
- 关注
RSS订阅原创 移动端iphone手机简单兼容头部
1.iPhone的适配---安全区域(safe area) padding-top: constant(safe-area-inset-top); /* 兼容 iOS < 11.2 */ padding-top: env(safe-area-inset-top); /* 兼容 iOS >= 11.2 */<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minim
2022-03-09 09:42:04
420
原创 vue3与vite搭建时遇到的一些错误
一、创建路由router时报原因：版本问题解决方法：卸载掉之前装的npm uninstall vue-router重新装npm install vue-router@next -s二、原因：element-plus引用问题，之前是直接根据网上的解决：根据官网操作就可以了三、vite引入element-plus修改主题色报错原因：引入文件路径不对解决：~改成node_modules/，安装scss --dev，然后引入时去掉.scss/.css,完美运行..
2021-09-02 18:24:45
5286
原创 git 常用指令和遇到的一些问题
注释：Workspace：工作区 Index / Stage：暂存区 Repository：仓库区（或本地仓库） Remote：远程仓库常见操作与问题原来git的账密验证已经弃用，改用 token 或 SSH 密钥Git password authentication is shutting downAs previously announced, starting on August 13, 2021, at 09:00 PST, we will no longer accep...
2021-08-27 14:20:36
491
原创 web高德地图路线规划（多条）
由于这个是官方的api,官方中也有案例，这里就不细说了，直接上代码<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=d
2021-05-26 13:40:36
1392
原创 前端动画实现的常见方法
前端动画实现的常见方法SVGALottie的json动画css3动画SVGA地址：http://svga.io/intro.htmlSVGA 是一种跨平台的开源动画格式，同时兼容 iOS / Android / Web。SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。动画开发从未如此简单！SVGA 除了使用简单
2021-05-08 11:02:45
239
原创 uniapp如何获取IP地址
uniapp如何获取IP地址获取ip地址js获取ip地址uni-app获取ip地址获取ip地址最近一个uni项目涉及到获取IP地址，在网上看到用引入外部JS的方法来获取，uni-app配置模板没有找到index.html这个文件，所以这个没法在index.html直接引入，正常的可以直接外部js链接：http://pv.sohu.com/cityjson?ie=utf-8在浏览器打开后就能显示了IP信息js获取ip地址<script src="http://pv.sohu.com/cityjs
2021-04-30 11:00:59
11510
10
原创 微信小程序单击、双击、长按
wxml<view class="container"> <view class="btn" bindtap="tap" bindtouchstart="touchStart" bindtouchend="touchEnd"> 单击 </view> <view class="btn" bindtap="doubleTap" bindtouchstart="touchStart" bindtouchend="touchEnd">
2021-01-07 15:48:44
753
原创 js 代码优化点
尽量不要操作dom元素， 使用使用逻辑短路替换三元运算符 var value=true;value?value=2:''value && value=2 使用对象属性替换if-else // if版本if (a == 1) {return 'one';} else if (a == 2) {return 'two';} else if (a == 3) {return 'three';} else {return ...
2020-12-30 15:27:44
191
原创 js 复制功能
在开发中遇到一个复制功能，在这里就说明下两种方法第一种：使用Clipboard插件（https://clipboardjs.com/）安装：npm install clipboard --saveimport Clipboard from "clipboard";<div class="express_info_right" id="express_info_right" data-clipboard-action="copy" :data-clipboard-text="in
2020-05-29 15:59:13
335
原创 vue element ui Transfer 列表添加双击事件，
主要是利用render-content 自定义数据项渲染函数可以根据这个案例去了解，下面直接上代码<template> <el-transfer v-model="value4" :props="{ key: 'value', label: 'desc' }" :render-content="renderFunc" :data="data3"> </el-transfer></template>...
2020-05-14 10:48:41
2054
原创 JS监听返回、后退、上一页按钮的事件方法
原理：主要是通过pushState方法往histroy里增加url链接，并且提供popstate事件监测history栈里弹出urlhistory属性简单描述：history.back()与在浏览器点击后退按钮相同histroy.forward()与在浏览器中点击向前按钮相同history.go()方法中可以填写参数（表示跳转页面的个数）由于安全原因javascrip...
2020-04-29 12:11:59
4056
原创 视频流播放插件
1、LivePlayer H5播放器：https://www.liveqing.com/docs/download/LivePlayer.html#%E7%9B%B8%E5%85%B3%E4%BB%8B%E7%BB%8D（文档地址）总结：m3u8格式的流可以，rtmp的它里面的代码包都不行，demo:转存失败重新上传取消2、DPlayer：http://dplayer.js...
2020-04-27 19:37:06
1643
原创 微信小程序封装wx.navigateBack()方法，控制是否刷新
这个原理很简单，平时也可以能比较常见//封装方法：back(config) {let prevPageData = config.prevPageDatalet delta = config.delta || 1if (prevPageData) {let pages = getCurrentPages()console.log(pages)let prevPa...
2020-04-02 11:59:27
955
原创 微信小程序日历选择
1.这个也是一个组件，不过在这个组件上做了一些处理，日期选择下面直接上码，有需求的可以直接现用，index.jsPage({ /** * 页面的初始数据 */ data: { activeType: "rounded", year: new Date().getFullYear(), month: new Date().getMo...
2020-01-20 18:04:00
1900
原创 微信小程序6位支付密码输入框
之前做过一个微信小程序密码输入框的问题，这里突然想起一个组件，感觉这个也挺常用的，所以特在此记录下，方便使用这个是github地址：https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2Fevan2020%2Fsix-Input-box在这里我就举个自己使用的例子，下面的是样式；具体代码还是看github上的，里面的源码可以现用...
2020-01-20 17:36:55
2986
1
原创 app 嵌套h5页面问题
1.app与h5页面方法监听与参数传递2.Android webview 如何打开本地存储，提供给JS调用 html5 的lwindow.localStorage功能，还有其他的权限3.Android与Js交互之JSBridge的使用的坑4.app内打开h5页面先显示一篇空白页面后才进入h5页面5.h5中的路由跳转会有一层阴影；去掉阴影body { line-height...
2020-01-09 19:12:44
2234
原创 js 历史记录、前进、后退 方法封装
历史记录主要是通过缓存来存储数据，前进后退通过控制缓存的数据进行选择，添加或删除相当于入栈和出栈export default { StepLength: 9, set(that, name) { console.log(that.nowPage + '.....that') let history = this.get() let step = ++histo...
2019-12-26 16:38:38
861
原创 input 一些常用的操作
1.修改input光标的颜色和粗细input{caret-color: #F52C72;}2.去除input边框和去除当点击input框时显示的边框{border:0px;outline:none;cursor: pointer}去除input边框在样式里加 border: 0px;去除当点击input框时显示的边框 outline:none;如果inp...
2019-12-15 17:50:03
915
原创 vue 常见应用场景
1.this.$refs.wrapper获取为underfind原因：获取不到DOM节点，还没有渲染完成就获取，所以获取回来的是underfind,造成的原因有多重，在我的案例中造成功的原因是在这个div内使用了v-if这里使用v-if时获取不到，v-if跟v-show的区别在于v-show只是隐藏，DOM元素还存在；归结原因就是DOM节点还没有渲染就去获取解决方法：v-if改为v-s...
2019-12-15 17:34:36
2895
原创 简单的css3d柱状图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
2019-08-26 13:45:50
1104
原创 CSS3水平抛物线动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <style> * { pa...
2019-08-12 09:53:13
1075
原创 原生 JS 实现移动端 Touch 滑动反弹
因为这个我也是看了别人代码，这里推荐各位可以关注前端大全这个公众号，里面有很多关于前端只是，很值得我们学习，尤其是刚入前端的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width...
2019-05-29 10:27:32
303
原创 css 继承和可变性
今天看了有关css的文章，虽然现在用css经常用，但有些东西还是值的自己记录下的，这里简单列举下;这里是这两个var()和currentColor案例。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport...
2019-05-16 16:18:42
272
原创 css 布局和排版
今天看了有关css的文章，虽然现在用css经常用，但有些东西还是值的自己记录下的，这里简单列举下;这里讲rid是二维布局。意思就是Flex只能同时在一个方向进行作用，而Grid却可以在纵横两个方向同时工作。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
2019-05-16 16:16:04
473
原创 css 选择器和函数
今天看了有关css的文章，虽然现在用css经常用，但有些东西还是值的自己记录下的，这里简单列举下;这里讲一个比较新的函数 conic-gradient()是属于css-images-4的一位新成员。就是可以实现不同角度渐变色的一个函数。<!DOCTYPE html><html lang="en"><head> <meta chars...
2019-05-16 16:08:45
464
原创 css文本排版和内容元素方向
今天看了有关css的文章，虽然现在用css经常用，但有些东西还是值的自己记录下的，这里简单列举下;主要是这个writing-mode<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w...
2019-05-16 16:05:39
1027
原创 css规则
今天看了有关css的文章，虽然现在用css经常用，但有些东西还是值的自己记录下的，这里简单列举下css规则/*1. @charset用于定义样式表中使用的字符编码。它必须写在样式表的最开头且前面不可有别的字符。 */@charset "UTF-8";/* 2.@import用于导入外部CSS样式表文件。 */@import '1.css';@import 'custo...
2019-05-16 16:01:45
329
原创 css3 filter 简单实用 与background-blend-mode结合实用
这个两个属性就不多说了，直接上代码，看效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
2019-05-16 15:55:08
1232
原创 微信小程序生成海报下载到本地手机本地
里面有注释，这个就不详细说了，把对应的的图片路径换掉，就可以完成运行了index.js在这里有一个问题，所以在ctx.draw里面设置了一个定时器，因为官方文档说在ctx.draw回调中会绘制完成，但是有时去生成图片保存本地的时候，内容还没有绘制完成，导致生成图片失败，所以在这里加了一个定时器，让他绘制完成后再去生成图片去保存，不知道是不是我理解错误，还是本来就有这中情况，有知道的请告知...
2019-05-15 14:53:49
879
原创 js获取查询字符串参数；一个实用的api
获取url里面的参数值或者追加查询字符串，在这之前，我们一般通过正则匹配处理，然而现在有一个新的api，具体详情可以查看这里，可以让我们以很简单的方式去处理url。假如我们有这样一个url，"?post=1234&action=edit"，我们可以这样处理这个urlvar urlParams = new URLSearchParams('?post=1234&action...
2019-04-30 10:26:23
1184
原创 JS获取html代码的纯文本以及获取html代码的img
let ct='<li><a class="query" href="/redmine/projects/aj_ada010/issues?query_id=7">上周进展</a></li><li><a class="query" href="/redmine/projects/aj_ada010/issues?query_i...
2019-04-16 16:32:10
1990
1
原创 微信小程序使用canvas画不规则图形
一、根据UI在海报中画不同的图片形状的路径，这中用css很简单，用canvas画的话就要了解canvas中的几个方法，效果图：代码如下：Page({canvasIdErrorCallback(e) {console.error(e.detail.errMsg)},onReady(e) {// 使用 wx.createContext 获取绘图上下...
2019-04-16 15:10:52
3139
原创 微信小程序canvas 绘图方法，生成图片，下载图片所遇到的bug(跟canvas相关的bug)
一、canvas 绘图方法及安卓手机出现绘图不准解决方案 原因：微信 canvas 绘制也是一个异步函数，即ctx.draw()是异步操作，在 ctx.draw() 后面直接获取 canvasToTempPath 是不能获取到 canvas 的具体内容的。所以ctx.draw(false,function(){// 当 canvas 绘制完成之后，调用，可以生成临时路径，并且获取完整的图片，...
2019-04-15 12:07:17
1901
1
原创 微信小程序自定义头部（navigationStyle）及手机适配
一、官方文档https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html -----页面配置中avigationStyle导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮)。在app.json window增加na...
2019-04-12 17:53:38
10567
1
原创 Uncaught (in promise) 的解决方法
在微信小程序开发过程中，使用了promise,但是在使用的过程中报Uncaught (in promise)错误，第一次遇到这种错误，所以在此记录下，方便以后解决问题 getImage: function(url) { return new Promise((resolve, reject) => { wx.getImageInfo({ src: ...
2019-04-09 14:57:46
209323
11
原创 css实现页面底部固定在屏幕最下方,内容占满屏后紧跟其后的两种方法
1.只针对底部高度固定的情况，不能解决底部高度不固定的情况，原理：主要内容放在page-main里面，page-container最小高度100%（注意这里html，body高度也要设为100%），position为relative。footer的position为absolute，相对于page-container居于底部。page-main有个padding-bottom为footer的高...
2019-01-18 15:21:17
24670
1
原创 纯css滚动进度条
1.原理：利用线性渐变，代码比较简单就不详细说了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
2019-01-12 09:49:41
711
原创 js 数组扁平化
1.数组扁平化概念数组扁平化是指将一个多维数组变为一维数组遍历数组arr，若arr[i]为数组则递归遍历，直至arr[i]不为数组然后与之前的结果concat2.实现的五种方式2.1. reduce遍历数组每一项，若值为数组则递归遍历，否则concat。function flatten(arr) { return arr.reduce((result, ite...
2019-01-07 18:26:31
332
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人