0%

https://picsum.photos/

输入图片大小

Picsum默认的图片大小为1080*720。如果你要生成其他尺寸的图片,只需在网址后面添加图片尺寸即可。比如:

添加图片样式

  • https://picsum.photos/200/300/?grayscale:生成灰度图片。
  • https://picsum.photos/200/300/?blur=2:使图片模糊,数字值越高表示图片越模糊。
  • https://picsum.photos/200/300/?random:生成随机的背景色。
  • https://picsum.photos/200/300/?blur=2&grayscale:图片模糊且灰度化。
  • https://picsum.photos/200/300/?gravity=center:将图片放置在中心位置。
  • https://picsum.photos/id/237/200/300.jpg:生成具有特定id的图片,比如237。
  • https://picsum.photos/200/300?cache-control:让浏览器通过Cache-Control头缓存响应。

随机图片链接

如果你需要一张随机的图片来让内容更加生动、有趣,只需要在 Unsplash 的基础图片链接后面加上“/random/”即可。例如以下链接将返回一个宽度为 640 像素、高度为 480 像素的随机图片:

1
https://source.unsplash.com/random/640x480

如果需要过滤主题,只需在链接末尾加上标签即可,例如以下链接将会返回一个范围包括 mountainlandscape 的随机图片:

1
https://source.unsplash.com/random/640x480?landscape,mountain

固定图片链接

如果你需要一张特定的图片,只需使用 Unsplash 图片的 ID,拼接图片链接即可。例如以下链接将会返回 ID 为 “hgytITrCiec” 的 Unsplash 图片,并且将图片宽度设置为 640 像素,高度设置为 480 像素:

1
https://source.unsplash.com/hgytITrCiec/640x480

在 Markdown 中使用 Unsplash 图片链接

在 Markdown 编辑器中,你可以使用以下语法插入 Unsplash 图片链接:

1
![图片描述](图片链接)

例如,在你的文章中插入一张宽度为 640 像素、高度为 480 像素的随机图片,可以使用以下代码:

1
![随机图片](https://source.unsplash.com/random/640x480)

如果你想要插入一张特定的图片,可以使用 ID 和固定图片链接:

1
![特定图片](https://source.unsplash.com/hgytITrCiec/640x480)

以上就是如何使用 Unsplash 图片链接的简单介绍。希望这篇文章对你有帮助!

  1. 安装 Husky

使用 npm 进行安装:

1
npm install husky --save-dev
  1. 配置 Git 钩子

在 package.json 文件中添加 “husky” 配置:

1
2
3
4
5
6
"husky": {
"hooks": {
"pre-commit": "npm run lint", // 在执行 git commit 命令时,会执行 npm run lint 命令
"pre-push": "npm run test" // 在执行 git push 命令时,会执行 npm run test 命令
}
}
  1. 配置 pre-commit 钩子

在 package.json 文件中添加 “scripts” 属性:

1
2
3
"scripts": {
"lint": "eslint ."
}

这里的 “lint” 命令使用 ESlint 对整个项目进行代码风格检查。

  1. 配置 pre-push 钩子

在 package.json 文件中添加另一个 “scripts” 属性:

1
2
3
"scripts": {
"test": "jest"
}

这里的 “test” 命令使用 Jest 对整个项目进行测试。

  1. 完成

现在,当您在项目中运行 git commit 或 git push 命令时,Husky 将自动执行 lint 和 test 命令。如果命令返回任何错误,Husky 将阻止您的提交或推送。

您可以使用 Husky 的其他功能来执行其他任务,例如在 commit 或 push 之前自动发布代码,或在代码风格测试失败时发送电子邮件等。

更多详细的配置信息请查看 Husky 的官方文档: https://github.com/typicode/husky

可以使用以下命令将远程分支拉到本地:

  1. 首先,使用 git remote 命令查看已经添加的远程仓库:
1
git remote
  1. 然后,使用 git fetch 命令将远程分支拉取到本地仓库(不会进行合并):
1
git fetch origin remote_branch
  1. 最后,使用 git checkout 命令将远程分支切换到本地分支:
1
git checkout local_branch
  1. 组合命令
1
git fetch origin remote_branch:local_branch

其中,remote_branch 为远程分支名称,origin 为远程仓库名称,local_branch 为本地分支名称,可以根据实际情况进行替换。

简介

ESLint是一个开源的 JavaScript 代码检查工具,可以帮助我们发现代码中存在的错误和潜在问题,并给出推荐的修复方案,从而提高代码的质量和可读性。

本文将要介绍如何在VSCode中配置ESLint,实现自动保存校验功能,让我们的代码更加健康。

步骤

第一步:安装ESLint插件

如果没有安装ESLint插件的话,我们需要先到VSCode插件商店中安装ESLint插件,安装过程非常简单,只需要在搜索框中输入“ESLint”即可。

第二步:安装ESLint模块

在项目中安装ESLint模块依赖,可以使用npm或yarn,如下:

1
npm install eslint --save-dev

1
yarn add eslint --dev

第三步:创建ESLint配置文件

创建一个名为.eslintrc.json的文件,用来存放ESLint配置信息。

1
2
3
4
{
"extends": "eslint:recommended",
"rules": {}
}

这里使用了eslint:recommended作为配置的扩展,这些规则是由ESLint核心团队定义的一组推荐的规则。当然你也可以自定义一些规则,具体可参考官方文档。

第四步:配置VSCode

我们需要在VSCode的配置文件中,添加以下内容实现自动保存校验。

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false,
"eslint.alwaysShowStatus": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "vue", "autoFix": true },
{ "language": "html", "autoFix": true }
]
}

