说明

这里收集了一些设计师需要的素材、教程、工具网站，全部可用，随时更新。
其中有些网站是综合性的，既有素材，也有教程。

- 阅读剩余部分 -

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后，导航栏消失，可以自定义导航栏。

在不同的手机上，胶囊到屏幕顶部的距离是不一样的，尤其是刘海屏，这个距离会很大。所以自定义导航栏的高度不能写死。页面主体部分不能被右上角的胶囊覆盖；为了美观，自定义导航栏的标题最好也和胶囊在水平上对齐。所以，自定义导航栏的高度需要适配。

- 阅读剩余部分 -

1、前言

JWT是JSON Web Token的简写，是一种可跨域的身份认证方案。

JWT可以让服务器不再维护session等用户状态，只要token有效，就认为是合法的用户。
但是这样也有一个缺点，就是除非token到期，否则服务器没法主动让token失效。
要解决这个问题，可以把每个用户的token保存在redis数据库，每次在token验证为有效后，还要在redis中查询此token是否存在。这样，既能保证这个查询的速度(redis是内存数据库)，也能通过操作redis中的数据，让某些token失效。

- 阅读剩余部分 -

在iOS11上，Safari的webkit内核提供了适配iPhone X的大刘海的功能。

viewport-fit

首先是新增了viewport-fitmeta标签，它有3个值，分别是auto(默认值)、contain和cover。

用法是这样的：

- 阅读剩余部分 -

各种教程在介绍webpack的安装时，为了方便，都使用全局安装的方式：

npm install webpack webpack-cli -g

从webpack v4+版本开始，需要安装webpack-cli，详情见官方文档

然后在package.json的scripts字段中添加如下的命令：

"scripts": {
    "dev": "webpack --参数"
}

接下来，就可以在终端中使用webpack打包了：

npm run dev

- 阅读剩余部分 -

一、简单工厂模式

简单工厂模式，就是在工厂中预先定义了几类具体的产品，你需要一个产品，就请求工厂返回这个产品。如果工厂没有定义这样的产品，是生产不出来的：

- 阅读剩余部分 -

有时需要将现有对象转为 Promise 对象，Promise.resolve()方法就起到这个作用。
http://es6.ruanyifeng.com/#docs/promise#Promise-resolve

一、前言

复习Promise时，发现Promise.resolve()这个方法，于是研究了一下。

二、定义

Promise.resolve(value)方法返回一个以给定值解析后的Promise对象。

- 阅读剩余部分 -

这篇文章记录一种离奇的input事件被触发的情况。

最近在开发小程序时，遇到了很奇怪的情况。当时wxml结构如下：

<view>
    <input bindinput="input" />
    <view class="clear" bind:tap="clear"></view>
</view>

input组件和.clear组件是没有相互覆盖的。

- 阅读剩余部分 -