Giter Club home page Giter Club logo

my-note-book's People

Stargazers

 avatar

Watchers

 avatar  avatar

my-note-book's Issues

计算数组中某个元素出现的次数

定义数组arr = [1, 2, 2, 4, 2, 6, 7, 9], 计算2出现的次数我们可以使用遍历的方式,当然还有其他更好的方式

const count = arr.reduce((a, v) => v === 2 ? a + 1 : a, 0);
console.log(count);

ReactNative离线包填坑记

随便写了几行代码,想测试下真机安装,于是就用usb安装到了手机,结果经常报链接不到服务的错误,于是自然想到了打成离线包。

离线打包

我的是纯react native应用,使用react-native init 生成的,所以不一定对所有人都起作用。
1.使用keytool生成证书(10000天)

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

2.将my-release-key.keystore证书移动到根目录/android/app/.
3.在android目录下找到gradle.properties,添加下列代码:

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=你设置的密码
MYAPP_RELEASE_KEY_PASSWORD=你设置的密码

4.修改 android/app/build.gradle, 添加

    ...
    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    ...
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            signingConfig signingConfigs.release ----->新增
        }
    }

5.cd到android目录并执行./gradlew assembleRelease,希望你不报错。。。

我在执行后build failed 具体错误内容为

Duplicate file error when generating apk

出现这个错误时,在node_modules/react-native/找到react.gradle

do first代码块后添加

doLast {
    def moveFunc = { resSuffix ->
        File originalDir = file("${resourcesDir}/drawable-${resSuffix}")
        if (originalDir.exists()) {
            File destDir = file("${resourcesDir}/drawable-${resSuffix}-v4")
            ant.move(file: originalDir, tofile: destDir)
        }
    }
    moveFunc.curry("ldpi").call()
    moveFunc.curry("mdpi").call()
    moveFunc.curry("hdpi").call()
    moveFunc.curry("xhdpi").call()
    moveFunc.curry("xxhdpi").call()
    moveFunc.curry("xxxhdpi").call()
}

再执行 ./gradlew assembleRelease
6.最后链接手机,在android/app/build/output/apk/下找到app-release.apk,在该目录下执行 adb install app-release.apk

git命令自我理解

1. git checkout

  • 切换分支
git checkout branch_name

例如切换到master分支可以使用git checkout master

  • 创建分支
git checkout -b

当已经存在同名分支,使用git checkout -b会报错,这时可以用git checkout -B强制创建分支,并reset这个分支。

If -B is given, <new_branch> is created if it doesn’t exist; otherwise, it is reset.
  • 撤销修改
git checkout -- files 

复制缓存区指定文件到工作目录,撤销工作目录中新的修改

git checkout HEAD~ -- files 

复制当前提交节点的父节点的指定文件到工作目录,并加入到缓存区

git commit

  • git commit -a | git commit -am
    当修改和删除文件时(已经存在的文件)起作用,相当于
git add .
git commit (-m "xxx")

当新建了新的文件时,不可使用,需要先使用git add,再git commit

获取n个小时前的时间

最近做项目时,需要获取1小时前的时间,确实有点上火😆。之前笨笨的想法是获取当前时间,取到小时数,然后调用setHours()方法将小时数减去一,在这要加很多判断,比如减去这一小时会不会变成前一天,前一天会不会是前一个月,又会不会变成前一年,。。。。。。想想都头大,,,
不过,在网上我寻求到了一个不错的答案,记录下来,为作者点赞。

getOneHourAgo() {
    const now = new Date();
    const start = new Date(0, 0, 0, 0, 0, 0, 0);
    const millis = now - start - 3600 * 1000;
    return new Date(0, 0, 0, 0, 0, 0, millis);
}

用现在的时间减去最原始的时间计算出毫秒数,然后减去一小时也就是3600000毫秒,得到的结果其实就是一小时前的时间与最原始的时间相差的毫秒数,利用这个毫秒数创建的时间就是一小时前的时间。
哈哈,666了!

大屏总结

大屏分享

页面

思路

  1. 分为左、中、右三块
  2. 寻找布局相似点
  3. 实现界面
  4. 自动全屏

一、1. 分列、分行

  1. 分列方法
  • grid
  • flex
  • multiple columns
  1. 列间距
  • grid-gap
  • margin
    需要去除两头的margin,或者通过css选择器不给两头元素添加margin。
    注:flex布局不存在margin collapse
  • column-gap
  1. 块对齐

二、calc与scss计算

calc与scss计算

scss:
  • 加减
    绝对单位:px, pt, pc, in, mm, cm...绝对单位都能运算;
    相对单位:ex, em, rem...相对当前字体的都不能运算;

❌ 🌰

$plus1: 100px + 20ex; //不能换算的编译都会报错;
$plus2: 100px + 20em;
$plus3: 100px + 20rem;
.plus{
    width: $plus1 + 10px; //在变量或属性中均可做加减法运算;
}

报错: Incompatible units: 'ex' and 'px'.

✔️ 🌰

$minus1: 100px - 20; //第二个值可不带单位;
$minus2: 100pt - 20px; //运算是从左到右,如第二个值的单位不同于第一个值的单位(pt),
$minus3: 100px + 20cm; //将会对其进行转换(pt)后再运算;编译出来的值的单位也是(pt);
$minus4: 100rem; //可以正常编译输出;
$minus5: 100rem + 10em; //报错;--Incompatible(不相容) units: 'em' and 'rem'.);
.minus{
    width: $minus1;
    height: $minus1 + 30; //在属性还可以继续做运算;
    min-width: $minus2;
    min-height: $minus3;
    max-width: $minus4;
    max-height: $minus1 + $minus2;
}

  • 相乘的变量或者数字只能一个带单位。不允许不同单位相乘。
div {
  width: 10px * 20px; //error:  isn't a valid CSS value
}

css中允许使用/分隔数值,所以仅有/分隔没有运算时,不会当作除法运算,会原样输出。

参考:font '/'

div {
  font: 20px / 2px; //原样输出到css
  font: (20px / 2px); // 10px;
}
calc
尽情计算

三、 自动全屏

  1. 理想实现效果
    点击总览页按钮,新开tab,进入总览页并自动全屏展示
  2. 现实效果
  3. 全屏api
  • requestFullScreen()
  • exitFullscreen()
  • fullScreenChange()
    最初想法: 监听ESC按键, 在回调函数里执行跳转操作。
    最终实现:在大屏组件内监听fullScreenChange事件,并在unmount周期移除, fullScreenChange时判断是否在全屏模式,全屏就browserHistory.push到总览页

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.