小生鲜-CSDN博客

原创微信内置浏览器下滑露底

微信内打开往下下拉会出现网页由xxx提供，其实很简单可以通过给document绑定禁止滑动事件解决document.addEventListener('touchmove', function(e) { e.preventDefault();},{passive: false});第三个参数一定要写成对象{passive:false},如果默认写成false默认冒泡阶段可能在手机中没...

2019-12-10 09:04:50 583

原创 TypeScript在Vue中this报错问题

最近做项目使用ts做类型检测在使用this.$refs.top.offsetHeight获取高度总是报错，先用变量接收是不会报错的，这里报错this没有定义类型，我们改成这样就可以完美解决了(this as any).$refs.top.offsetHeight...

2019-11-22 14:40:30 4627 2

原创 CSS3background属性连写

background ：color image position size repeat attachment clip origin 颜色图片地址位置尺寸平铺模式设置固定的背景图像是固定还是随盒子移动裁剪背景图片平铺的最开始位置...

2019-08-05 11:02:39 497

原创关于React-native-update安装及使用中出现的问题

RN开发在使用热更新功能react-native-update时(详细安装过程不在赘述，自行到官网查看)，这里主要讲一下我在打包中遇到的问题，报错出现此问题是因为我们使用的第三方插件SDK没有更新到新版本，SDK还是旧的(RN在0.57.1将Android SDK的版本更新到27)，问题找到了我们只需在对应插件中找到build.gradle更改其版本差别即可，打开node_modules中...

2019-04-09 15:23:39 1267 1

原创关于ReactNative开发报错The development server returned response error code:500

最近在自己开发一款基于RN的app，之前都是正常遇到红屏报错都一一解决，但是报500这个错误是我在一次打包之后开始报错的，之前打包安装成功一直正常，具体报错信息百度了说babel问题的比较多，按照提示更改之后还是不行，国外的介绍也是没有特别详细的解决办法，没办法自己研究吧，看了RN的一遍文章在react-native包升级到0.56.0以上babel依赖包变更为metro-react-nati...

2019-02-22 14:53:46 850 2

原创 js 封装formatTime parseTime toThousandFilter numberFormatter