这里通过"editor.codeActionsOnSave"属性实现自动保存校验,当我们保存文件时,如果存在ESLint报错,VSCode会自动执行修复操作。

同时将"editor.formatOnSave"设置为false,表示不对存储时代码格式进行调整。

最后配置"eslint.validate"即可,这里我们对"javascript""javascriptreact"进行校验和自动修复,同时对Vue和HTML代码添加支持。

总结

通过这个简单的配置,我们可以让ESLint与VSCode紧密地结合在一起,实现在保存代码之前、常规编写过程中进行代码检查校验。这将使我们能够更快地发现并修复潜在的问题,从而提高代码的质量和可读性。

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
{
// 在保存时自动格式化代码
"editor.formatOnSave": true,
// 在按下“Commit”字符(如"."或";")时接受建议
"editor.acceptSuggestionOnCommitCharacter": true,
// 在按下“Enter”时接受建议
"editor.acceptSuggestionOnEnter": "on",
// 自动启用辅助功能
"editor.accessibilitySupport": "auto",
// 启用背景颜色样式,在编辑器中显示错误和警告等
"editor.colorDecorators": true,
// 光标闪烁类型("blink"、"smooth" 或 "phase")
"editor.cursorBlinking": "blink",
// 开启平滑光标动画
"editor.cursorSmoothCaretAnimation": false,
// 光标样式("block", "line" 或 "underline")
"editor.cursorStyle": "line",
// 高亮当前行周围的行数(Highlight current line plus n lines)
"editor.cursorSurroundingLines": 3,
// 光标宽度,0 表示使用默认值
"editor.cursorWidth": 0,
// 禁用字形图层提示
"editor.disableLayerHinting": true,
// 禁用等宽字体的优化
"editor.disableMonospaceOptimizations": false,
// 启用拖放支持
"editor.dragAndDrop": true,
// 在空文本中复制时复制当前行或上次选区内容
"editor.emptySelectionClipboard": true,
// 额外的编辑器类名
"editor.extraEditorClassName": "",
// 编辑器字体
"editor.fontFamily": "'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
// 启用字体连字
"editor.fontLigatures": false,
// 编辑器字体大小
"editor.fontSize": 14,
// 编辑器字体重量
"editor.fontWeight": "",
// 粘贴时自动格式化代码
"editor.formatOnPaste": false,
// 显示标尺栏
"editor.glyphMargin": true,
// 在悬停编辑器概述标尺时隐藏光标
"editor.hideCursorInOverviewRuler": false,
// 在敲击代码时显示内联建议
"editor.inlineSuggest.enabled": true,
// 启用内部可访问支持
"editor.internalAccessibilitySupport": "auto",
// 启用大文件的优化
"editor.largeFileOptimizations": true,
// 高亮匹配的括号
"editor.matchBrackets": true,
// 启用小地图
"editor.minimap.enabled": false,
// 显示的小地图的最大列数
"editor.minimap.maxColumn": 120,
// 渲染小地图中的字符
"editor.minimap.renderCharacters": true,
// 小地图与实际大小的比例
"editor.minimap.scale": 1,
// 小地图右侧的滑块何时显示("mouseover"、"always" 或 "never")
"editor.minimap.showSlider": "mouseover",
// 小地图在哪个侧边栏显示("left" 或 "right")
"editor.minimap.side": "right",
// 启用鼠标滚轮缩放
"editor.mouseWheelZoom": false,
// 多光标时将影响重叠的光标合并到单个光标中
"editor.multiCursorMergeOverlapping": true,
// 启用多光标选择的修改键, 可选值包括 "ctrlCmd"、 "alt"、"shift" 和 "meta"
"editor.multiCursorModifier": "alt",
// 鼠标移到函数名称上时是否显示参数提示
"editor.parameterHints": true,
// 在敲击代码时显示语言支持的快速建议
"editor.quickSuggestions": true,
// 快速建议的延迟时间(毫秒)
"editor.quickSuggestionsDelay": 10,
// 是否只读,禁止编辑
"editor.readOnly": false,
// 渲染控制字符(CR/LF/Tab) 的显示方式
"editor.renderControlCharacters": false,
// 渲染最后一个仅包含换行符的行
"editor.renderFinalNewline": true,
// 渲染缩进参考线
"editor.renderIndentGuides": true,
// 当前行高亮的样式("line", "gutter" 或者 "none")
"editor.renderLineHighlight": "line",
// 控制空格和 Tab 的呈现方式
"editor.renderWhitespace": "none",
// 滚动时突出光标
"editor.revealCursorOnScroll": true,
// 启用默认的 Windows 平台的前向选择样式
"editor.roundedSelection": true,
// 设置标尺的位置
"editor.rulers": [],
// 允许在行的末尾进行额外的滚动,将光标保持在最后一列之后
"editor.scrollBeyondLastColumn": 5,
// 允许在行的末尾进行额外的滚动,将光标保持在最后一行之后
"editor.scrollBeyondLastLine": true,
// 允许在编辑器之间复制和粘贴选择
"editor.selectionClipboard": true,
// 启用匹配选择项
"editor.selectionHighlight": true,
// 显示废弃的语法提示
"editor.showDeprecated": true,
// 前导行代码折叠控制的显示方式("mouseover"、"always" 或 "none")
"editor.showFoldingControls": "mouseover",
// 高亮缩进,淡化其他内容
"editor.showIndentGuides": true,
// 是否显示行号
"editor.showLineNumbers": true,
// 当前行之前滚动的行数(仅在scrollbarHover才有用)
"editor.showPreviousLine": true,
// 显示未使用的代码
"editor.showUnused": true,
// 启用代码片段建议
"editor.snippetSuggestions": "top",
// 在触发字符后自动显示建议
"editor.suggestOnTriggerCharacters": true,
// 控制如何预先选择建议
"editor.suggestSelection": "recentlyUsed",
// 控制如何使用 Tab 键来接受建议
"editor.tabCompletion": "on",
// 缩进宽度
"editor.tabSize": 4,
// 在保存时将自动删除行末的空白
"editor.trimAutoWhitespace": true,
// 智能选词分隔符
"editor.wordSeparators": "~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?",
// 控制自动换行("off", "on" 或 "wordWrapColumn")
"editor.wordWrap": "off",
// 定义哪些字符可能会成为单独一行的断点
"editor.wordWrapBreakAfterCharacters": "\t})]?|&,;",
// 定义哪些字符可能会成为单独一行
"editor.wordWrapBreakBeforeCharacters": "{([+",
// 定义哪些字符可能会成为单独一行的断点之前以及之后("wordWrapBreakAfterCharacters"和"wordWrapBreakBeforeCharacters"的结合使用)
"editor.wordWrapBreakObtrusiveCharacters": ".",
// 在wordWrap:"wordWrapColumn"模式下控制编辑器的自动换行
"editor.wordWrapColumn": 80,
// 在 minified 文件中启用自动换行
"editor.wordWrapMinified": true,
// 在多行的第二行和之后缩进相对于第一行
"editor.wrappingIndent": "same",
// 是否在首选项中启用折叠区域代码折叠
"editor.folding": true,
// 在预览(鼠标悬停)中显示文档
"editor.hover.enabled": true,
// 在鼠标悬停时就显示预览信息,而不是等待300ms
"editor.hover.delay": 300,
// 键入时在符号或标签加亮
"editor.occurrencesHighlight": true,
// 在重命名符号时更新所有引用
"editor.renameOnType": false,
// 修改字体时放大或缩小编辑器
"editor.mouseWheelZoomDelta": 2,
// 滚动鼠标的灵敏度
"editor.mouseWheelScrollSensitivity": 1,
// 平滑滚动
"editor.mouseWheelSmoothScroll": false,
// 显示诊断消息(错误、警告等)
"editor.showDiagnostics": "warnings",
// 显示代码折叠控件
"editor.showFoldingControlsAlways": true,
// 高亮匹配括号的间距(以像素为单位)
"editor.matchBracketsSpace": 0,
// 控制当在一个断点处输入或删除字符时如何保持缩进
"editor.autoIndent": "advanced",
// 描述按下 Tab 键时应插入的空白
"editor.useTabStops": true,
// 保留换行符类型
"files.insertFinalNewline": true,
// 在使用 tab 时,插入 N 个空格
"editor.tabSize": 4,
// 开启 Emmet 功能
"emmet.triggerExpansionOnTab": true,
// 启用 emmet 的 auto-preview模式
"emmet.showAbbreviationSuggestions": true,
// 在 HTML 中,为开始和结束标记自动插入一个新行
"emmet.html.format.indentation": " ",
// 在标记之间插入空格
"emmet.syntaxProfiles": {
"javascript": {
"attr_quotes": "single"
}
}
}

