- 博客(47)
- 收藏
- 关注
RSS订阅原创 基于Electron 实现图片批量上传
先分析一下需求：原本的需求就是简单的一句话，“前端做一个离线工具可以批量处理图片”，关键点前端，离线， 批量， 图片前端做 = 肯定需要node，处理问价。之前对node一窍不通离线 = 需要用的可以生成客户端的东西批量 = 可能会有很多图片 = 是否需要压缩接下来逐一解决，先来处理关键点，实际离线不离线的主重要重要的是能够批量的把图片给处理了。所以我们先来解决如何使用原生js结合node来处理文件与文件夹1: 获取文件夹路径批量处理图片，有两种方式，第一种一次性选中多张图片进行处理，第二
2021-08-20 17:19:54
1305
3
原创 react 调用手机摄像头识别二维码（pc端，移动端均可）
好久没有写博客，最近刚做完react 调用手机摄像头识别二维码的功能，做的过程中遇到了好多问题，也百度了很多方法结合实际情况最终实现了此功能。在实现的过程中有很多都是在原声的HTML和JS里实现的，拿过来改改就行了。首先安装组件，组件文档地址npm i jsqr --save看文档发现jsqr 使用很简单，只需要传递三个参数就可以使用了。但是难就难在这三个参数怎么获取，通过查看jsqr的事例发现是结合navigator.mediaDevices.getUserMedia实现的mediaDevic
2021-08-03 16:24:45
3177
3
原创 React Native报错总结
特别声明：react native坑太多，可能每个版本对应的环境都不一样，现使用环境配置如下react native0.64.0java JDK 1.8Android Studio 4.1CocoaPods 1.10.1问题：1* Where:Build file '/Users/xxxx/Desktop/zxcz/zxrn1/AwesomeProject5/android/build.gradle'* What went wrong:Could not compile build
2021-03-24 10:34:32
433
原创 OSS 上传报错 client(...).put(...).then is not a function 的解决方法
记录一个实际项目中使用OSS上传到阿里云bug，也算是一个坑。如上图new OSS进行文件上传，使用put上传，希望返回的是一个promise。但是返回的是一个generator，所以就会出现如下图的报错：client(...).put(...).then is not a function查找issues看到：如果想要返回的是一个promise，需要new OSS.Wrapper，这样就可以解决上述报错的情况。可是很奇怪，我的另外一个项目new OSS直接使用并没有出现这个报错。相同写法，那个是
2021-01-20 10:39:27
2952
2
原创 iframe 父子页面之间的相互通信-文件上传（react-angular）
最近在处理这样一个项目，react使用iframe嵌套了一个angular项目，现在想让两者进行通信实现一个上传的功能。看到这个需求是不是有点一脸茫然，硬着头皮上吧。我会按照我的业务流程叙述我是如何实现的。父页面 是react 写的子页面 是angular写的接下来的叙述均为父子页面1：子页面调用父页面方法子页面方法： window.parent.postMessage(传递参数, "*");父页面方法：window.addEventListener( 'message'
2020-12-29 17:22:06
697
2
原创 react native踩坑日记（7）：头像编辑（拍照，选择图片，上传，毛玻璃背景效果实现方式）
最近继续迭代RN项目。也开始了继续踩坑，爬坑的“幸福生活”。上周刚完成头像设置的相关操作，大致分为毛玻璃背景，选择相册图片，拍照，图片裁剪，上传OSS（这一步主要是服务端配合，后面会详细说明）。由简到难，逐个讲解使用到的npm包和相关方法。1：毛玻璃的效果实现先看下效果图：要实现这个的效果，我尝试了使用opacity，但是跟这个完全不搭边，所以就找了个npm包，@react-native-community/blur，文档跳转yarn add @react-native-community/blur
2020-12-29 15:57:02
1240
原创 uni-app 微信小程序拒绝授权后如何再次授权
在业务中可能会需要获取用户当前位置或者手机相机等权限，微信小程序是需要用户授权才能使用，但是当用户拒绝授权后再点击对应位置就会没有反应。操作代码如下，例子为二次授权相机权限uni.getSetting({ success(res) { if (!res.authSetting['scope.camera']) { uni.authorize({ scope: 'scope.camera', success(res) { // 授权
2020-12-03 11:32:56
2582
原创 uni-app 微信小程序解决音频无法自动播放
我遇到的音频无法自动播放的原因是：音频使用的是本地文件，改为url（把音频文件上传到服务器）访问的形式即可。但是使用本地文件并非所有机型都无法播放，测试过程中只发现iphone X 以上版本出现无法播放的问题。改为url访问后所有机型均可正常播放代码如下：data() { return { Audio: uni.createInnerAudioContext(), // 创建 }; },methods: { palyAudio() { this.Audio.sr
2020-12-03 11:25:00
3323
1
原创 react native踩坑日记（6）：获取手机通讯录 按照首字母排序
获取通讯录npm包react-native-contacts地址获取汉字首字母npm包pinyin地址使用上面两个npm包，再加上RN的组件就可实现获取手机通讯录内容，且可以按照姓名的首字母进行排序。实际相关的文章有很多，这里主要讲述自己在实现的过程中遇到的问题，以及是怎么解决的。1:react-native-contacts的使用具体使用的方法可点击地址查看详细的使用步骤，这里说一下我在使用的过程中遇到的问题。react native >= 0.6版本的不需要在单独link如果你.
2020-10-16 15:40:19
805
原创 react native踩坑日记（5）：react native 设置tabs
在我们项目中难免会需要tabs组件，下面介绍三种创建tabs组件。分别是：antd mobile for react native 的组件tabs，包括如何使用antd mobile for react native 的组件Carousel，这是个投机取巧的方法，但是也蛮好用的使用createMaterialTopTabNavigator 创建tabs路由导航。这是个react navigation 的API逐一分析下利弊antd mobile for react native 的组件tab
2020-06-23 14:43:07
1385
原创 react native踩坑日记（4）：react native 中设置阴影，渐变
推荐两个组件还是蛮好用的，具体怎么用我就不会多介绍了，看文档就可以了。有什么问题可以留言一起探讨一下。import LinearGradient from 'react-native-linear-gradient'; // 渐变import {BoxShadow} from 'react-native-shadow'; // 阴影这个阴影是生成一个阴影区域，放在需要阴影元素的下方，个人感觉还是没有css的那种阴影友好...
2020-06-23 13:49:04
586
原创 react native踩坑日记（3）：react native使用E charts
项目中有图表模块，首先就想到了E charts，但是想再RN中使用可仅仅是npm装一下就行了。另外在结束一个可以在RN中使用的图表库，因为没有中文文档，我这英语水平就放弃了，如有需要可点击此处查阅下面讲述一下如何在RN中集成，并使用E charts第一步点击此处下载此npm包的zip包，把其中的src文件夹复制出来放到我们自己项目的目录下，放到哪自己定。为什么要这么做呢？是因为我们需要修改其中的配置文件，通常在我们进行代码管理的时候是不上传node_modules文件夹的，这样我们做的修改仅仅是修
2020-06-18 13:07:43
585
原创 react native踩坑日记（2）：react-native + react-navigation 实现底部导航点击动画
我也是一个RN初学者，而且钻研的不是很深，如果你想要在这看到深入原理，针对每一个细节都有详细解读的话那你可以另寻他处，我这只能满足普通的业务需要。不会讲述每一个点如何使用，只是提供一个可以突破的点，怎么做可以去实现。趁着项目还在启动，整理一下如何使用react-navigation的createBottomTabNavigator创建底部导航时增加上点击动画。实际是一个很简单的功能，但是不知道为什么被我搞了一天，快下班了灵光一闪给整出来了。不需要借助npm包什么的，只需要用到RN的Animated,
2020-06-16 10:10:54
470
原创 react native踩坑日记（1）：react-native中集成二维码扫描，识别相册二维码
声明：写这篇文章的时候安卓手机未测试，苹果手机可正常使用，如果有后续结果，会在更新，但是理论上是适配ios和安卓首先选择如下三个npm包import {RNCamera} from 'react-native-camera';import ImagePicker from 'react-native-image-picker';import {QRreader} from 'react-native-qr-scanner';安装方法yarn add react-native-cameraya
2020-06-11 16:42:53
1312
原创 IOS模拟器弹出软键盘
有一些视频或者博客上所说的是这样一个操作步骤：iOS Simulator -> Hardware -> Keyboard但是可能是由于版本升级导航栏里不再有Hardware，这个时候的操作步骤在这里IOS I/O -> Keyboard 取消选择：“Connect Hardware Keyboard”这样就可以使用模拟器自己的软键盘。还有一个简便的方法。如需什么操作，找不到可以直接在Help搜索这个操作按钮即可比如我们要唤起软键盘，直接搜索Keyboard，就可以操作
2020-06-05 10:23:39
2852
1
原创 react native踩坑日记（0）: 如何配置 IOS React-native环境
最近要搞一个RN的demo，搞就搞吧，那就先把环境搭起来。搭就搭吧，这环境一搭就是一天。给大家分享一下自己在搭建环境时所遇到的坑，和一些可以方便我们快速搭建环境的方法。接下来的一系列操作：如果你有很稳定很迅速的科学上网方式，那就直接按照RN官方给的说明安装就行了如果你已经安装了所以插件，但是运行项目失败，你可以直接跳转到第六步看起我们也是按部就班的按照官方给的文档进行安装，只不过会有些需要注意的点。安装Homebrew，因为RN官方推荐使用Homebrew安装node和Watchman，当然你也
2020-06-02 14:39:56
363
原创 and design 如何引入阿里图表矢量库 创建自定义icon
首先，我们先看下antd官方给出的文档antd提供了createFromIconfontCN方法来自定义icon。其中的scriptUrl需要我们从阿里图标矢量库上去获取，在如下位置：如果没有项目，请先创建一个。然后就可以自行搜索添加到项目，具体怎么操作可自己研究一下。注意：每添加，修改，删除项目中的图标时都需要更新一下这个链接在实际项目中的使用：首先安装：npm install --save @ant-design/icons然后在你需要的位置创建自定义icon，例如：const Ico
2020-05-28 11:27:32
443
原创 如何解决：index.js:1 Warning: [@ant-design/icons] Should have `component` prop or `children`.
这个问题出现的原因可能有很多，我只遇到了这其中的一个。警告的全部信息如下：警告信息翻译一下： [@ant-design/icons]应该有一个component或者children我们找到报错的位置：type赋值运用到了三目运算符，当isType === item.type 为false是赋值""，这就是造成错误的原因，没有给[@ant-design/icons]一个component或者children，所以解决方法是：当isType === item.type 为false是赋值" "，在"
2020-05-28 11:16:53
8312
原创 前端面试题整理一波
2020年的开头并不是很好啊，想要跳槽是难上加难。整理一波面试题就当是巩固自己的只是积累了。js1.前端如何解决精度问题前端的精度问题经典案例就是0.1+0.2 = 0.30000000000000004出现的原因：在计算机角度，计算机算的是二进制，而不是十进制。二进制后变成了无线不循环的数，而计算机可支持浮点数的小数部分可支持到52位，所有两者相加，在转换成十进制，得到的数就不准确了，加...
2020-04-01 16:51:16
646
原创 小程序订阅，跳转等问题
wx.navigateBack(Object object)的使用微信官方给出的参数及使用说明，但是可能会遇到以下一个问题。使用wx.navigateBack返回不了这个时候看一下你从上一个页面如何跳转到此页面的。这里wx.reLaunch(Object object)的使用说明是：关闭所有页面，打开到应用内的某个页面，关闭两个字很重要，如果你使用了wx.reLaunch(Objec...
2020-01-17 11:53:10
1379
原创 Linux终端命令 —— ls命令
在上面两篇文章中介绍了ls、ls -a，今天这篇文章介绍一下ls -l和ls -h先来回顾一下ls和ls -a，你还记得吗？ls 输出当前目录下所有可视文件ls -a 输出当前目录下所有文件 包括隐藏文件ls -l作用：以列表的形式展示当前目录下文件的详细信息如上图，当前目录下文件会以列表的形式展示。其中蓝色框框内的说明一下，小写d开头的说明这是一个目录文件，反之则不是。ls ...
2020-01-13 15:12:02
1707
原创 Linux终端命令 —— 命令格式等
命令格式command [options] [arguments] command：命令options：--单词 或 -单字arguments：参数，有时候选项也带参数。其中[ ]中的内容可省略，例如命令ls即可使用命令自动补全tab 键如上图我的my文件夹下有一个文件名很长的文件夹，想要cd进去会很烦人这个时候我们只需要敲cd big，按下tab键就可自动补全。...
2020-01-10 14:18:20
136
原创 Linux终端命令 —— 常见的几个命令（简单）
因为我自己用的是mac所以就没有安装虚拟机，直接在自带的终端里尝试使用并学习Linux命令，此篇文章就简单的介绍6个简单的命令。首先，介绍两个可以控制终端窗口大两个快捷键command+ "+" //控制终端窗口字体变大command+ "+" //控制终端窗口字体变小两个很好用的快捷键。接下来进入主题，因为我也是初学者，所以不会详细说明-***的详细的命令，如果您有需要可自行百度...
2020-01-08 16:32:56
784
原创 小程序修改顶部电量，时间的颜色
小程序官方提高的apiwx.setNavigationBarColor({ frontColor: '#ffffff', backgroundColor: '#ffffff' })其中frontColor的值只能是#ffffff或者#000000在设置的时候必须结合backgroundColor使用，单单设置frontColor是不起左右的，而且小程序会报错。...
2019-12-31 16:35:30
3690
原创 react 移动端 实现video的自动播放
之前因为要实现视频的自动播放，就先做了一个原生的视频自动播放demo，但是真的想要在实际的项目中实现起来就步步是坑。坑，我已经踩过了，在这里分享一下react在移动端中如何实现视频的自动播放。项目背景这个项目是react结合Ios和Android实现的一个APP，应甲方爸爸的要求，实现一个朋友圈内视频的自动播放。大概就是这个样式。需求分析当拿到需求的时候第一反应应该就是去百度了吧。网上有很...
2019-10-16 14:56:12
4681
2
原创 antd mobile tabs 上下滑动时会切换的坑
在使用ant design Tabs，正常的上下滑动，如果出现偏差就会出发Tabs的左右滑动。在使用的过程中很不友好。所以我们这个左右滑动给禁掉就行了：swipeable={false}添加如上的属性即可...
2019-10-14 14:33:51
3331
5
原创 原生js 实现滑动到视频处自动播放
我们先来谈一谈这个需求，需求要求我们实现当一个视频被滚动到可视区内的时候自动播放，根据这个我们来分析一下怎么去实现它。首先考虑以下两个重点问题我们如何知道现在处于可视区的是那个视频如何去触发视频自动播放/暂停看过h5新增标签video 的api的同学都知道，通过document.getElementById或者其他什么获取到这个video，然后XX.paly()即是播放，XX.paus...
2019-09-17 18:27:11
7473
12
原创 原生js渲染列表，点击列表内容可改变列表内容
实际需求如下图：点击文件名，改变大小，状态以及操作的内容，点击删除恢复原装，我们先来分析一下这个需求，以及难点。要求：原生js渲染，所以我们不能用v-for，只能用字符串拼接或者模版字符串来写难点：如何获取到我点击了哪一行元素，我想有很多小伙伴最大的难点就是这个了。如何去改变表格的内容，原生js没有vue那样的机制，数据改变重新渲染我们针对以上三个方面来写我们的代码图片需求有四个要...
2019-09-10 17:16:27
1579
原创 element ui 单选框无法选中
修改别人留下的bug，单选框默认选中一个，想要修改的时候却无法选中其他的。这种问题出现的情况有很多种，我这里只是分享一下我遇到的问题。看下代码：在看下代码中freightTemplate的结构当freightTemplate还像上图没有被赋值时，单选框还可以正常的切换，但是当这个对象被重新赋值之后，单选框就无法被选中。大概原因是：vue的v-model无法修改这么某个对象下的某个属性...
2019-09-06 15:07:04
5614
2
原创 总结一下小程序遇到的坑
图片显示问题项目中的icon因为某种原因都是用的png图片出现的问题是：因为图片的名称是中文，造成安卓机部分图片展示不出来。ios正常解决方法：把对于的图片改成英文，项目中的图片等文件的命名最好都是用英文命名，否则就会出现乱七八糟的问题。小程序调试的问题小程序在开发过程中难免会在真机调试看看效果，但是在真机调试的时候你是否遇到了一些问题，例如报错defined is not de...
2019-08-27 14:40:50
501
原创 微信内如何唤起app或下载
微信很早就禁掉了scheme在微信内调起app，除非是少数和微信有合作的白名单才可以，现在很多是让用户在微信中去点开在浏览器中打开从而在调起app。这样体验就不是很好，也很麻烦，很有可能会损失一部分用户。现如今我们只需要把app接入腾讯的应用宝就行了，下面是操作步骤注册，地址应用接入就按照它的步骤填写相关信息，提交审核在管理中心配置点击红框框处，进入配置页面如图，上...
2019-08-13 17:14:00
1922
2
原创 小程序 ：thirdScriptError sdk uncaught third Error或module "app.js" is not defined
小程序出现这种情况：这种情况：还有这种：不要慌，只要这小程序详情里勾选es6转es5就好了
2019-08-05 09:44:10
6909
5
原创 使用for循环，还是map，还是其他？
将准备把项目中使用for循环的地方用其他的方式替换，因为自己还不是高深的大牛，只能用简单运行时间来判断性能的好坏，将会逐渐的完善这篇文章。补充：console.time() 结合console.timeEnd() 可以打印这个区间内代码的运行时间1:for循环拿数组下对象里的某个字段的值背景：服务端返回给我们前端的数据格，式有很多都是一个数组下有多个对象，但是我们在做项目的过程中可能只需要...
2019-07-22 11:55:23
969
1
原创 ant design 照片墙无法正常显示
在做项目的过程中使用到了antd 的上传组件，但是单张上传图片完美。没有任何缺陷，但是使用照片墙的时候接口调用成功，确一直显示loading。通过任务栏打印对比，handleChange 也是被调用了3此，但是this.setState 少调用了一次。这里我们需要对handleChange进行改写，看代码：handleChange = ({ file, fileList }) => {...
2019-07-01 10:08:30
2136
原创 ant design table 如何让文字居中显示
const columns = [ { title: '活动标题', dataIndex: 'title', key: 'title', align: 'center' // 设置文本居中的属性 }, { title: '编辑时间', dataIndex: 'c...
2019-06-26 18:32:18
24361
4
原创 git 常用命令
git命令在我们的实际开发过程中是不可获取的，掌握基本的git命令是程序员所必须的，总结一下在开发过程中实际常用的一下基本的git命令。git init // 初始化一个git仓库，也就是创建一个全新的git 仓库克隆远程仓库git clone http://***********.git // 为仓库地址，可到仓库处复制如果说项目是多人开发，经过了fork，我们可以用下边这...
2019-06-26 17:09:36
101
原创 原生JS点击滚动到指定位置
背景：新接手的一个项目做一个一页展示的官网，只有头部导航，中间一个图片加一个按钮，还有一个footer。需求：点击main区域的按钮滚动到二维码显示区域，问题是所在区域并不是搭建出来的而是在背景图片上，用锚点就麻烦了，所以就采用了改变offsetTop来实现滚动。需求解析：我们要滚动到指定位置，首先要知道要位置距离顶部的距离，这个可以自己去量取。当我们知道这个距离的时候就很容易实现了，在我们实...
2019-06-11 11:03:25
32356
原创 记录：数组去重，一行代码去重
记录：数组去重，一行代码去重记录一下由于自己的不信心造成的一点小问题，在我们刚接触程序的时候肯定会接触到各种各样的方法，数组就是其中很重要的一环，我们知道有很多种数组的排序数组去重的方法，其中最简单最暴力的数组去重莫过于new Set（arr）但是这里需要提醒大家的是new Set（）的返回值并不是一个数组。我们看代码：我们使用new Set（）去重返回的是一个对象，所以如果你要对去重后的...
2019-05-21 10:09:57
323
原创 安卓如何调用react的方法
react 中安卓如何调用react的方法有些时候我们需要把前端页面嵌入到app里，此时可能有些需要前端与app协同来实现一下操作，但是要如何实现呢？我们先来说安卓app如何调用js的方法，代码如下：componentDidMount() { window['方法名'] = (data) => { console.log(data) }; }我们只有在钩...
2019-05-17 14:45:54
1408
原创 antd mobile 复选框（checkbox）如何实现全选且不影响单选？
antd mobile 复选框（checkbox）如何实现全选？整体思路Checkbox API整体思路我们需要点击一个多选框，从而实现全选对应的所有的复选框，但是又不得影响想要单个选中的操作，为什么会有这个但是下面会说明。Checkbox API属性 说明 类型 默认值defaultChecked 初始是否选中 Boolean 无checked 指定当前是否选中 Boolean ...
2019-05-14 18:10:25
5021
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人