- 博客(47)
- 资源 (5)
- 收藏
- 关注
RSS订阅
原创 Jest测试框架知识点总结
jest 是 facebook 推出的一款测试框架。JEST 官方文档：https://jestjs.io/docs/en/getting-started 需要连接外网。一、Getting Started开始安装：yarn add --dev jestor npm:npm install --save-dev jest提示：Jest 支持 yarn 的命令，但是 npm 也能工作。你可以比较 yarn 和 npm 在 yarn 命令文档里https://yarnpkg.com/en/.
2020-07-09 16:33:05
6513
1
原创 React Native 实现每4个数字或英文加一个空格的实现方法
本人自己写出的是想代码，如果有更好的实现方式，希望大家能回复下，共同进步吧。一、需要实现的功能1、只能输入数字或者英文2、最多输入16位3、每输入4位自动加一个空格4、删除空格后的第一个的数字或字母的时候，自动把空格删除5、输入内容，文本框后面会出现关闭图标先按照这个功能写下实现代码：我这里使用React Native 编译成的h5页面，没有控制软键盘的弹出。我这里使用的是普...
2019-01-02 10:30:07
3055
原创 mac上开发遇到的问题-散装笔记
总结以下自己遇到的问题，解决方法可能不适用于所有人问题：1、Permission denied解决方法：很明显，权限不足，如果要使用，通过如下命令进行授权即可：sudo chmod -R 777 要操作的目录地址2、解决方法：GitHub的Preferences设置里github账户用自己的私有账户Git里的配置写公司的git帐号公司项目的账号下面重装SSHOpen a terminal on Linux or macOS, or Git Bash / WSL on W.
2021-04-25 11:29:30
448
原创 小程序直接跳转到公众号的方法
实现效果 小程序打开公众号的实现效果 小程序不能直接打开公众号首页，但是可以通过打开公众号的某一篇文章，然后进入到公众号内。具体实现方法在公众号后台创建一篇文章，最好以xx.weixin.qq.com为域名 ，否则可能出现小程序不识别的问题；在小程序项目里创建一个webView的页面，访问的链接就是配置好的公众号文章链接；在本地运行小程序，在需要跳转的地方添加方法，点击先跳转到
2021-04-19 17:51:22
27799
6
转载 async、promise、setTimeout执行机制
题目描述：写出执行结果，并解释原因async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');} async function async2() { console.log('async2');} console.log('script start'); setTimeout(()=>{ console.log(
2020-07-09 15:35:52
324
转载 三分钟弄懂iPhone X 设计尺寸和适配
iPhone 8属于常规升级，屏幕与以往的iPhone6、6S、7系列相同。只有iPhone X的分辨率发生了变化，但变化仅限于物理像素层面。在真正决定屏幕内容的逻辑像素层面，新版的iPhone X与过去我们熟知的iPhone 4.7’’、iPhone 5.5’’ 放大模式宽度相同。通俗的说，iPhone X可看做是iPhone 4.7’’ 的加长版然而，事情并不是设计图加长这么简单。...
2020-07-09 09:56:58
730
原创 gyp ERR! build error gyp ERR! stack Error: `make` failed with exit code: 2 gyp ERR! stack at ChildPr
gyp ERR! build errorgyp ERR! stack Error: make failed with exit code: 2gyp ERR! stack at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:262:23)gyp ERR! stack at ChildProcess.emit (events.js:182:13)gyp ERR! stack
2020-05-28 09:27:52
12428
1
原创 实现多个标题的吸顶
<html> <head> <title>实现多个标题的吸顶</title> </head> <body> <ul id="container"> <h1>实现多个标题的吸顶</h1> <section> <div class="box">header1</div> <li&
2020-05-19 18:51:17
579
转载 CSS Variables for React Devs
这是一个有争议的观点，但是我更喜欢CSS-in-JS。 ????????但！ 我也非常喜欢CSS。 而且我不认为使用CSS-in-JS可以使您不必学习它。 无论哪种方式，您都在编写CSS！ 它的包装方式略有不同。无论您将CSS放在何处，都应该掌握该语言。 精通CSS将使您成为更有效的前端开发人员。在本教程中，我们将了解如何利用CSS中最令人兴奋的最新开发之一：CSS变量，AKA自定义属性。 我们将看到如...
2020-04-24 15:17:01
977
转载 Warning: componentWillMount has been renamed, and is not recommended for use
The ProblemWarning: componentWillMount has been renamed, and is not recommendedfor useInitializing state 初始化状态// Beforeclass AppComponent extends React.Component { state = {}; componentW...
2020-04-23 13:54:48
18029
1
原创 The href attribute requires a valid value to be accessible
报错信息：在react中使用a标签报错，解决办法将 个人博客 改成 个人博客 加个/ 即可
2020-03-12 14:33:33
1459
原创 ESlint常见报错问题
1、error Unary operator ‘++’ used no-plusplusESLint认为一元操作符，是不安全的，所以禁止使用确书写方式（ESLint格式）for循环的正确姿势如下for (i = 0; i < l; i += 1) {return;}2、eslint error ‘data’ is missing in props validation缺...
2020-02-25 16:15:22
16206
原创 React的生命周期
组件的生命周期分成三个状态：Mounting：已插入真实 DOMUpdating：正在被重新渲染Unmounting：已移出真实 DOMReact 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。componentWillMount()componentDidMount()componentWillUpdat...
2020-02-11 16:53:12
171
原创 React 入门实例教程
最近又重新学习了一遍React基础，下面自己做下简单的笔记总结。一、React的起源React起源于Facebook的内部项目，因为该公司对市场上的所有Javascript MVC框架都不满意，就决定自己写一套，用来架设Instagram的网站。做出来之后，发现这套东西很好用，就在2013年5月开源了。React 官网：https://reactjs.org/由于React的设计思想及其...
2020-02-11 11:44:35
430
转载 Babel的使用方法
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意味着，你可以现在就用ES6编写程序，而不用担心现有环境是否支持。下面是一个例子。//转码前input.map( item => item+1 );//转码后input.map(function(item){ return item+1;})上面的原始代码用了箭头函数，这个特性还没有得到...
2020-02-06 14:36:15
1745
1
原创 React知识点总结
最近因为疫情在家里呆着，没事总结总结知识点，以后也能当笔记用。1、constructor( )构造方法这是ES6对类的默认方法，通过new命令生成对象实例时自动掉用constructor()方法，该方法是类必须有的，如果没有显示定义，就会默认添加空的constructor()方法。ES5中，JavaScript是没有继承的写法的，因此，通过使用prototype来达到目的。例如：//构造函...
2020-02-05 11:17:24
394
原创 重构JS书籍知识点总结
函数上移动机：如果某个函数在各个子类中的函数体都相同，则将函数上移检查待上移的函数，确定完全一致检查函数体内引用的所有函数调用和字段都能从超类中调用到如果待上移的函数声明不同，则修改为将要在超类中使用的声明超类中创建一个函数，将待上移函数代码复制其中执行静态检查移除一个待上移子类函数测试移除其余待上移子类函数Before:class Employee extends ...
2020-01-20 14:56:31
332
转载 安卓性能优化之构建优化
安卓性能优化之构建优化建议整理1.为开发环境创建一个变体有许多配置是你在准备 app 的 release 版本的时候需要，但是当你开发 app 的时候是不需要的，开启不必要的构建进程会使你的增量构建或者 clean 构建变得很慢，因此需要构建一个只保留开发时需要配置的变体，如下例子创建了一个dev和prod变体（prod 为 release 版本的配置）。android { ... ...
2020-01-20 14:51:36
764
原创 PWA渐进式Web应用
Progressive Web App，简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。目录：1、PWA 基本介绍PWA 全称 Progressive Web App，即渐进式 WEB 应用2、PWA 核心技术揭秘Web app manifestService workerPromise / async / awaitFetch apiCa...
2020-01-20 14:46:27
956
转载 Taro原理总结
简介Taro 是一套遵循 React 语法规范的 多端开发 解决方案。现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分...
2020-01-20 14:44:09
5416
转载 Mac下Nginx 本地 HTTPS 配置（转载）
1、首先确保机器上安装了openssl和openssl-develnpm install opensslnpm install openssl-devel (安装报错 导致我没安装成功，但是也还是配置成功了 我感觉这个没啥用)2、然后自己给自己颁发证书cd /usr/local/etc/nginx/ (这个是证书的安装目录，建议放置在 nginx 根目录 )openssl genrsa...
2019-09-25 17:14:16
1844
1
原创 Node版本管理控制器
最近项目切换频繁，经常需要用到node版本的切换，现在总结一下Node的版本管理控制器的使用和安装1、Node 可以用n来管理版本的切换安装：npm install -g n查看帮助：➜ ~ n --helpUsage: n [options] [COMMAND] [args]Commands: n Disp...
2019-09-25 17:08:28
1332
原创 实用！移动端vConsole使用方法
平时在web应用开发过程中，我们可以console.log去输出一些信息，但是在移动端，也就是在手机上，console.log的信息我们是看不到的，这时候就需要移动端调试工具vConsole那么，如果将console.log应用到移动端呢？需要借助第三方插件：vConsole第一种用法：引入js文件资源链接&amp;amp;amp;lt;script src=&amp;amp;quot;path/to/vconsole.min.j...
2019-01-04 17:09:48
38066
3
原创 必备！VSCode常用插件
Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能，它很快就受到了大家的喜爱。
2019-01-04 11:42:49
2691
原创 h5和RN倒计时实现方法
工作中我们经常遇到需要倒计时的功能，那么具体如何实现呢，下面我把自己写过的几种方法提供给大家，希望大家能共同进步，转载要注明出处哦！第一种写法：html：<div class=""> <div class=""> 距结束剩余 <b v-if="time.day>0"> <span v-t
2019-01-02 14:12:11
1716
原创 h5分享到微信唤起app功能
下面说一下，常见的微信唤起app功能。先看下效果，我这找的以前的记录，因为我们线上已经改成分享唤起小程序了，大家将就看下吧。废话我也不多说，都是自己以前踩过的坑，直接上代码吧。1、在需要唤起的地方进行方法调用：const callApp = require(&amp;amp;quot;…/utils/callApp&amp;amp;quot;); //引入callApp.js文件const app = new callApp({sch...
2019-01-02 11:27:34
7141
原创 iOS如何阻止“橡皮筋效果”？
1.iOS safari 如何阻止“橡皮筋效果”？背景：iOS 5 之后开始支持 Native Scrolling，为 Web App 带来媲美原生应用的滚动体验。使用十分方便只要在 CSS 中加入：HTML CSS.wrapper {overflow: auto;-webkit-overflow-scrolling: touch;}但是 iOS Safa...
2019-01-02 11:07:56
8411
原创 xcrun: error: unable to find utility "instruments", not a developer tool or in PATH
用web storm 运行react-native 工程时，出错：xcrun: error: unable to find utility“instruments”, not a developer tool or in PATH解决方法：先安装xcode在 终端执行如下命令xcode 安装路径sudo xcode-select -s /Applications/Xcode.ap...
2018-11-28 16:17:53
1219
原创 React native if判断和for循环的写法
if判断的写法import React from 'react';import { View, Image, TextInput, Text } from 'react-native';class BindCard extends React.Component { constructor(props) { super(props); this.state = {...
2018-11-27 16:04:02
12479
原创 React Native setState赋值
state（状态）对于需要改变的数据，我们需要使用state。使用方法：一般来说，我们需要在 constructor 中初始化state，然后在需要修改时调用setState方法。 import React, { Component } from 'react'; import { Text, View } from 'react-native'; export default cla...
2018-11-27 15:12:16
2150
原创 【vue笔记2】-自定义指令
基础除了内置指令，Vue.js也允许注册自定义指令。自定义指令提供一种机制将数据的变化映射为DOM行为。Vue.js用Vue.directive(id,definition)方法注册一个全局自定义指令，它接受两个参数：指令ID与定义对象。也可以用组件的directives选项注册一个局部自定义指令（此方法相当于AngularJS restrict）属性值为A。钩子函数bind——只调用一...
2018-11-04 19:15:09
1073
原创 React Native引入动画效果
此处运用了Lottie动画，请参考https://www.lottiefiles.com/首先安装 npm i lottie-web 页面中引入import lottie from 'lottie-web'import animationData from './data.json'; //这里引入你的动画json文件代码中写入componentDidMount() { ...
2018-09-17 16:36:34
1253
原创 weex页面开发模式
页面开发模式：第一种：单页面（SPA） 通过 Vue-router + Vuex 来实现。这种方式是通过Router的方式来进行页面切换，如果页面不需要太多的交互效果，可以使用这种方式来实现。第二种：独立页面，每个页面都独立一个 bundle js 文件，通过 navigator对象进行页面切换，交互效果较好。推荐的开发模式整体架构使用独立页面的方式，在 src/entry 配置...
2018-09-17 15:18:08
879
原创 h5-吸顶效果的实现方法
前言 我们在开发过程中，经常遇到这种需求，搜索框或者菜单，初始位置不在顶部，当我们往上滑动页面的时候，它们会固定到顶部，往下滑动，又回到初始位置。那么这个功能，如果实现呢，下面将进行详细讲解.一、通过监听scroll事件，实现吸顶功能这是大家经常用的一种方法 吸顶效果的基本的开发思路，利用scroll事件进行监听scrollTop的值，当scrollTop达到一定的值得时候...
2018-08-17 09:37:53
16800
1
转载 Flutter解密
前言 这是我转载的一篇文章，文章主要对Flutter进行了详细的讲解。文章最后有原文链接。背景 Flutter：谷歌的移动端UI开源框架，2018年2月27日， Google发布了Flutter的第一个Beta版本。它是Google使用Dart语言开发的移动应用开发框架，使用Dart代码构建高性能、高保真的iOS和Android应用程序。Flutter的工具和库可以帮助开发者轻松地...
2018-08-16 14:47:34
3045
原创 二级联动效果开发实例
先看下效果图类似这种效果如何开发下面进行讲解 注：这里做的不是组件封装，是以业务角度进行的代码开发html&lt;div v-transfer-dom&gt; &lt;popup v-model="state.timeFlag" :hide-on-blur="false" position="bottom" cl
2018-08-16 11:11:07
1076
原创 倒计时功能如何开发？
前言 我们在开发过程中经常遇到倒计时的功能，那么应该如何开发呢，下面直接放干货单个倒计时功能/** * function 倒计时 * 参数：intDiff 时间 * 单位：s 秒 * author miaoyanhui */export function countDown(intDiff,fn) { let time = setInterval(fu...
2018-08-16 10:32:33
996
vconsole移动端日志插件
2018-08-15
popper.js轻量级提示插件
2018-08-15
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人