🚀 前言

微信小程序是一种全新的应用模式,它可以在微信中直接运行,用户无需下载安装即可使用,具有开发简单、轻量级、低成本等优点,非常适合创业公司、个人开发者等快速开发原型或小型商业应用。

🔧 准备工作

1. 安装微信开发者工具

微信小程序开发需要使用微信官方提供的开发者工具,点击这里下载适用于您的操作系统的开发者工具。

2. 注册微信小程序账号

点击这里,注册一个微信小程序账号。

3. 创建小程序

打开微信开发者工具,点击”新建小程序”按钮,按照提示填写小程序基本信息,即可创建一个最简单的小程序。

🚀 开发第一个小程序

1. 目录结构

创建小程序后,微信开发者工具会自动生成一些模板文件,目录结构如下:

1
2
3
4
5
6
7
8
9
10
myproject
├── app.js
├── app.json
├── app.wxss
└── pages
└── index
├── index.js
├── index.json
├── index.wxml
└── index.wxss

其中,app.js是小程序的脚本文件,app.json是小程序的配置文件,app.wxss是小程序的全局样式表。

pages目录下是小程序的页面文件,每个页面文件都由4个文件组成:脚本文件(.js)、配置文件(.json)、模板文件(.wxml)和样式表文件(.wxss)。

