本文不定时更新中……

收集了一些在开发过程中遇到的一些问题的解决方法，适合新手。

---

异常：

出现脚本错误或者未正确调用 Page()

原因：不小心删了第一行内容：<template>

---

异常：

模块编译失败：TypeError: Cannot read property 'for' of undefined

at fixDefaultIterator (D:\HBuilderX\plugins\uniapp\lib\mpvue-template-compiler\build.js:4277:24)

at mark (D:\HBuilderX\plugins\uniapp\lib\mpvue-template-compiler\build.js:4306:5)

at markComponent (D:\HBuilderX\plugins\uniapp\lib\mpvue-template-compiler\build.js:4371:5)

at baseCompile (D:\HBuilderX\plugins\uniapp\lib\mpvue-template-compiler\build.js:4384:15)

at compile (D:\HBuilderX\plugins\uniapp\lib\mpvue-template-compiler\build.js:4089:28)

at Object.module.exports (D:\HBuilderX\plugins\uniapp\lib\mpvue-loader\lib\template-compiler\index.js:43:18)

原因：新建的页面（简单模板）只有以下 3 个标签，须在 <template /> 中添加一些代码，如 <view />

<template>
</template>

<script>
</script>

<style>
</style>

---

异常：

模块编译失败：TypeError: Cannot read property 'toString' of undefined

at Object.preprocess (D:\HBuilderX\plugins\uniapp\lib\preprocess\lib\preprocess.js:56:15)

at Object.module.exports (D:\HBuilderX\plugins\uniapp\lib\preprocessor-loader.js:9:25)

原因：没有原因，纯抽风，HX 关掉再开就好了。

---

异常：

Cannot set property 'xxx' of undefined;at pages/... onLoad function;at api request success callback function

原因：属性未定义，例如 

data() {
	return {
		item: { }
	}
}

而直接赋值 this.item.abc.xxx = '123';

解决：

data() {
	return {
		item: {
			abc: ''
		}
	}
}

---

问：page 页面怎样修改 tabBar？

答：官方文档未给出答案，百度了一圈也无果（2018-10-23），但有人说小程序的 setTabBarBadge() 方法设置角标是可以用的。

---

坑：

VM1694:1 获取 wx.getUserInfo 接口后续将不再出现授权弹窗，请注意升级

参考文档: https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01

填坑：放弃使用 uni.getUserInfo 接口来获取用户信息，uni.login 可返回用于换取 openid / unionid 的 code，参：uni.login、 code2Session

---

坑：字符搜索（当前目录）（Ctrl+Alt+F）搜不出所有结果

填坑：顾名思义他只搜索当前目录，即当前打开文件所在目录，而非我误认为的整个项目根目录。在“项目管理器”中选中要搜索字符的目录即可。

---

坑：uni.navigateTo() 或 uni.redirectTo() 没反应

填坑：这两个方法不允许跳转到 tabbar 页面，用 uni.switchTab() 代替。

---

坑：使用“Ctrl+/”快捷键弹出“QQ五笔小字典”窗口

解决：打开QQ五笔“属性设置”，切换到“快捷键设置”选项卡，把“五笔小字典”前的勾取消（即使该组合键是设置为Ctrl+?）。

---

坑：<rich-text /> 中的 <img /> 太大，超出屏幕宽度

填坑：用正则表达式给 <img /> 加上最大宽度

data.data.Content = data.data.Content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');

---

坑：无法重命名或删除目录或文件

填坑一：“以管理员身份运行”HBuilder X 后再试。

填坑二：关闭微信开发者工具、各种手机和模拟器后再试。

填坑三：打开“任务管理器”，结束所有“node.exe”进程后再试。

---

坑：

 thirdScriptError 
 sdk uncaught third Error 
 (intermediate value).$mount is not a function 
 TypeError: (intermediate value).$mount is not a function
Page[pages/xxxx/xxxx] not found. May be caused by: 1. Forgot to add page route in app.json. 2. Invoking Page() in async task.
Page is not constructed because it is not found.

填坑：关闭微信开发者工具、各种手机和模拟器后，删除“unpackage”目录。

---

坑：

Unexpected end of JSON input;at "pages/news/view" page lifeCycleMethod onLoad function
SyntaxError: Unexpected end of JSON input

填坑：给 uni.navigateTo() 的 url 传参时，如果简单地将对象序列化 JSON.stringify(item)，那么如果内容中包含“=”等 url 特殊字符，就会发生在接收页面 onLoad() 中无法获取到完整的 json 对象，发生异常。

uni.navigateTo({
	url: "../news/view?item=" + JSON.stringify(item)
})

所以应该把参数值编码：

uni.navigateTo({
	url: "../news/view?item=" + escape(JSON.stringify(item))
})

如果是一般的 web 服务器来接收，那么会自动对参数进行解码，但 uni-app 不会，如果直接使用：

onLoad(e) {
	this.item = JSON.parse(e.item);
}

会发生异常：

Unexpected token % in JSON at position 0;at "pages/news/view" page lifeCycleMethod onLoad function
SyntaxError: Unexpected token % in JSON at position 0

需要解码一次：

onLoad(e) {
	this.item = JSON.parse(unescape(e.item));
}

需要注意的是，unescape(undefined) 会变成 'undefined'，如果要判断是否 undefined，应是 unescape 之前。

---

坑：图片变形

填坑：mode="widthFix"

---

坑：页面如何向 tabBar 传参

填坑：全局或缓存

---

坑：编译为 H5 后，出现：Access-Control-Allow-Origin

填坑：参阅

---

坑：编译为 H5 后，GET 请求的 URL 中出现“?&”

填坑 ：客户端只求 DCloud 官方能够尽快修复这个 bug，IIS 端可以暂时用 URL 重写来防止报 400 错误，参此文。

---

坑：[system] errorHandler TypeError: Cannot read property 'forEach' of undefined

填坑：待填

〓 系统