/** * Parse the time to string * @param {(Object|string|number)} time * @param {string} cFormat * @returns {string | null} */export function parseTime(time, cFormat) { if (arguments.length === 0 || !time) { return null } const format = cFo.

2022-03-28 10:30:39 212

原创 canvas随便粒子特效

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>粒子.

2022-03-09 15:55:58 230

原创 git 项目工作流程

1. 克隆项目到本地开发git clone http://xxx.xx2. 创建本地项目分之git branch xxxgit checkout xxx3. 提交代码到本地仓库git add .git commit -m 'feat: 增加新功能' (git commit -m 'fix: 修复xxx' )4. 检查远端仓库是否有更改git remote add origin http:xxx.xx 与远程仓库链接git pull origin master --re

2022-02-23 14:18:10 223

原创 node-sass 安装报错

项目中用到node-sass 但是在执行npm i 操作安装项目依赖时会报错依次执行npm uninstall node-sassnpm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/npm i这样node-sass才可以安装成功，项目才可以运行起来...

2022-02-21 21:51:13 360

原创使用rollup发布自己的前端插件npm各种踩坑

rollup配置问题官方文档都有这里就不细说了，简单配置如下：import babel from 'rollup-plugin-babel'import resolve from 'rollup-plugin-node-resolve'import builtins from 'rollup-plugin-node-builtins'import { uglify } from 'rollup-plugin-uglify'export default { input: './src/i

2021-10-21 16:07:12 534

原创 CSS设置滚动条样式

在H5开发过程中如果对滚动条有要求我们可以通过特定的代码来约束滚动条样式，可以添加以下代码尝试（overflow：scroll-x || scroll-y）::-webkit-scrollbar: { width: 10px;} // 设置滚动条整体样式::-webkit-scrollbar-thumb { background: red;} // 滚动条方块样式::-webkit-scrollbar-track { border-radius: 10px;

2021-10-21 11:03:29 500

原创 axios取消请求方式

axios是基于Promise的HTTP客户端，目前在客户端被大量广泛应用。axios的底层也是利用XMLHttpRequest对象来封装的。我们都清楚在XMLHttpRequest对象中可以通过let xhr = new XMLHttpRequest();xhr.open('GET or POST', url);xhr.send();// 取消请求使用 xhr.abort()在axios客户端中有两种取消当前请求的方式：第一种通过其内部提供的CancelToken来取消co

2021-10-11 16:30:06 6652 2

转载 js计算旋转角度方向

最近在做移动端得项目，有一个恶心得需求，手指拖动转盘旋转增加音量，角度算法很麻烦，这篇文章很有帮助点击这里改成touch事件就可以

2021-06-28 15:14:09 2002

原创 JS增加自然月

//JS判断闰年代码 function isLeapYear(Year) { if (((Year % 4) == 0) && ((Year % 100) != 0) || ((Year % 400) == 0)) { return (true); } else { return (false); } } //转化时间 function formatTime(s, overDate) { var nowTime = Date.now().

2021-04-09 16:32:21 312

原创 IOS 不支持this.$router.go解决办法

在使用Vue路由实例对象$router.go进行页面切换时ios是不起作用得，可以使用 location.href="javascript:history.go(-2);" 解决

2021-03-20 13:49:55 956

原创 VueCLI 环境变量配置测试和生产环境

在开发Vue项目中，有时我们需要去打包部署两套代码，分别为测试和生产。Vue打包项目时也提供了配置方法，可以参见VueCLI文档development模式用于vue-cli-service serveproduction模式用于vue-cli-service build和vue-cli-service test:e2etest模式用于vue-cli-service test:unit三种不同的模式我们可以指定 "build" : "vue-cli-service bui...

2020-12-23 11:27:10 1023

原创 vue.config.js配置文件

const path = require('path')function resolve(dir) { return path.join(__dirname, dir)}const CompressionWebpackPlugin = require('compression-webpack-plugin')const productionGzipExtensions = ['js', 'css']const isProduction = process.env.NODE_ENV ===.

2020-12-17 10:21:19 582

原创 H5微信浏览器长按弹框

最近一直在做移动端的项目，目前已经提测，测试发现了导航栏长按会出现弹窗（微信默认的弹窗）如图刚开始以为是图片被选中了，添加了user-select：none属性不起作用，其实添加pointer-events:none（防止点击触发）是可以完美解决这个问题的，看微信开发社区说的没用（document.addEventListener('WeixinJSBridgeReady',func)在页面监听到WeixinJSBridgeReady事件再做pushState可以解决这个问题）...

2020-11-19 17:49:00 871

转载 IOS获取焦点页面放大

IOS获取焦点框变大问题

2020-10-14 16:52:16 286

原创 gulp打包项目ES6问题（无报错遗漏）

在做基于layui框架的后台管理系统打包项目的时候使用了默认提供gulp配置进行项目压缩打包，项目在刚启动的时候使用gulp打包是正常的，在完成一些功能后打包发现莫名的报错，尝试删除包文件重新安装还是报错我们在写项目的时候使用了ES6语法需要转移安装babelnpm install --save-dev gulp-babel @babel/core @babel/preset-env （注意gulp-babel版本如果是8.0以下安装）安装完成在gulp文件中配置.pipe(babel

2020-09-26 11:14:39 742

原创 Uniapp打开微信开发者工具报错

最近看了一篇文章觉得前端目前各类小程序框架也好几个了，哪种性能更好请看这篇文章，推荐使用uniapp，去看了官方文档决定下一个项目开始使用，先搭建环境吧，下载Hbuilder添加了个测试项目，Ctrl+R运营到微信开发者工具第一次没成功，报错报错内容是没有这样的文件或目录，第一次使用也不知道问题在哪，重新运营好几次还是不行，去uniapp群里咨询了也没解决，那还是自己找吧，大概率是我们微信开发者工具版本过低导致，我看了一下当前版本是1.02开头，官方最新版已经是1.03起了，当初放弃升级是考虑升级.

2020-09-14 14:09:12 1359

转载 Vue路由懒加载方式

Vue路由及组件懒加载方式

2020-08-21 10:42:00 97

转载 Vue打包文件过大

关于Vue项目打包完之后文件过大看了很多博客，觉得这篇写的不错，也很全面 VUE CLI3项目优化

2020-08-13 13:57:38 147

原创 Vue中keep-alive使用 include/exclude不起作用问题

最近在做项目重构，用到了keep-aliveVue内置组件（<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。）看了官网使用方法挺简单，可以设置缓存组件或者不缓存，只需要使用include- 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max- 数字。最多可以缓存多少组件实例。我这里需要不缓存组件使用了exclude，并...

2020-07-09 16:37:24 12094 4

原创 audio音频在IOS无法触发oncanplay事件

微信浏览器真是哪都是坑啊，之前项目有音乐分享功能，用到了音频audio，在chrome浏览器中调试是没问题的，会依次audio事件函数，android手机调试也没问题，在用ios手机调试时没触发音频加载完成可以播放函数oncanplay，由于需要计算出歌曲结束时间不触发函数就没法获取分秒时间，自己想了好多办法没用，看了一些博客也没特别好的解决办法，那就只能自己想了。我这里迂回的解决了事件不触发问题，首先是判断是否为IOS系统var isiOS = !!navigator.us...

2020-06-06 15:14:38 3372

原创小程序图片裁剪Simple-Crop使用

小程序图片裁剪插件有wx-cropper和image-cropper根据自己项目功能使用了Simple-Crop它可以支持H5，安卓，小程序，小程序使用方法在GitHub上有详细介绍，使用也比较简单，Simple-CropGitHub链接（点击跳转）把组件复用到小程序时微信开发者工具可以正常的裁剪图片，真机调试时会报错误，选择图片加载不出来，拖动图片裁剪区域会报错，总之图片没加载出来使用裁剪缩放，旋转图片，还原都是会报错，暂时没找到问题，但是真机预览图片是可以加载出来，功能也...

2020-05-21 15:29:44 1500 3

原创微信小程序强制退出

最近做小程序碰见好多问题，之前做过一个项目没上线，最近做的项目碰到好多问题，包括我们再使用wx.navigateTo(Object object)或者组件navigator做页面跳转页面栈达到10层时跳转这时候就不可以使用了，所以在做页面跳转的时候要规划好，页面层级跳转不能太深。在一定场景下有时我们需要直接退出小程序，看了一些介绍使用wx.navigateBack(Object object)...

2020-05-06 12:04:07 2541

原创小程序自定义导航采坑

公司项目小程序使用了自定义导航，需要使用小程序API去获取设备信息wx.getSystemInfo，来设置导航栏高度，页面中使用scrill-view，设置高度需要通过计算wx.getSystemInfo({ success: res => { console.log(res) var isiOS ...

2020-04-23 16:42:52 645

原创 Gulp:UnhandledPromiseRejectionWarning报错

使用构建工具Gulp来执行图片压缩打包过程中出现报错(node:20312) UnhandledPromiseRejectionWarning: Error: spawn E:\项目\支付\node_modules\optipng-bin\vendor\optipng.exe ENOENT at notFoundError (E:\项目\支付\node_modules\cross-...

2020-04-14 10:54:32 3760

原创微信小程序报错{"errMsg":"hideLoading:fail:toast can't be found"}

最近在调试微信小程序时，发现有报错问题，虽然没影响使用，但是看着不舒服啊，还是着手解决吧，先看一下报错从论坛看了看说是最新版本的微信7.0.13测试版会出现，但是还得找找看看是不是这样我们都知道wx.showLoading和wx.hideLoading是成对使用的，在去代码中中发现还是代码问题wx.showLoading({title:'加载中'})wx.request({ ...

2020-04-02 10:51:41 9247

原创微信小程序自定义导航栏

首先在app.json中配置为自定义导航"window": { "navigationStyle": "custom" },接下来就是创建组件了 .wxml<view class='nav' style='height: {{status + navHeight}}px'> <view class='status' style='height: {{s...

2020-03-26 13:55:02 272

原创 touchend事件在小米手机出现的问题

今天碰见个奇葩问题，测试同事的小米CC9手机在测功能时由于页面有touchend事件结果只触发touchstart没有触发touchend，不知道小米手机是怎么回事，没办法迂回解决吧，试了试touchcancel是可以成功触发的。我这里是定义了touchcancel事件函数在里面调用了touchend事件函数解决了问题，当然保险起见还是要判断一下是小米手机在触发相应事...

2020-03-25 16:32:04 445

原创省市区三级数据

自己整理得省市区数据，之前下载了一个发现了好多错误const city = [ { name: "北京", city: [ { name: "北京", area: [ "东城区", "西城区", "朝阳区", ...

2020-03-21 14:49:27 1127 1

原创小程序日历，日期选择

最近在做微信小程序用到了日期选择，推荐哥组件简单好用微信小程序日期选择组件

2020-03-21 14:47:11 825

原创 Echarts地图tooltip配置，关闭

最近在做一个使用地图的项目，使用了echarts地图插件Echarts官网查看具体使用API项目中使用了散点图具体配置根据项目需求进行更改，我的配置如下var option = { animation: true, animationDuration: 1000, animationEasing: 'cubicInOut', animationDurationUpda...

2020-02-20 12:25:36 7784 4

原创 H5微信公众号关闭页面

function closePage(){ setTimeout(function() { //安卓手机 document.addEventListener( "WeixinJSBridgeReady", function() { WeixinJSBridge.call("cl...

2020-01-09 11:17:22 4296 4

原创 Vuecli3.x使用fastclick报错

使用vuecli3快速搭建项目模板解决移动端300ms延迟需要安装fastclick，当然如果你使用ts还需要安装@types/fastclick在引入main.ts中是会报错import FastClick from 'fastclick'FastClick.attach(document.body)一般这类问题都是使用了ts才报错的，去node-modules下面找到...

2019-12-13 10:31:28 941

原创 postcss-write-svg在Vue中应用实现1px边框

创建项目部在赘述，配置vw移动端适配请查看Vue中vw配置在项目资源文件中新建svg.scss文件@svg 1px-border { height: 2px; @rect { fill: var(--color, black); width: 100%; height: 50%; }}@svg 1px-bord...

2019-11-22 16:22:14 928 1

原创 Vue使用vw做移动端适配

使用vue-cli来构建项目目录(我这里使用的是vuecli3@版本)vue create 项目名称下载依赖包文件npm i postcss-url postcss-import postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-u...

2019-11-22 13:02:38 498

原创微信小程序同声传译使用总结

最近在做项目中需要使用录音转文字，之前用微信SDK可以直接使用wx.translateVoice({}），但是小程序中没有提供此类方法，没办法只能查资料解决了，看了好多大多是保存当前录音文件掉讯飞接口实现语音转译，还需要后台配合，当然后台你也可以使用node来做，还有一种就是小程序提供的插件微信同声传译，有简单的实现方法当然用简单的第一步在微信公众平台配置，找到设置--第三方设置--插件管理...

2019-08-28 16:00:06 4048