2. Hello World

打开index.wxml,在其中输入以下代码:

1
2
<!--index.wxml-->
<text>{{message}}</text>

打开index.js,在其中输入以下代码:

1
2
3
4
5
6
//index.js
Page({
data: {
message: "Hello World"
}
})

应用这些变更后,点击微信开发者工具的”预览”按钮,可以在微信中查看效果。

3. 组件介绍

在示例代码中,我们使用了<text>标签,这是一种小程序内置的组件。在小程序中,所有显示内容都是由组件构成的,组件可以嵌套使用,从而构成丰富的页面布局。

下面简单介绍几个常用组件:

  • <view>:与HTML中的<div>类似,用于嵌套其它组件,可以设置样式或事件。
  • <text>:用于显示文本,可以设置颜色、字体大小等。
  • <button>:用于创建按钮,可以设置事件。
  • <image>:用于显示图片,可以设置 src 属性。

4. 数据绑定

在示例代码中,我们使用了{{message}}语法,将message变量的值绑定到<text>组件的内容中。

数据绑定是小程序中非常常用的功能。除了上述这种插值绑定,还可以在属性中使用绑定语法:

1
2
<!--index.wxml-->
<view class="{{className}}"></view>
1
2
3
4
5
6
//index.js
Page({
data: {
className: "red"
}
})