功能	命令	--help	示例
关机	halt		halt
重启	reboot		reboot
系统监视器	top	系统时间, 运行天数, 当前登录用户数, 系统负载 总进程数, 运行中的, 睡眠的, 停止的, 未响应的 Cpu(s):us 用户, sy 系统, ni XX, id 空闲, wa 等待, hi XX, si XX Mem, 已使用, 空余, 缓冲 Swap, 已使用, 空余, 缓冲 快捷键： M 按占内存排序 P 按占Cpu排序 1 显示每个 Cpu k 杀死进程 q 退出	top
查看进程	ps	aux -ef	列出包含 java 的进程 ps aux |grep java  ps -ef |grep java
查看内存及 Swap 用量	free	-b,-k,-m,-g 按单位显示	free -m
查看系统时间	date	显示 CST 时间 -R 显示时区 -u 显示 UTC 时间	date
查看硬件时间	clock		clock
设置系统日期			date -s 月/日/年
设置系统时间			date -s 时:分:秒
将系统时间写入到硬件时间			clock -w
查看系统版本			cat /etc/*release
升级系统软件			yum update -y

〓 文件

功能	命令	--help	示例
进入目录	cd		cd .. # 上一层目录 cd /root # 根目录
列出目录	ls	白色：表示普通文件 蓝色：表示目录 绿色：表示可执行文件 红色：表示压缩文件 浅蓝色：链接文件 红色闪烁：表示链接的文件有问题 黄色：表示设备文件 灰色：表示其他文件	ls
创建目录	mkdir		mkdir XXX
删除目录	rm		rm -rf XXX
删除文件	rm		rm XXX
复制文件	cp		cp XXX YYY
复制目录	cp	-r 复制目录及目录内的所有项目 -v 详细显示进行的步骤	cp -rv XXX YYY
重命名文件	mv	-i: 若指定目录已有同名文件，则先询问是否覆盖旧文件; -f: 在mv操作要覆盖某已有的目标文件时不给任何指示;	mv 源文件 目标文件
移动文件	mv		mv 一个或多个文件 目标目录
下载文件	wget	下载到当前目录	wget http://XXX.tar.gz
计算文件/目录的磁盘用量	du	-a 不仅显示目录，同时显示文件 -h 容易阅读方式显示 --max-depth=N 可指定计算深度	du -ah --max-depth=1 | sort -n
查找文件	find		find /home -name *.apk

〓 tar

功能	命令	--help	示例
tar	tar	-z 是否压缩 -c 打包 -x 解包 -v 详细地列出处理的文件 -f	打包：tar -cvf abc.tar abc 解包：tar -xvf abc.tar 压缩打包：tar -zcvf abc.tar.gz abc 解压解包：tar -zxvf abc.tar.gz

〓 磁盘

功能	命令	--help	示例
查看所有磁盘及分区	fdisk -l		fdisk -l
查看当前挂载	df	-h 按可阅读的方式打印数值和单位 -T 显示文件系统类型	df -hT
管理磁盘分区	fdisk /dev/***	进入后的操作说明： m 显示命令菜单 d 删除一个分区 n 创建一个分区（e 扩展分区；p 主分区） t 改变分区ID q 不保存退出 w 保存退出	fdisk /dev/vdb
格式化分区	mkfs.*** /dev/***N		mkfs.xfs /dev/vdb1
挂载分区	mount /dev/***N /***		mount /dev/vdb1 /www
卸载分区	umount /dev/***N		umount /dev/vdb1
开机自动挂载	vi /etc/fstab	配置文档格式：设备 挂载点 文件系统类型 defaults 0 0	打开：vi /etc/fstab 配置：/dev/vdb1 /www xfs defaults 0 0

〓 网络

功能	命令	--help	示例
查看 IP 配置	ifconfig		ifconfig
配置网卡 IP		配置文件目录：/etc/sysconfig/network-scripts/ 配置文件格式： DEVICE=eth0 / eth0:0 / ... # 在配置多线时若使用 cp 命令复制配置文件，必须修改此项以防止冲突 HWADDR=XX:XX:XX:XX:XX:XX # 网卡地址 TYPE=Ethernet # 以太网 UUID=******** ONBOOT=yes # 开机启动 NM_CONTROLLED=yes BOOTPROTO=static # 使用静态 IP IPADDR=192.168.1.2 # IP 地址 NETMASK=255.255.255.XXX # 子网掩码 GATEWAY=192.168.1.1 # 网关 DNS1=114.114.114.114 DNS2=8.8.8.8	vi ifcfg-XXXN(:N)
重启网卡		使配置生效	service network restart

〓 防火墙

功能	命令	--help	示例
配置 iptables		添加需要允许的端口的方法同 22 端口	vi /etc/sysconfig/iptables
重启使配置生效			service iptables restart

〓 用户/权限

功能	命令	--help	示例
添加用户	useradd	-g 组名 # 加入到该组 -s /bin/false #不允用户直接登录系统	useradd –g 组名 用户名 -s /bin/false
修改密码	passwd		passwd 用户
查看所有用户			cut -d : -f 1 /etc/passwd
查看可以登录系统的用户			cat /etc/passwd | grep -v /sbin/nologin | cut -d : -f 1
删除用户		-r, --remove                  remove home directory and mail spool	userdel 用户
添加用户组	groupadd		groupadd 组名
为组添加用户（用户必须已存在）	gpasswd		gpasswd -a 用户 组
将用户移出组	gpasswd		gpasswd -d 用户 组
查看用户所属组	groups		groups 用户
查看组中有哪些用户	groupmems		groupmems -g 组 -l
更改文件/目录所有者	chown	-R 递归处理所有的文件及子目录	chown -R 用户:组 ***
更改文件/目录权限	chmod	-R 以递归方式更改所有的文件及子目录	chmod -R 777 ***

〓 vi 编辑器

功能	命令	--help	示例
打开文件	vi		vi XXX
进入编辑模式		按 a/i/o/Insert 等
进入末行模式/命令模式		按 Esc后： :w 保存不退出 :q 退出（提示是否保存） :wq 保存并退出 :w XXX 另存到文件 XXX :q! 不保存退出

〓 计划任务

功能	命令	--help	示例
设置计划任务	crontab	详细步骤见本页底部	crontab -l # 查看计划任务 crontab -e # 编辑计划任务

〓 网站

功能	命令	--help	示例
简单审查日志	cat | grep		cat 日志文件 | grep 关键词1 | grep 关键词2 | more
日志分析	goaccess		见下文

〓 goaccess

功能	命令	--help	示例
安装	yum install goaccess
日志格式	NCSA Commbined Log Format		date_format %d/%b/%Y log_format %h %^[%d:%^] "%r" %s %b "%R" "%u"
参数	-f	需要解析的日志文件
参数	-e	指定 IP 地址统计
参数	-p	指定配置文件	可以将上面的日志格式内容保存到文件 ~/.goacessrc
参数	-H	显示 HTTP 协议信息
参数	-M	显示 HTTP 方法信息
生成文件			goaccess -f 日志文件 -p ~/.goaccessrc > 目标文件.htm

〓 lnmp

功能	命令	--help	示例
重启 LNMP			/root/lnmp restart
重启 MySQL			/etc/init.d/mysql restart
重启 PureFTPd			/root/pureftpd restart
安装 LNMP		http://lnmp.org/install.html
常见问题		http://lnmp.org/faq.html
状态管理命令		http://lnmp.org/faq/lnmp-status-manager.html
相关软件目录及文件位置		http://lnmp.org/faq/lnmp-software-list.html
防跨站、跨目录安全设置（仅支持 PHP 5.3.3 以上版本）		http://www.vpser.net/security/lnmp-cross-site-corss-dir-security.html
查看 Nginx 版本			nginx -V
查看 MySQL 版本			mysql -V
查看 PNP 版本			php -v
查看 Apache 版本			httpd -v
查内存			cat /proc/meminfo
php.ini			vim /usr/local/php/etc/php.ini
MySQL 配置文件			vim /etc/my.cnf
添加网站			/root/vhost.sh
添加 ProFTPd 用户			/root/proftpd_vhost.sh

〓 nginx

功能	命令	--help	示例
启动/停止/重启	service nginx 或 /etc/rc.d/init.d/nginx		service nginx start service nginx stop service nginx restart
伪静态	在 .conf 文件中配置		rewrite ^(.*)/read-htm-(.*)\.html(.*)$ $1/read.php?$2.html? last; rewrite ^(.*)/thread-htm-(.*)\.html(.*)$ $1/thread.php?$2.html? last; rewrite ^(.*)-htm-(.*)$ $1.php?$2 last; rewrite ^(.*)/simple/([a-z0-9\_]+\.html)$ $1/simple/index.php?$2 last; rewrite ^(.*)/data/(.*)\.(htm|php)$ 404.html last; rewrite ^(.*)/attachment/(.*)\.(htm|php)$ 404.html last; rewrite ^(.*)/html/(.*)\.(htm|php)$ 404.html last;
防盗链	在 .conf 文件中配置	HttpRefererModule	location ~* \.(gif|jpg|png|swf|flv)$ { valid_referers none blocked *.0574bbs.com *.eyuyao.com 0574bbs.com eyuyao.com; if ($invalid_referer) { rewrite ^/ http://web1.eyuyao.com/yyad/src/3122.jpg; # return 404; } }
浏览器缓存	在 .conf 文件中配置		location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; }

〓 vsftpd

功能	命令	--help	示例
安装			yum install vsftpd
查看是否已安装			rpm -q vsftpd
启动/停止/重启	service vsftpd		service vsftpd start service vsftpd stop service vsftpd restart
配置文件			vi /etc/vsftpd/vsftpd.conf

〓 MySQL

功能	命令	--help	示例
登录	mysql		mysql -u username -p
登出			exit
查看信息			status;
查询当前正在执行的 SQL 语句			show processlist;
删除指定时间之前的日志	PURGE		PURGE MASTER LOGS BEFORE '2015-1-1 0:00:00';

〓 scp 远程文件/目录传输命令 (yum install openssh-clients) 用法

scp 会把文件权限（读取/写入/执行）带过来，但所有者为当前执行 scp 命令的用户。

scp 低版本有许多漏洞，用完最好 yum remove openssh-clients

scp 采用直接覆盖的机制，如需判断文件无差异则跳过，应改用 rsync 命令。查看 rsync 详细使用方式及与 scp 对比

功能	命令	--help	示例
若远程服务器 SSH 端口非默认	scp	-P 端口号
下载远程服务器上的文件到本地	scp		scp 远程用户@远程服务器:远程文件 本地文件
下载远程服务器上的目录到本地	scp	-P 端口 -v 显示进度 -r 递归	scp -r 远程用户@远程服务器:远程目录 本地目录 实例：scp -r root@x.x.x.x:/a/b/ /c/d/ 结果：/c/d/b/，即将整个 b 复制到 d 下（注意与 rsync 命令的区别）
将本地文件上传到远程服务器	scp		scp 本地文件 远程用户@远程服务器:远程文件
将本地目录上传到远程服务器	scp	最终目录结构参：远程->本地	scp -r 本地目录 远程用户@远程服务器:远程目录

〓 rsync 远程文件/目录传输命令 (yum install rsync) 用法查看 rsync 详细使用方式及与 scp 对比

rsync 会把文件权限（读取/写入/执行）带过来，所有者也会带过来。

相比于 scp 最大的优势就是可以增量同步

功能	命令	--help	示例
下载远程服务器上的目录到本地	rsync	-a 递归 -v 详细 -p, -- perms 保持权限 -g, -- group 保持属组 -o, --owner 保持属主 -r 递归 --progress 打印 --delete 删除已不存在的文件 -u 表示仅更新较新的文件 -z 表示在传输过程中进行压缩 -e 'ssh -p 2222' 指定其它端口	rsync 远程用户@远程服务器:远程目录 本地目录 实例：rsync -avu --progress root@x.x.x.x:/a/b/ /c/d/ 结果：/c/d/，即将 b 内的文件(夹)复制到 d 下（注意与 scp 命令的区别）
将本地文件上传到远程服务器	rsync		rsync 本地文件 远程用户@远程服务器:远程文件
将本地目录上传到远程服务器	rsync	最终目录结构参：远程->本地	rsync 本地目录 远程用户@远程服务器:远程目录

〓 ftp 客户端 (yum install ftp)

功能	命令	--help	示例
登录	ftp		ftp 目标服务器
列出远程当前路径目录/文件	ls		ls
创建远程目录	mkdir		mkdir 目录名
删除远程目录（空）	rmrmdir		mkdir 目录名
进入远程目录	cd		cd 目录名
显示远程当前路径	pwd		pwd
重命名远程文件	rename		rename 原文件名 新文件名
上传文件	put		put 本地文件名
下载文件	get		get 远程文件名
批量下载文件	mget	需要单个确认
批量下载文件【lftp】	mirror	参数有很多	mirror
返回 shell（不退出）	!		!
返回 ftp（接上步）	exit ftp		exit ftp
结束	bye quit		bye quit

〓 iftop

流量监控工具 教程 

〓 GoAccess

实时网站日志分析工具 官网 

〓 Cacti

网络流量监测图形分析工具 官网  百科 

常见问题笔记

加硬盘

• 插入新硬盘

• 若有 RAID，则先设置，使操作系统能认到硬盘

• 使用 fdisk 命令对新设备进行分区

• 使用 mkfs 命令对新分区进行格式化

• 使用 mount 命令进行挂载

• 设置开机自动挂载（vi /etc/fstab）

更改 MySQL 数据库目录位置

• 停止 MySQL 服务

• 将原数据目录转移或复制到新位置（若是复制，则修改所有者使原来一致）

• 找到 my.cnf 配置文件（一般在 /etc/），修改 datadir 值为新路径

• 启动 MySQL 服务

502 Bad Gateway 问题排查

• 查看 PHP 日志，路径：/usr/local/php/var/log

• 一般为“server reached pm.max_children setting (10), consider raising it”连接数问题，在“/usr/local/php/etc”下的所有配置文件中查找并修改相关设置即可（如改成 1000）。

计划任务（实例：定时备份数据库并通过 FTP 同步至其它服务器）

• 创建可执行文件：vi dotask.sh

• dotask.sh 的内容示例：
  

  DATE_TIME=`date +%Y_%m_%d_%H%M%S`;
  FILE_NAME=数据库名_backup_$DATE_TIME.sql;
  cd /home/mysqlbackup/;
  mysqldump -u数据库用户名 -p数据库密码 数据库名>$FILE_NAME;
  tar -zcf $FILE_NAME.tar.gz $FILE_NAME;
  rm $FILE_NAME;
  
  ftp -v -n FTP地址 << END
  user FTP用户名 FTP密码
  bin
  put 本地目录文件 目标路径文件
  bye
  END
  

  
  文件名乱码问题可以在行末加“;”来解决

• 赋予执行权限：chmod 777 dotask.sh （ls 命令时呈绿色）

• 编辑计划任务：crontab -e

• crontab 书写规则：
  

  # 分 时 日 月 周 文件路径
  0 3 * * * /home/dotask.sh
  30 4 * * * /home/dotask2.sh
  

  
  更多帮助 

• 重启 crond：/etc/init.d/crond restart

netstat

• netstat -an | grep xxx.xxx.xxx.xxx 可查看此 IP 的 TCP 请求及端口

本文不定时更新中……

具备 RESTful 相关知识会更有利于学习 ASP.NET Web API：RESTful API 学习笔记

ASP.NET Web API 官网：https://www.asp.net/web-api

服务 URI Pattern

Action	Http verb	URI	说明
Get contact list	GET	/api/contacts	列表
Get filtered contacts	GET	/api/contacts?$top=2	筛选列表
Get contact by ID	GET	/api/contacts/id	获取一项
Create new contact	POST	/api/contacts	增加一项
Update a contact	PUT	/api/contacts/id	修改一项
Delete a contact	DELETE	/api/contacts/id	删除一项

返回类型	Web API 创建响应的方式
void	返回空 204 （无内容）
HttpResponseMessage	转换为直接 HTTP 响应消息。
IHttpActionResult	调用 ExecuteAsync 来创建 HttpResponseMessage，然后将转换为 HTTP 响应消息。
其他类型	将序列化的返回值写入到响应正文中;返回 200 （正常）。

HttpResponseMessage

可提供大量控制的响应消息。 例如，以下控制器操作设置的缓存控制标头。

public class ValuesController : ApiController
{
    public HttpResponseMessage Get()
    {
        HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK, "value");
        response.Content = new StringContent("hello", Encoding.Unicode);
        response.Headers.CacheControl = new CacheControlHeaderValue()
        {
            MaxAge = TimeSpan.FromMinutes(20)
        };
        return response;
    } 
}

IHttpActionResult

public IHttpActionResult Get (int id)
{
    Product product = _repository.Get (id);
    if (product == null)
    {
        return NotFound(); // Returns a NotFoundResult
    }
    return Ok(product);  // Returns an OkNegotiatedContentResult
}

其他的返回类型

响应状态代码为 200 （正常）。此方法的缺点是，不能直接返回错误代码，如 404。 但是，您可以触发 HttpResponseException 的错误代码。

完善 Help 页

一般都是通过元数据注释（Metadata Annotations）来实现的描述的。

显示接口和属性的描述：

打开 HelpPage 区域的 App_Start 目录下的 HelpPageConfig.cs 文件，在 Register 方法的首行取消注释行：

config.SetDocumentationProvider(new XmlDocumentationProvider(HttpContext.Current.Server.MapPath("~/App_Data/XmlDocument.xml")));

在项目右键属性“生成”页，勾选“XML 文档文件”，并填写与上述一致的路径（App_Data/XmlDocument.xml）。

给接口加上 ResponseType 显示响应描述和示例：[ResponseType(typeof(TEntity))]

在实体模型的属性上加入 RequiredAttribute 特性可提供请求或响应中的实体的属性描述，如：[Required]

推荐使用：Swashbuckle

关于格式

在 WebApiConfig.Register() 中加入以下代码以禁止以 XML 格式输出（请按需设置）：

GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear();

Json 序列化去掉 k__BackingField

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new Newtonsoft.Json.Serialization.DefaultContractResolver { IgnoreSerializableAttribute = true };

如果属性值为 null 则不序列化该属性

config.Formatters.JsonFormatter.SerializerSettings = new JsonSerializerSettings { NullValueHandling = NullValueHandling.Ignore };

Discuz! 数据库加索引

待优化的 SQL：（pre_forum_thread 表有 150 万条数据）

SELECT * FROM pre_forum_thread  WHERE `fid`='62' AND `displayorder` IN('0','1','2','3','4')  ORDER BY displayorder DESC, dateline DESC    LIMIT 20, 20

加索引前，

EXPLAIN 结果 Extra 为：Using index condition; Using where; Using filesort

> 时间: 0.915s

加索引后：`fid`, `displayorder`, `dateline`

EXPLAIN 结果 Extra 为：Using where 或 Using index condition

> 时间: 0.001s

magapp 数据库加索引

待优化的 SQL：（mag_score_action_log 表有 200 万条数据）

SELECT COUNT(*) AS tp_count
FROM `mag_score_action_log`
WHERE action_id = 20
	AND user_id = 650070
	AND create_time >= 1534953600
	AND create_time < 1535040000
LIMIT 1

加索引前，

EXPLAIN 结果 Extra 为：?????

> 时间: 70s

加索引后：`action_id`, `user_id`, `create_time`

EXPLAIN 结果 Extra 为：Using where; Using index

> 时间: 0.073s

待优化的 SQL：（mag_score_mission_log 表有约 55 万条数据）

SELECT COUNT(*) AS tp_count
FROM `mag_score_mission_log`
WHERE mission_id = 7
	AND user_id = 650070
	AND create_time >= 1534953600
	AND create_time < 1535040000
LIMIT 1

加索引前，

EXPLAIN 结果 rows 为：549178

> 时间: 17.719s

加索引后：`mission_id`, `user_id`, `create_time`

EXPLAIN 结果 rows 为：1

> 时间: 0.025s

待优化的 SQL：（mag_score_mission_user 表有约 28 万条数据）

SELECT *
FROM `mag_score_mission_user`
WHERE `user_id` = 431779
	AND `mission_id` = 5
	AND `create_time` >= 1534953600
ORDER BY complete_count DESC
LIMIT 1

不加索引

1SIMPLEmag_score_mission_userALL282436Using where; Using filesort

> 时间: 7.325s

`user_id`, `mission_id`

1SIMPLEmag_score_mission_userrefix_us_miix_us_mi10const,const7Using where; Using filesort

时间: 0.014s

`user_id`, `mission_id`, `create_time`

1SIMPLEmag_score_mission_userrangeix_us_miix_us_mi151Using index condition; Using filesort

时间: 0.023s

`user_id`, `mission_id`, `complete_count`

1SIMPLEmag_score_mission_userrefix_us_miix_us_mi10const,const7Using where

> 时间: 0.014s

`user_id`, `mission_id`, `complete_count`, `create_time`

1SIMPLEmag_score_mission_userrefix_us_miix_us_mi10const,const7Using where

> 时间: 0.028s

`user_id`, `mission_id`, `create_time`, `complete_count`

1SIMPLEmag_score_mission_userrangeix_us_miix_us_mi151Using index condition; Using filesort

> 时间: 0.025s

其它就不一一举例了，根据 SHOW FULL PROCESSLIST 的慢查询自行加索引就行了。

工作这几年碰到的版本检测升级的接口也算是五花八门，啥样的都有，但肯定有的功能是有个 apk 的下载链接，能间接或直接提示你是强制还是非强制更新：

• 间接是指提供你后台最新版本号，让你自己与本地版本号通过比较得出是否升级；

• 直接就是后台接口直接返回个 Boolean 类型告诉你是强制或者非强制更新。

个人认为一个好的版本检测接口需要设计的更灵活更清晰用起来更方便，下面就我理解的接口设计如下（如思路有误，欢迎指正）：

总字段如下(并不是所有字段都要返回给客户端)：
  1.最新版本号 ：newVersion
  2.最小支持版本号 : minVersion
  3.apk 下载 url : apkUrl
  4.更新文案 : updateDescription
  5.是否有更新 : isUpdate
  6.是否强制更新 : forceUpdate 可选字段：
  7.apk 文件大小：apkSize
  8.apk 的文件 MD5 值：md5

方案一(后端处理逻辑)：
在客户端请求参数中添加当前版本号 currentVersion 传输给后台，由后台根据客户端传过来的当前版本号 currentVersion 做相应的判断后给出是否强制更新。
后端逻辑如下：

1. 如果 currentVersion < newVersion, 则 isUpdate = true；

• 如果 currentVersion < minVersion, 则 forceUpdate = true；

• 如果 currentVersion >= minVersion, 则 forceUpdate = false;

• 如果有特殊需求可指定某个版本必须强制更新，如 currentVersion == XXX, 则 forceUpdate = true;

2. 如果 currentVersion == newVersion，则 isUpdate = false.

结论：
返回客户端的字段仅需要 apk 下载 url : apkUrl、更新文案 : updateDescription、是否有更新 : isUpdate 、 是否强制更新 : forceUpdate 这四个字段即可。

方案二（前端处理逻辑）：
逻辑和后端处理逻辑大体上一致，只是把逻辑判断移到前台，故需要后端提供最新版本号 ：newVersion 、 最小支持版本号 : minVersion 、apk下载url : apkUrl 、更新文案 : updateDescription 这四个字段。

客户端逻辑如下：

1. 如果 currentVersion < newVersion, 则有更新信息；

• 如果 currentVersion < minVersion, 则需要强制更新；

• 如果 currentVersion >= minVersion, 则不需要强制更新;

2. 如果 currentVersion == newVersion，则没有更新信息。

---

总结：
细心的你可能会发现上面的可选字段 apkSize 和 md5 并没有用到，既然是可选字段也就是可用可不用，根据需要决定是否采用，这里来讲下他们的用处。

• apk 文件大小 apkSize
  这个用处可以说出于考虑用户体验，需要在升级弹框出来展示给用户将要更新的内容多大，让用户决定在非 WIFI 状态是否要更新，不能为了拉用户下载量或所谓的 UV 数直接让用户在不知道大小的情况下去直接下载（土豪用户绕路）。

• apk 的文件 MD5 值
  这个主要是出于安全考虑吧，因为文件内容固定的话对应的 md5 是一样的，我们可以通过这个 md5 值来和下载的 apk 的 md5 值进行比较去保证我们从服务器更新下载的 apk 是一个完整的未被篡改的安装包，也就是说如果我们下载的 apk 的 md5 值和服务器返回的 md5 值相等，则说明我们下载的 apk 是完整的，且没有被相关有心人处理过的 apk。

综上所述，这个版本更新的处理逻辑客户端和后端谁来做都可以，无关乎懒不懒的问题，个人感觉灵活性后端比客户端方便多了，毕竟后端可以指定 minVersion 与 newVersion 中间的任意一个版本强制更新，而客户端做起来就没有那么灵活了，个人见解，如有更好的方案，欢迎指教。

本文未完成，部分测试方法、条件或结果可能有误，请谨慎参考！ :)

本文基于 MySQL 的 InnoDB BTREE 方法的索引进行测试。

以一张包含 2000 万条记录的表做实验：

CREATE TABLE `dt_read`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `time` datetime(0) NOT NULL,
  `a_id` int(11) NOT NULL,
  PRIMARY KEY (`id`) USING BTREE
);

这张表是用于记录文章点击量的，

`id` 为主键，int(11) 自增；

`time` 为非空 datetime，表示文章打开时间，测试数据是从 2017-03-11 至 2018-04-28；

`a_id` 为非空 int(11)，表示文章 ID，在此表中不唯一，测试数据是从 1 至 260218。

体验“全表扫描”

首先来体验一下什么是全表扫描，执行下面语句：

SELECT * FROM `dt_read` WHERE `time` < '2020-1-1' LIMIT 10

> 时间: 0.012s

SELECT * FROM `dt_read` WHERE `time` < '2000-1-1' LIMIT 10

> 时间: 7.317s

表中数据是按主键从小到大排列的，当查询条件为 `time` < '2020-1-1' 时，能很快地从表的前端找到 10 条满足条件的数据，所以不再继续判断后面的记录，立刻返回结果，耗时 0.012 秒；但当条件改为 `time` < '2000-1-1' 时，同样逐条判断，直到最后一条也没有找到，这种情况就是所谓的“全表扫描”，耗时 7 秒。

索引对 ORDER BY 的 ASC 和 DESC 的影响

我们给 `time` 建一个索引，同样执行刚才需要全表扫描的语句：

SELECT * FROM `dt_read` WHERE `time` < '2000-1-1' LIMIT 10

> 时间: 0.012s

创建 `time` 的索引后，相当于生成了一张按 `time` 字段排列的新表，这时 MySQL 就能够很快地定位并找到符合条件的记录，避免了全表扫描。

试试按 `time` 倒序排：

SELECT * FROM `dt_read` WHERE `time` < '2000-1-1' ORDER BY `time` DESC LIMIT 10

> 时间: 0.013s

结论：索引对 ORDER BY 的顺序（ASC）和倒序（DESC）都是有效的。

索引字段的次序对 WHERE 和 ORDER BY 的影响

删除所有索引，创建一个新的索引，字段依次为 `time`, `a_id`。

分别执行以下查询：

SELECT * FROM `dt_read` WHERE `time` < '2000-1-1' AND `a_id` < 0 LIMIT 10

> 时间: 0.013s

SELECT * FROM `dt_read` WHERE `a_id` < 0 AND `time` < '2000-1-1' LIMIT 10

> 时间: 0.013s

结论：MySQL 会自动优化 WHERE 条件的次序来匹配最合适的索引。

但在 ORDER BY 中却不是这么回事了：

SELECT * FROM `dt_read` ORDER BY `time`, `a_id` LIMIT 10

> 时间: 0.013s

SELECT * FROM `dt_read` ORDER BY `a_id`, `time` LIMIT 10

> 时间: 14.066s

原因也很好理解，对两个字段进行排序，先后次序肯定会影响结果集，因此只能以 SQL 语句指定的字段次序来 ORDER BY，这样，按索引的字段次序进行 ORDER BY 查询无疑是更快的。

索引中的字段必须依次使用

保持上例创建的索引不变，即 `time`, `a_id`。

SELECT * FROM `dt_read` WHERE `time` < '2000-1-1' AND `a_id` < 0 LIMIT 10

> 时间: 0.013s

SELECT * FROM `dt_read` WHERE `a_id` < 0 LIMIT 10

> 时间: 6.438s

上句合理利用了索引的字段，而下句跳过了 `time`，直接 WHERE 了 `a_id`，这是不受该索引支持的。

我们可以想象一下这张由索引生成的虚拟表，其实就是一张普通的平面二维表格，按索引指定的字段次序进行了排序，所以全表中仅仅是索引指定的第一个字段是按大小排列的，第二个字段是在第一个字段值相同的区域内按大小排列，后同。所以，跳过索引指定的第一个字段直接对第二个字段进行检索，是无法应用该索引的。这个结论也同样也体现在 ORDER BY 语句中：

SELECT * FROM `dt_read` ORDER BY `time`, `a_id` LIMIT 10

> 时间: 0.013s

SELECT * FROM `dt_read` ORDER BY `a_id` LIMIT 10

> 时间: 29.566s

WHERE 和 ORDER BY 混合

保持上例创建的索引不变，即 `time`, `a_id`。

先来执行这两句：

SELECT * FROM `dt_read` ORDER BY `a_id` LIMIT 10

> 时间: 12.29s

SELECT * FROM `dt_read` WHERE `time` < '2000-1-1' ORDER BY `a_id` LIMIT 10

> 时间: 0.013s

仅仅 WHERE 了一个 `time`，对 ORDER BY `a_id` 的效率却有质的提升，是因为 WHERE 中的 `time` 和 ORDER BY 中的 `a_id` 一起找到了索引吗？答案是否定的。

我们把时间改大，让它能马上找到符合条件的数据：

SELECT * FROM `dt_read` WHERE `time` < '2020-1-1' ORDER BY `a_id` LIMIT 10

> 时间: 22.34s

为什么这个语句就不走索引了呢？

其实，一个简单的 SELECT 查询语句，首先执行 WHERE，然后 ORDER BY，最后是 LIMIT。每一步都独自去找了索引，而非 WHERE 和 ORDER BY 混在一起去找索引。必须保证每一步是快的，最终才是快的。

当 `time` < '2000-1-1' 时，WHERE 用到了索引，所以很快，ORDER BY 却没有用到索引，但为什么也很快呢？因为 WHERE 的结果集非常小（示例中为 0 条）。

当 `time` < '2020-1-1' 时，WHERE 也用到了索引，但其结果集非常大（示例中为所有记录），再 ORDER BY `a_id` 就非常慢了，因为我们没有创建以 `a_id` 开头的索引。

现在把索引改成只有 `time` 一个字段。

SELECT * FROM `dt_read` WHERE `time` < '2020-1-1' ORDER BY `a_id` LIMIT 10

> 时间: 6.033s

因为索引里有 `

SELECT * FROM `dt_read` WHERE `time` < '2000-1-1' ORDER BY `a_id` LIMIT 10

> 时间: 0.013s

SELECT * FROM `dt_read` WHERE `a_id` < 0 ORDER BY `time` LIMIT 10

> 时间: 6.033s

第二句先 WHERE `a_id`，后 ORDER BY `time` 是不能匹配所建的索引的。

索引中的字段越多越好

分别在创建索引（`time`）和索引（`time`, `a_id`）的情况下执行下面语句：

本例使用 ORDER BY 而不是 WHERE 来测试是因为，在 WHERE 的多个条件下，如果符合前一条件的筛选结果集过小会导致判断第二条件时数据量不足，无法判断索引是否起作用。

SELECT * FROM `dt_read` ORDER BY `time` LIMIT 10

仅创建索引（`time`）的情况下：

> 时间: 0.013s

仅创建索引（`time`, `a_id`）的情况下：

> 时间: 0.013s

SELECT * FROM `dt_read` ORDER BY `time`, `a_id` LIMIT 10

仅创建索引（`time`）的情况下：

> 时间: 15.015s

仅创建索引（`time`, `a_id`）的情况下：

> 时间: 0.014s

可以看到，在索引字段依次使用的前提下，索引字段数不少于查询字段数才能避免全表扫描。

虽然索引中的字段越多越好，但必须依次使用，否则也是无效索引。

索引对 INSERT / UPDATE / DELETE 的效率影响

分别在创建索引（`time`）和索引（`time`, `a_id`）的情况下执行下面语句：

INSERT INTO `dt_read` (`time`, `a_id`) VALUES ('2018-4-28', 260218)

不建索引的情况下：

> 时间: 0.01s

仅创建索引（`time`）的情况下：

> 时间: 0.01s

同时创建索引（`time`）和索引（`time`, `a_id`）的情况下：

> 时间: 0.01s

UPDATE `dt_read` SET `time` = '2018-4-28' WHERE `id` = 20000000（注：存在该 id 值的记录）

不建索引的情况下：

> 时间: 0.01s

仅创建索引（`time`）的情况下：

> 时间: 0.01s

同时创建索引（`time`）和索引（`time`, `a_id`）的情况下：

> 时间: 0.01s

虽然在 INSERT / UPDATE / DELETE 时数据库会更新索引，但从实测数据来看，索引对其效率的影响可忽略不计。

一些误区

“in 语法效率很低”?

in 语法也是应用索引的，网传 in 会比一个一个 WHERE OR 要慢得多的说法是不靠谱的。in 主键和 in 索引同理。

另外：

对于字符串类型，LIKE '%abc%' 是不能应用索引的，但 LIKE 'abc%' 可以。更多关于字符串类型的索引，请查阅全文索引（FULLTEXT）。

索引的字段是可以指定长度的，类似字符串索引指定前面若干唯一字符就可以优化效率。

本文系个人实践总结，欢迎批评指正！

获取

在 NuGet 中搜索 ThoughtWorks.QRCode

Demo

简单示例

var qr = new ThoughtWorks.QRCode.Codec.QRCodeEncoder();
Bitmap bitmap = qr.Encode("http://xoyozo.net/");

扩展示例

string content = "http://xoyozo.net/";

var qr = new ThoughtWorks.QRCode.Codec.QRCodeEncoder
{
    // 纠错级别，L (7%)、M (15%)、Q (25%)、H (30%)
    QRCodeErrorCorrect = ThoughtWorks.QRCode.Codec.QRCodeEncoder.ERROR_CORRECTION.H,
    // 码元尺寸（像素）
    QRCodeScale = 4,
    // 前景色（默认黑色）
    QRCodeForegroundColor = Color.Black,
    // 背景色（默认白色）
    QRCodeBackgroundColor = Color.White,
};

// 根据内容确定 Mode，参：http://en.wikipedia.org/wiki/QR_code#Storage
if (Regex.IsMatch(content, @"^\d+$"))
{
    qr.QRCodeEncodeMode = ThoughtWorks.QRCode.Codec.QRCodeEncoder.ENCODE_MODE.NUMERIC;
}
else if (Regex.IsMatch(content, @"^[0-9A-Z $%*+-./:]+$"))
{
    qr.QRCodeEncodeMode = ThoughtWorks.QRCode.Codec.QRCodeEncoder.ENCODE_MODE.ALPHA_NUMERIC;
}
else
{
    qr.QRCodeEncodeMode = ThoughtWorks.QRCode.Codec.QRCodeEncoder.ENCODE_MODE.BYTE;
}

Bitmap bitmap = qr.Encode(content, Encoding.Default); // 编码，简体中文系统默认为 gb2312

裁切掉多余的 1 像素

ThoughtWorks.QRCode 生成的四周没有留白的二维码图片，其右边和下边分别会多出 1 像素，使用以下方法来调整图片大小

// 创建一个新的图片（宽度和高度各缩小 1 像素）
Bitmap bitmap2 = new Bitmap(bitmap.Size.Width - 1, bitmap.Size.Height - 1);
// 以新图片来绘图
Graphics g2 = Graphics.FromImage(bitmap2);
// 新旧图片绘制到新图片中（左上角对齐）
g2.DrawImage(bitmap, 0, 0);

将 Bitmap 写入到流

Stream stream = new MemoryStream();
bitmap.Save(stream, ImageFormat.Png);

若已裁切 1 像素，请修改为 bitmap2

将 Bitmap 保存到磁盘

string path = "D:\wwwroot\upload\abc.png";
bitmap.Save(path, ImageFormat.Png);

若已裁切 1 像素，请修改为 bitmap2

更多

使用 ZXing.Net 生成二维码

对比 ThoughtWorks.QRCode 和 ZXing.Net

论坛使用阿里云的 ECS + RDS + OSS 搭建，最近经常隔三差五出现 RDS 的 CPU 和连接数突然满负荷的情况，导致数据库无法连接。这种情况一般会认为是受到了攻击，因为如果是访问量大或者是哪里有慢查询，应该是资源消耗逐步上升直至崩溃的，沿着这个思路去查 Web 日志封 IP，但效果不大，关闭功能、卸载插件也没用。

开启阿里云后台的 SQL 审计，能看到 SQL 查询日志，但是很难找有问题的 SQL。

最终在重启 RDS 后执行以下语句列出所有正在执行或阻塞的语句：

show full processlist

在结果列中，Command 为 Query 是正在执行查询操作的语句，发现几乎所有的 SQL 都是：

SELECT * FROM pre_forum_thread WHERE tid>0 AND fid IN('42','95','247','41','567','62','149','229','37','230','93','190','284','75','38','568') AND `fid`<>'546' AND replies > 0 AND displayorder>=0 ORDER BY lastpost DESC  LIMIT 10

再加上之前出现的情况是，论坛帖子列表和详情页面能正常打开时，论坛首页也不一定能打开，所以基本定位到是“首页四格”的数据库查询导致的。

进入论坛后台首页四格设置，对比了版块 id 后确认了这个 bug。

单独执行该语句大约耗时 5s（主题帖 200 万），设置的缓存时间 10 分钟。

processlist 中看到这些语句的 state 都是 Creating sort index，尝试去掉 ORDER BY 后执行果然只需要 16ms。

5s 内的访客都是从数据库读取的，能处理完就正常，否则累积就导致 RDS 崩溃，每 10 分钟都会重现一次风险。

当然这个问题可以通过添加索引来解决。

编者按：今天腾讯万技师同学的这篇技术总结必须强烈安利下，目录清晰，层次分明，每个接口都有对应的简介、系统要求、实例、核心代码以及超实用的思维发散，帮你直观把这些知识点get起来。以现在HTML 5的势头，同志们，你看到的这些，可都是钱呐。

十二年前，无论多么复杂的布局，在我们神奇的table面前，都不是问题；

十年前，阿捷的一本《网站重构》，为我们开启了新的篇章；

八年前，我们研究yahoo.com，惊叹它在IE5下都表现得如此完美；

六年前，Web标准化成了我们的基础技能，我们开始研究网站性能优化；

四年前，我们开始研究自动化工具，自动化测试，谁没玩过nodejs都不好意思说是页面仔；

二年前，各种终端风起云涌，响应式、APP开发都成为了我们研究的范围，CSS3动画开始风靡；

如今，CSS3动画、Canvas、SVG、甚至webGL你已经非常熟悉，你是否开始探寻，接下来，我们可以玩什么，来为我们项目带来一丝新意？

没错，本文就是以HTML5 Device API为核心，对HTML5的一些新接口作了一个完整的测试，希望能让大家有所启发。

目录：

一、让音乐随心而动 – 音频处理 Web audio API
二、捕捉用户摄像头 – 媒体流 Media Capture
三、你是逗逼？ – 语音识别 Web Speech API
四、让我尽情呵护你 – 设备电量 Battery API
五、获取用户位置 – 地理位置 Geolocation API
六、把用户捧在手心 – 环境光 Ambient Light API
七、陀螺仪 Deviceorientation
八、Websocket
九、NFC
十、震动 - Vibration API
十一、网络环境 Connection API

一、让音乐随心而动 – 音频处理 Web audio API

简介：

Audio对象提供的只是音频文件的播放，而Web Audio则是给了开发者对音频数据进行分析、处理的能力，比如混音、过滤。

系统要求：

ios6+、android chrome、android firefox

实例：

http://sy.qq.com/brucewan/device-api/web-audio.html

核心代码：

var context = new webkitAudioContext();
var source = context.createBufferSource();   // 创建一个声音源
source.buffer = buffer;   // 告诉该源播放何物 
createBufferSourcesource.connect(context.destination);   // 将该源与硬件相连
source.start(0); //播放

技术分析：

当我们加载完音频数据后，我们将创建一个全局的AudioContext对象来对音频进行处理，AudioContext可以创建各种不同功能类型的音频节点AudioNode，比如

1、源节点（source node）

我们可以使用两种方式加载音频数据：
<1>、audio标签

var sound, audio = new Audio();
audio.addEventListener('canplay', function() {
 sound = context.createMediaElementSource(audio);
 sound.connect(context.destination);
});
audio.src = '/audio.mp3';

<2>、XMLHttpRequest

var sound, context = createAudioContext();
var audioURl = '/audio.mp3'; // 音频文件URL
var xhr = new XMLHttpRequest();
xhr.open('GET', audioURL, true);
xhr.responseType = 'arraybuffer'; 
xhr.onload = function() {
 context.decodeAudioData(request.response, function (buffer) {
 source = context.createBufferSource();
 source.buffer = buffer;
 source.connect(context.destination);
 }
}
xhr.send();

2、分析节点（analyser node）

我们可以使用AnalyserNode来对音谱进行分析，例如：

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

function draw() {
 drawVisual = requestAnimationFrame(draw);
 analyser.getByteTimeDomainData(dataArray);
 // 将dataArray数据以canvas方式渲染出来
};

draw();

3、处理节点（gain node、panner node、wave shaper node、delay node、convolver node等）

不同的处理节点有不同的作用，比如使用BiquadFilterNode调整音色（大量滤波器）、使用ChannelSplitterNode分割左右声道、使用GainNode调整增益值实现音乐淡入淡出等等。

需要了解更多的音频节点可能参考：
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

4、目的节点（destination node）

所有被渲染音频流到达的最终地点

思维发散：

1、可以让CSS3动画跟随背景音乐舞动，可以为我们的网页增色不少；
2、可以尝试制作H5酷酷的变声应用，增加与用户的互动；
3、甚至可以尝试H5音乐创作。

看看google的创意：http://v.youku.com/v_show/id_XNTk0MjQyNDMy.html

二、捕捉用户摄像头 – 媒体流 Media Capture

简介：

通过getUserMedia捕捉用户摄像头获取视频流和通过麦克风获取用户声音。

系统要求：

android chrome、android firefox

实例：

捕获用户摄像头 捕获用户麦克风

http://sy.qq.com/brucewan/device-api/camera.html

http://sy.qq.com/brucewan/device-api/microphone-usermedia.html

核心代码：

1、摄像头捕捉

navigator.webkitGetUserMedia ({video: true}, function(stream) {
 video.src = window.URL.createObjectURL(stream);
 localMediaStream = stream;
}, function(e){

})

2、从视频流中拍照

btnCapture.addEventListener('touchend', function(){
	if (localMediaStream) {
		canvas.setAttribute('width', video.videoWidth);
		canvas.setAttribute('height', video.videoHeight);
		ctx.drawImage(video, 0, 0);
	}
}, false);

3、用户声音录制

navigator.getUserMedia({audio:true}, function(e) {
	context = new audioContext();
	audioInput = context.createMediaStreamSource(e);	
	volume = context.createGain();
	recorder = context.createScriptProcessor(2048, 2, 2);
	recorder.onaudioprocess = function(e){
		recordingLength += 2048;
		recorder.connect (context.destination); 
	}	
}, function(error){});

4、保存用户录制的声音

var buffer = new ArrayBuffer(44 + interleaved.length * 2);
var view = new DataView(buffer);
fileReader.readAsDataURL(blob); // android chrome audio不支持blob
… audio.src = event.target.result;

思维发散：

1、从视频拍照自定义头像；
2、H5视频聊天；
3、结合canvas完成好玩的照片合成及处理；
4、结合Web Audio制作有意思变声应用。

三、你是逗逼？ – 语音识别 Web Speech API简介：

1、将文本转换成语音；
2、将语音识别为文本。

系统要求：
ios7+，android chrome，android firefox

测试实例：

http://sy.qq.com/brucewan/device-api/microphone-webspeech.html

核心代码：

1、文本转换成语音，使用SpeechSynthesisUtterance对象；

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.volume = 1; // 0 to 1
msg.text = ‘识别的文本内容’;
msg.lang = 'en-US';
speechSynthesis.speak(msg);

2、语音转换为文本，使用SpeechRecognition对象。

var newRecognition = new webkitSpeechRecognition();
newRecognition.onresult = function(event){
	var interim_transcript = ''; 
	for (var i = event.resultIndex; i < event.results.length; ++i) {
		final_transcript += event.results[i][0].transcript;
	}
};

测试结论：

1、Android支持不稳定；语音识别测试失败（暂且认为是某些内置接口被墙所致）。

思维发散：

1、当语音识别成为可能，那声音控制将可以展示其强大的功能。在某些场景，比如开车、网络电视，声音控制将大大改善用户体验；
2、H5游戏中最终分数播报，股票信息实时声音提示，Web Speech都可以大放异彩。

 四、让我尽情呵护你 – 设备电量 Battery API简介：

查询用户设备电量及是否正在充电。

系统要求：

android firefox

测试实例：

http://sy.qq.com/brucewan/device-api/battery.html

核心代码：

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;
var str = '';
if (battery) {
 str += '<p>你的浏览器支持HTML5 Battery API</p>';
 if(battery.charging) {
 str += '<p>你的设备正在充电</p>';
} else {
 str += '<p>你的设备未处于充电状态</p>';
}
 str += '<p>你的设备剩余'+ parseInt(battery.level*100)+'%的电量</p>';
} else {
 str += '<p>你的浏览器不支持HTML5 Battery API</p>';
}

测试结论：

1、QQ浏览器与UC浏览器支持该接口，但未正确显示设备电池信息；
2、caniuse显示android chrome42支持该接口，实测不支持。

思维发散：

相对而言，我觉得这个接口有些鸡肋。
很显然，并不合适用HTML5做电池管理方面的工作，它所提供的权限也很有限。
我们只能尝试做一些优化用户体验的工作，当用户设备电量不足时，进入省电模式，比如停用滤镜、摄像头开启、webGL、减少网络请求等。

 五、获取用户位置 – 地理位置 Geolocation简介：

Geolocation API用于将用户当前地理位置信息共享给信任的站点，目前主流移动设备都能够支持。

系统要求：

ios6+、android2.3+

测试实例：

http://sy.qq.com/brucewan/device-api/geolocation.html

核心代码：

var domInfo = $("#info");

// 获取位置坐标
if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{
	domInfo.innerHTML="抱歉，你的浏览器不支持地理定位！";
}

// 使用腾讯地图显示位置
function showPosition(position) {
	var lat=position.coords.latitude;
	var lon=position.coords.longitude;

	mapholder = $('#mapholder')
	mapholder.style.height='250px';
	mapholder.style.width = document.documentElement.clientWidth + 'px';

	var center = new soso.maps.LatLng(lat, lon);
	var map = new soso.maps.Map(mapholder,{
		center: center,
		zoomLevel: 13
	});

	var geolocation = new soso.maps.Geolocation();
	var marker = null;
	geolocation.position({}, function(results, status) {
		console.log(results);
		var city = $("#info");
		if (status == soso.maps.GeolocationStatus.OK) {
			map.setCenter(results.latLng);
			domInfo.innerHTML = '你当前所在城市: ' + results.name;
		if (marker != null) {
			marker.setMap(null);
		}
		// 设置标记
		marker = new soso.maps.Marker({
			map: map,
			position:results.latLng
		});
		} else {
			alert("检索没有结果，原因: " + status);
		}
	});
}

测试结论：

1、Geolocation API的位置信息来源包括GPS、IP地址、RFID、WIFI和蓝牙的MAC地址、以及GSM/CDMS的ID等等。规范中没有规定使用这些设备的先后顺序。
2、初测3g环境下比wifi环境理定位更准确；
3、测试三星 GT-S6358(android2.3) geolocation存在，但显示位置信息不可用POSITION_UNAVAILABLE。

六、把用户捧在手心 – 环境光 Ambient Light简介：

Ambient Light API定义了一些事件，这些时间可以提供源于周围光亮程度的信息，这通常是由设备的光感应器来测量的。设备的光感应器会提取出辉度信息。

系统要求：

android firefox

测试实例：

http://sy.qq.com/brucewan/device-api/ambient-light.html

核心代码：

这段代码实现感应用前当前环境光强度，调整网页背景和文字颜色。

var domInfo = $('#info');
if (!('ondevicelight' in window)) {
	domInfo.innerHTML = '你的设备不支持环境光Ambient Light API';
} else {
	var lightValue = document.getElementById('dl-value');
	window.addEventListener('devicelight', function(event) {
		domInfo.innerHTML = '当前环境光线强度为：' + Math.round(event.value) + 'lux';
		var backgroundColor = 'rgba(0,0,0,'+(1-event.value/100) +')';
		document.body.style.backgroundColor = backgroundColor;
		if(event.value < 50) {
			document.body.style.color = '#fff'
		} else {
			document.body.style.color = '#000'
		}
	});
}

思维发散：

该接口适合的范围很窄，却能做出很贴心的用户体验。

1、当我们根据Ambient Light强度、陀螺仪信息、当地时间判断出用户正躺在床上准备入睡前在体验我们的产品，我们自然可以调整我们背景与文字颜色让用户感觉到舒适，我们还可以来一段安静的音乐，甚至使用Web Speech API播报当前时间，并说一声“晚安”，何其温馨；

2、该接口也可以应用于H5游戏场景，比如日落时分，我们可以在游戏中使用安静祥和的游戏场景；

3、当用户在工作时间将手机放在暗处，偷偷地瞄一眼股市行情的时候，我们可以用语音大声播报，“亲爱的，不用担心，你的股票中国中车马上就要跌停了”，多美的画面。

参考文献：
https://developer.mozilla.org/en-US/docs/Web/API
http://webaudiodemos.appspot.com/
http://www.w3.org/2009/dap/

数据库设计规范是个技术含量相对低的话题，只需要对标准和规范的坚持即可做到。当系统越来越庞大，严格控制数据库的设计人员，并且有一份规范书供执行参考。在程序框架中，也有一份强制性的约定，当不遵守规范时报错误。

以下20个条款是我从一个超过1000个数据库表的大型ERP系统中提炼出来的设计约定，供参考。

 

1  所有的表的第一个字段是记录编号Recnum，用于数据维护

[Recnum] [decimal] (8, 0) NOT NULL IDENTITY(1, 1)

在进行数据维护的时候，我们可以直接这样写：

UPDATE Company SET Code='FLEX'  WHERE Recnum=23

2 每个表增加4个必备字段，用于记录该笔数据的创建时间，创建人，最后修改人，最后修改时间

[CreatedDate] [datetime] NULL,
[CreatedBy] [nvarchar] (10) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
[RevisedDate] [datetime] NULL,
[RevisedBy] [nvarchar] (10) COLLATE SQL_Latin1_General_CP1_CI_AS NULL

框架程序中会强制读取这几个字段，默认写入值。

 

3  主从表的主外键设计

主表用参考编号RefNo作为主键，从表用RefNo,EntryNo作为主键。RefNo是字符串类型，可用于单据编码功能中自动填写单据流水号，从表的EntryNo是行号，LineNo是SQL Server 的关键字，所以用EntryNo作为行号。

如果是三层表，则第三层表的主键依次是RefNo,EntryNo,DetailEntryNo，第三个主键用于自动增长行号。

 

4 设计单据状态字段

字段	含义
Posted	过帐，已确认
Closed	已完成
Cancelled	已取消
Approved	已批核
Issued	已发料
Finished	已完成
Suspended	已取消

5 字段含义相近，把相同的单词调成前缀。

比如工作单中的成本核算，人工成本，机器成本，能源成本，用英文表示为LaborCost,MachineCost,EnergyCost

但是为了方便规组，我们把Cost调到字段的前面，于是上面三个字段命名为CostLabor,CostMachine,CostEnergy。

可读性后者要比前者好一点，Visual Studio或SQL Prompt智能感知也可帮助提高字段输入的准确率。

 

6 单据引用键命名 SourceRefNo  SourceEntryNo

销售送货Shipment会引用到是送哪张销售单据的，可以添加如下引用键SourceRefNo,SourceEntryNo，表示送货单引用的销售单的参考编号和行号。Source开头的字段一般用于单据引用关联。

 

7 数据字典键设计

比如员工主档界面的员工性别Gender，我的方法是在源代码中用枚举定义。性别枚举定义如下：

public enum Gender
{
        [StringValue("M")]
        [DisplayText("Male")]
        Male,

        [StringValue("F")]
        [DisplayText("Female")]
        Female
}

在代码中调用枚举的通用方法，读取枚举的StringValue写入到数据库中，读取枚举的DisplayText显示在界面中。

经过这一层设计，数据库中有关字典方面的设计就规范起来了，避免了数据字典的项的增减给系统带来的问题。

 

8 数值类型字段长度设计

Price/Qty 数量/单价  6个小数位   nnnnnnnnnn.nnnnnn 格式 （10.6） 
Amount 金额   2个小数位          nnnnnnnnnnnn.nn 格式（12.2） 
Total Amt 总金额 2个小数位       nnnnnnnnnnnnnn.nn 格式（14.2）

参考编号默认16个字符长度，不够用的情况下增加到30个字符，再不够用增加到60个字符。这样可以保证每张单据的第一个参考编号输入控件看起来都是一样长度。

除非特别需求，一般而言，界面中控件的长度取自映射的数据库中字段的定义长度。

 

9 每个单据表头和明细各增加10个自定义字段，基础资料表增加20个自定义字段

参考供应商主档的自定义字段，自定义字段的名称统一用UserDefinedField。

ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_1] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_2] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_3] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_4] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_5] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_6] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_7] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_8] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_9] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_10] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_11] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_12] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_13] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_14] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_15] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_16] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_17] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_18] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_19] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_20] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL

 

10 多货币(本位币)转换字段的设计

金额或单价默认是以日记帐中的货币为记录，当默认货币与本位币不同时需要同时记录下本位币的值。

销售单销售金额 SalesAmount或SalesAmt,本位币字段定义为SalesAmountLocal或SalesAmtLocal

通常是在原来的字段后面加Local表示本位币的值。

 

11 各种日期字段的设计

字段名称	含义
TranDate	日期帐日期 Tran是Transaction的简写
PostedDate	过帐日期
ClosedDate	完成日期
InvoiceDate	开发票日期
DueDate	截止日期
ScheduleDate	计划日期，这个字段用在不同的单据含义不同。比如销售单是指送货日期，采购单是指收货日期。
OrderDate	订单日期
PayDate	付款日期
CreatedDate	创建日期
RevisedDate	修改日期
SettleDate	付款日期
IssueDate	发出日期
ReceiptDate	收货日期
ExpireDate	过期时间

 

12 财务有关的单据包含三个标准字段

FiscalYear 财年，PeriodNo 会计期间，Period 前面二个的组合。以国外的财年为例子，FiscalYear是2015，PeriodNo是4，Period是2015/04。

欧美会计期间是从每年的4月份开始，需要注意的是会计期间与时间没有必然的联系，看到会计期间是2015/04，不一定是表示2015的4月份，它只是说这是2015财年的第四期，具体在哪个时间段需要看会计期间定义。

 

13 单据自动生成 DirectEntry

有些单据是由其它单据生成过来的，逻辑上应该不支持编辑。比如销售送货Shipment单会产生出仓单，出仓单应该不支持编辑，只能做过帐扣减库存操作。这时需要DirectEntry标准字段来表示。当手工创建一张出仓单时，将DirectEntry设为true,表示可编辑单据中的字段值，当由其它单据传递产生过来产生的出仓单，将DirectEntry设为false，表示不能编辑此单据。这种情况还发生在业务单据产生记帐凭证(Voucher)的功能中，如果可以修改由原始单据传递过来的数量金额等字段，则会导致与源单不匹配，给系统对帐产生困扰。

 

14 百分比值字段的设计

Percentage百分比值，用于折扣率，损耗率等相关比率设定的地方。推荐用数值类型表示，用脚本表示是

[ScrapRate] [decimal] (5, 2) NULL

预留两位小数，整数部分支持1-999三位数。常常是整数部分2位就可以，用3位也是为了支持一些特殊行业(物料损耗率超过100）的要求。

 

15 日志表记录编号LogNo字段设计

LogNo字段的设计有些巧妙，以出仓单为例子，一张出仓单有5行物料明细，每一行物料出仓都会扣减库存，再写物料进出日记帐，因为这五行物料出仓来自同一个出仓单，于是将这五行物料的日记帐中的LogNo都设为同一个值。于在查询数据时，以这个字段分组即可看到哪些物料是在同一个时间点上出仓的，对快速查询有很重要的作用。

 

16 基础资料表增加名称，名称长写，代用名称三个字段

比如供应商Vendor表，给它加以下三个字段：

Description 供应商名称，比如微软公司。

ExtDescription 供应商名称长写，比如电气行业的南网的全名是南方国家电网有限公司。

AltDescription 供应商名称替代名称，用在报表或是其它单据引用中。比如采购单中的供应商是用微软，还是用代用名称Microsoft，由参数(是否用代用名称)控制。

 

17 文件类表增加MD5 Hash字段

比如产品数据管理系统要读取图纸，单据功能中增加的附件文件，这类涉及文件读写引用的地方，考虑存放文件的MD5哈希值。文件的MD5相当于文件的唯一识别身份，在网上下载文件时，网站常常会放出文件的MD5值，以方便对比核对。当下载到本机的文件的MD5值与网站上给出的值不一致时，有可能这个文件被第三方程序修改过，不可信任。

 

18 数据表的主键用字符串而不是数字

比如销售单中的货币字段，是存放货币表的货币字符串值RMB/HKD/USD，还是存放货币表的数字键，1/2/3。

存放前者对于报表制作相对容易，但是修改起来相对麻烦。存放后者对修改数据容易，但对报表类或查询类操作都需要增加一个左右连接来看数字代表的货币。金蝶使用的是后者，它的BOS系统也不允许数据表之间有直接的关联，而是间接通过Id值来关联表。

在我看到的系统中，只有一个会计期间功能(财年Fiscal Year)用到数字值作主键，其余的单据全部是字符串做主键。

 

19 使用约定俗成的简写

模块Module 简写

简写	全名
SL	Sales 销售
PU	Purchasing 采购
IC	Inventory 仓库
AR	Account Receivable 应收
AP	Account Payable 应付
GL	General Ledger 总帐
PR	Production 生产

名称Name 简写

简写	全名
Uom	Unit of Measure 单位
Ccy	Currency 货币
Amt	Amount  金额
Qty	Quantity 数量
Qty Per	Quantity Per 用量
Std Output	Standard Output 标准产量
ETA	Estimated Time of Arrival 预定到达时间
ETD	Estimated Time of Departure  预定出发时间
COD	Cash On Delivery 货到付款
SO	Sales Order 销售单
PO	Purchase Order 采购单

 

20  库存单据数量状态

Qty On Hand 在手量

Qty Available 可用量

Qty On Inspect 在验数量

Qty On Commited 提交数量

Qty Reserved 预留数量

以上每个字段都有标准和行业约定的含义，不可随意修改取数方法。