摘录

我见过春日夏风,秋月冬雪,也曾踏遍南水北山,东麓西岭,可这四季春秋,苍山央水,都不及你瞅我展眉一笑

阅读全文
electron打包桌面应用

官方文档

结构

1
2
3
4
5
my-electron-app/
├── package.json
├── main.js
├── preload.js
└── index.html
阅读全文
uni-app

接口请求发生错误,可能原因

安卓系统请求头部不会自动带上Content-Type,后台代码有校验

安卓系统6.0以上会提示需要获取手机权限,不允许授权时候应用会闪退问题解决方案:

manifest.json 文件中,app-plus.distribute.android 增加以下代码

1
2
3
4
5
6
7
8
"permissionExternalStorage" : {
"request" : "none",
"prompt" : "应用保存运行状态等信息,需要获取读写手机存储(系统提示为访问设备上的照片、媒体内容和文件)权限,请允许。"
},
"permissionPhoneState" : {
"request" : "none",
"prompt" : "为保证您正常、安全地使用,需要获取设备识别码(部分手机提示为获取手机号码)使用权限,请允许。"
}

阅读全文
更换主题颜色
  1. 把 css 文件放到服务器上,通过 XMLHttpRequest 请求文件,获取到文件内容之后替换颜色。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    getFile(url: string) {
    return new Promise((resolve, reject) => {
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.responseType = "text";
    client.onreadystatechange = () => {
    if (client.readyState !== 4) {
    return;
    }
    if (client.status === 200) {
    const urlArr = client.responseURL.split("/");
    resolve({
    data: client.response,
    url: urlArr[urlArr.length - 1],
    });
    } else {
    reject(new Error(client.statusText));
    }
    };
    client.send();
    });
    }

    getIndexStyle() {
    this.getFile("//doc.mamaezhan.com/web/my_theme.css")
    .then(({data}: any) => {
    this.originalStyle = this.getStyleTemplate(data);
    this.writeNewStyle();
    });
    }
阅读全文
Vue + TypeScript

项目相关配置在哪里写?

由于采用vue-cli@3.x版本来初始化工程,所以没有了2.x版本对外暴露的webpack配置文件,所以如果相对项目进行一些配置,需要在项目根目录下新建vue.config.js.
比如需要修改项目启动的端口号,去掉打包后文件名的哈希值,如下:

1
2
3
4
5
6
7
module.exports = {
baseUrl: '/', // 默认为根目录下 '/'
devServer: {
port: 8989
},
filenameHashing: false
}

Vue.prototype 定义的全局变量无法使用

如果在main中定义了一个全局变量

1
2
import apiConfig from "@/apiConfig";
Vue.prototype.apiConfig = apiConfig;

但是在组件中无法使用该变量,需要在 .d.ts 文件中加入如下代码:

1
2
3
4
5
6
import Vue from "vue";
declare module "vue/types/vue" {
interface Vue {
apiConfig: any;
}
}

以上代码可在官方文档找到

阅读全文
Gitment评论

在根目录的 _config.yml 中添加下面代码

1
2
3
4
5
6
7
8
# 评论
comments:
gitment:
enable: true
owner: '' // github 的 ID 或用户名
repo: '' // 用于存储评论的 GitHub 仓库名称
client_id: '' // 注册 gitment 获得的 client_id
client_secret: '' // 注册 gitment 获得的 client_secret

阅读全文
HTML、CSS、JavaScript

AMD 支持

AMD 定义了 define 函数,可以用 define 探测该函数是否定义,或进一步用 define.amd 是否有定义(用于检测是否在 AMI)环境,如果是,就用 define 定义模块,如果不是,继续检测是否运行于 CommonJS 中,比如 NodeJS,如果是,则将 my 复制给 module.exports。

1
2
3
4
5
6
7
8
9
var MODULE = function() {
var my = {};
// 代码……
if (typeof define == "function") {
define(function() {
return my;
});
}
};
阅读全文
前端小知识
  • 1em=16px(浏览器默认值)

  • 在 before 或 after 伪类中使用字体图标时,记得设置 font-weight,否则显示不出来

  • oncontextmenu=”return false” 在

    标签中用来取消鼠标右键

  • 使用数学运算的时候,可以先查看 Math 对象。运行速度比用 js 算快。

  • 使用缓存机制来提升页面回访效率。

  • jquery 在 1.9 开始的版本都不支持 live()和 bind()方法了,全部都改成 on()方法

阅读全文
cli 脚手架工具封装

工程结构

工程目录结构如下
/bin # —— 命令执行文件
/lib # —— 工具模块
package.json

使用 commander.js 开发命令行工具

nodejs 内置了对命令行操作的支持,node 工程下 package.json 中的 bin 字段可以定义命令名和关联的执行文件。

1
2
3
4
5
6
7
8
{
"name": "demo-cli",
"version": "1.0.0",
"description": "我的cli",
"bin": {
"demo": "./bin/demo.js"
}
}

在bin目录下创建一个 demo.js 文件,用于处理命令行的逻辑。
在 demo.js 中编写命令行的入口逻辑

1
2
3
4
5
6
7
8
#!/usr/bin/env node

const program = require('commander') // npm i commander -D

program.version('1.0.0')
.usage('<command> [项目名称]')
.command('hello', 'hello')
.parse(process.argv)

接着,在 bin 目录下创建 demo-hello.js,放一个打印语句

1
2
touch ./bin/demo-hello.js
echo "console.log('hello, commander')" > ./bin/demo-hello.js

这样,通过 node 命令测试一下

1
node ./bin/demo.js hello

可以在终端上看到一句话:hello, commander。

阅读全文
Homebrew

Mac 安装 Homebrew 速度慢的解决办法,采用国内镜像:

1
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

阅读全文
Algolia