这样的代码将给<view>组件的class属性动态赋值,从而实现样式切换等功能。

5. 事件处理

小程序中的事件处理与普通的Web开发类似,也可以使用事件冒泡、事件委托等技术。

下面是一个示例代码:

1
2
<!--index.wxml-->
<button bindtap="onClick">点击我</button>
1
2
3
4
5
6
//index.js
Page({
onClick: function(event) {
console.log("按钮被点击了")
}
})

这段代码实现了一个简单的按钮点击事件,点击按钮后将在控制台输出信息。

6. 网络请求

小程序具有完善的网络功能,可以使用wx.request()API发送HTTP请求,并处理返回的结果。

下面是一个简单的示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//index.js
Page({
onLoad: function(options) {
wx.request({
url: "https://api.github.com/users/octocat",
success: function(res) {
console.log(res.data)
},
fail: function() {
console.log("请求失败")
}
})
}
})

这段代码实现了一个简单的网络请求,使用GitHub API获取了用户octocat的信息,并在控制台输出了返回结果。

如需深入学习相关内容,可以参考微信小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/index.html

在当今移动应用市场,有两种主要的应用类型:原生应用和快应用。这两种应用之间存在一些显著的区别。让我们来看看原生应用和快应用在各方面的对比。

开发难度 🔧

原生应用需要开发人员掌握多种编程语言和工具,并具有丰富的开发经验和技能。相反,快应用使用了简单的HTML、CSS和JavaScript技术,所以对于新手和小型开发团队来说,它是一个更容易上手的选择。但是,要开发高质量的快应用并不容易。

部署速度 ⏱️

原生应用需要通过应用商店进行下载和安装,这需要用户等待和网络连接。而快应用是预安装在设备上的,无需用户下载和安装。这使得快应用在启动速度和用户体验方面更胜一筹。

功能和性能 💻

原生应用可以访问设备的所有功能和资源,并可以为用户提供更流畅的操作和更佳的性能。相比之下,快应用受到设备限制,例如有时快应用的界面和功能会受到限制,因此可能不像原生应用具有更高的性能。

云服务 ☁️

原生应用可以利用云服务来完善应用,例如储存和同步数据等。在快应用中,由于受到设备限制,对于涉及到大量数据的应用,需要通过第三方后端服务进行处理。

应用分发 🌐

在应用分发方面,原生应用可以通过多个应用商店和市场进行分发。而快应用是通过设备厂商的应用商店进行分发,因此要想快速推广和覆盖更多用户,开发团队需要和设备厂商合作。

