分类 技术文章 下的文章
使用Sketch Measure切图和标注设计稿
0、前言
首先,建议直接上传设计稿到蓝湖之类的网站自动生成标注。地址:https://lanhuapp.com/,设计稿上传上去之后,直接把蓝湖的地址发给程序员就行了。
如果无法使用以上的方法,请继续往下看。
使用Sketch Measure插件来标注和切图非常方便。
首先肯定要安装Sketch。
1、下载Sketch Measure插件
安装好Sketch,接下来下载Sketch Measure插件。下载地址:https://github.com/utom/sketch-measure,点击绿色的“download zip”按钮下载,或者直接点击这个链接:https://github.com/ellunium/sketch-measure/archive/master.zip(不保证是最新版本)
2、安装Sketch Measure
解压下载的文件,双击Sketch Measure.sketchplugin
完成安装。
3、使用Sketch Measure
点击Sketch的Plugins - Sketch Measure
,可以看到Sketch Measure
提供的功能,点击Plugins - Sketch Measure - 工具栏
,可以显示出快捷工具栏,不用再一次次从菜单中选择功能。
工具栏如下:
接下来就是使用这个插件了。
标记尺寸、颜色、字体等一般操作步骤是:
- 选中要操作的图层(根据需要,选中1个或多个图层,比如标记两个图层之间的距离,就要选中两个图层)
- 根据需要点击工具栏上相应的按钮
4、其他
如你所见,这个插件一共只有上图中那些按钮和功能,使用起来也非常简单。只要尝试几遍就能掌握,重要的就是要敢于尝试。
End
[微信小程序]小程序使用事件冒泡需要注意的问题
想要通过事件冒泡,获取到.item
的data,WXML如下:
<view class="toolbar" catchtouchend="format">
<view class="item" data-name="list" data-value="ordered">
<text class="iconfont icon-youxuliebiao"></text>
<text class="name">有序列表</text>
</view>
</view>
上面的结构是无法在js中通过e.target.dataset
获取到data-name
和data-value
的:
[微信小程序]navigationStyle设置为custom后,自定义导航栏适配不同屏幕
navigationStyle
(官方文档)设置为custom
后,导航栏消失,可以自定义导航栏。
在不同的手机上,胶囊到屏幕顶部的距离是不一样的,尤其是刘海屏,这个距离会很大。所以自定义导航栏的高度不能写死。页面主体部分不能被右上角的胶囊覆盖;为了美观,自定义导航栏的标题最好也和胶囊在水平上对齐。所以,自定义导航栏的高度需要适配。
[JWT][Koa2]Koa2实现token的签发和验证
1、前言
JWT是JSON Web Token的简写,是一种可跨域的身份认证方案。
JWT可以让服务器不再维护session等用户状态,只要token有效,就认为是合法的用户。
但是这样也有一个缺点,就是除非token到期,否则服务器没法主动让token失效。
要解决这个问题,可以把每个用户的token保存在redis数据库,每次在token验证为有效后,还要在redis中查询此token是否存在。这样,既能保证这个查询的速度(redis是内存数据库),也能通过操作redis中的数据,让某些token失效。
[css]适配iPhone X
在iOS11上,Safari的webkit内核提供了适配iPhone X的大刘海的功能。
viewport-fit
首先是新增了viewport-fit
meta标签,它有3个值,分别是auto(默认值)
、contain
和cover
。
用法是这样的:
[webpack]在项目本地安装和使用webpack
各种教程在介绍webpack的安装时,为了方便,都使用全局安装的方式:
npm install webpack webpack-cli -g
从webpack v4+版本开始,需要安装
webpack-cli
,详情见官方文档
然后在package.json
的scripts
字段中添加如下的命令:
"scripts": {
"dev": "webpack --参数"
}
接下来,就可以在终端中使用webpack打包了:
npm run dev
[JavaScript]设计模式之工厂模式
[JavaScript]Promise.resolve()
有时需要将现有对象转为 Promise 对象,Promise.resolve()方法就起到这个作用。
http://es6.ruanyifeng.com/#docs/promise#Promise-resolve
一、前言
复习Promise时,发现Promise.resolve()
这个方法,于是研究了一下。
二、定义
Promise.resolve(value)
方法返回一个以给定值解析后的Promise对象。
[微信小程序]离奇触发input组件的input事件
这篇文章记录一种离奇的input事件
被触发的情况。
最近在开发小程序时,遇到了很奇怪的情况。当时wxml
结构如下:
<view>
<input bindinput="input" />
<view class="clear" bind:tap="clear"></view>
</view>
input组件和.clear组件是没有相互覆盖的。