综上所述,原生应用和快应用在多个方面都具有不同的优势。关键是,在选择应用类型时,需要考虑到应用的目标、用户体验和开发成本。

微信小程序是微信推出的一种轻量级应用,它可以在微信内部直接使用,不需要用户下载安装,省去了用户安装、更新、卸载等繁琐操作,具有便捷✨、快速⚡、安全🔐等优势。以下是微信小程序能够解决的痛点。

手机内存不足

随着手机操作系统和应用的升级,手机内存容量相对较小的用户常常遇到手机内存不足的问题,在下载应用时往往需要删除其他应用或照片。微信小程序不需要下载安装,直接在微信内部运行,不占用手机内存,避免了删除应用的烦恼😩。

应用安装繁琐

下载应用需要前往应用商店搜索、下载、安装等繁琐步骤,耗费用户时间,而且安装应用有一定的安全风险😨。微信小程序可以直接在微信内搜索到需要的小程序,点击即可进入使用,省去了下载安装的繁琐操作。

应用更新不及时

应用商店更新应用需要用户手动更新或打开应用时自动更新,部分用户习惯关闭了自动更新,导致应用不能及时更新☹️。而微信小程序直接在微信内部更新,及时更新应用,用户无需关心更新问题。

占用流量和空间

应用下载、更新等操作需要占用用户的流量和手机存储空间,而微信小程序不需要下载安装,直接在微信内部运行,不占用手机存储空间,且小程序文件通常较小,也不会占用大量用户流量🌎。

用户体验不佳

应用商店下载的应用体积较大,启动时间较长,对于运行速度比较慢的手机使用体验十分不友好。而微信小程序开发者可以优化小程序性能、启动速度等问题,提升用户体验👍。

综上所述,微信小程序具有便捷✨、快速⚡、安全🔐、节省流量和存储空间、降低用户下载和更新应用难度等优势,可以有效解决用户手机内存不足😩、应用安装繁琐、应用更新不及时☹️、占用流量和空间🌎、用户体验不佳的痛点。微信小程序是一种优秀的应用形式,值得开发者和用户的关注和支持。

微信小程序和快应用都是便捷、轻量、即用即走的应用,但它们还存在一些差异。让我们来一起看看它们之间的比较吧!👀

微信小程序 💬

  • 良好的用户体验: 微信小程序可在微信里直接运行,用户无需下载即可体验应用,非常方便。同时,小程序的启动速度非常快,加载也非常快速,可以带给用户良好的使用体验。
  • 丰富的开发资源: 微信小程序开发者可以使用微信提供的大量开发资源,包括 API、工具和教程等。这些资源对于一些小程序初学者来说是非常友好的。
  • 广泛的普及率: 微信小程序作为中国最大的社交平台之一,其普及率非常广泛,用户非常多,可以让开发者的小程序得到更广的流量和访问量。

快应用 🚀

  • 流畅的用户体验: 快应用不依赖于系统操作,可以直接与底层交互,因此它们的性能很出色,快应用启动速度同样非常快,有着非常流畅的用户体验。
  • 强大的功能: 快应用可以使用手机上的一些资源,如 GPS、相机或键盘等,并且还可以与其他快应用进行交互。这让它们的功能非常丰富,可以满足不同用户的需求。
  • 广泛的适用范围: 相比微信小程序,快应用的适用范围更广,不仅限于某一个应用程序。用户可以通过不同的入口进入快应用,包括搜索、扫描二维码或桌面等。
项目 微信小程序 快应用
用户体验 💬 🚀
开发资源 💬 🚀
普及率 💬
功能 💬
适用范围 💬

综上所述,微信小程序和快应用都有各自的优点和限制,无法直接说哪个更好。开发者需要仔细考虑自己的需求以及目标用户群体,才能决定选择哪一种应用程序。🤔