程序员的博客

正则表达式教程笔记。

背景图文H5开发最后一步要把SVG代码嵌入到微信公众号正文里，这里分享一下方法。步骤第一步，上传图片素材需要把代码中用到的图片素材上传至微信后台，并获取线上地址。进入微信公众平台，点击左边的 创作管理/多媒体素材/上传。上传成功后，打开图片，获取图片的线上地址。第二步，导入微信文章正文新建图文消息，先输入好标题、作者，上传好封面图。 然后在正文区域输入两行文字（微信要求正文必须含有文字）。打开chrome调试工具，定位到第二行文字：在第二行文字代码处.

背景 近期学习threejs项目，由于依赖 加载器、渲染器、后期处理等js库文件，所以考虑用webpack打包前端项目。分析 项目文件均为静态文件，包括html、css、js、img、json（3D模型文件）。其中，img和json直接拷贝，css和js进行合并压缩处理。 这里使用vscode IDE编写代码，对于webpack主要有2个便捷，一是方便定位项...

背景        5月23日微信更新6.6.7版本，新加的文章缩小浮窗功能确实很赞。不过，有一处更新颇使H5开发者感到困扰，就是在iPhone上H5页面最底部多了一个白色的前进后退控制栏，即下图底部的那个白条，        分析        在微信里只要发生页面跳转，这个控制浏览器前进后退的白色条就会出现。        如果进入H5首页每次都要微信授权来获取用户信息，那这个白条将每次都会出...

背景        前段时间接触一个人脸融合类的H5，根据已有项目经验，直接选择腾讯AI的人脸融合API，接着等待3个工作日的模版审核期。不巧的是，由于面部遮挡审核被驳回（下图）。        如果再次提交审核，那根据上线时间是完全来不急的，故需要寻找无需模版审核的替代方案。解决方法        经过查询，提供人脸识别服务的Face++旷视，有人脸融合的开放API。              ...

背景        遇到数据高并发的项目，如双屏互动，用户交互时会高频对数据库进行读写操作。如果访问量较大，会对服务器和数据库造成很大的压力，甚至会出现Down机的情况。        代码环境为Apache+PHP+MySQL的服务器，Apache和MySQL本身就有最大访问量的限制，虽然可以手动修改这个限制，但如果服务器配置不行，仍然会出现不稳定的情况。        所以，采取更稳定的方案，...

背景        H5投放朋友圈广告需要给腾讯提供压测报告，要求是“压一跳页面所在的服务器并发400，90%响应时间小于200ms，QPS大于1500”。工具一：ApacheBench        压测工具：压力工具选择使用Apache的ApacheBench；        压测命令：ab -n 10000 -c 400 dest_url        工具二：腾讯的压测大师wetest  ...

背景H5项目需求，用户上传半身照，程序抠出人像，跟指定背景融合成一张海报。 解决方法目前市面上只查到face++有这种 抠图接口。调用URL：https://api-cn.faceplusplus.com/humanbodypp/v2/segment调用方法：POST请求参数：是否必选 参数名 类型 参数说明 ... ... ...

背景 有个项目需求用到手写识别功能，即H5识别用户手写的文字内容。参考案例为“2018政府工作报告关键字”，扫描下面二维码体验，分析 重点为找到合适的文字识别接口，通过查询，市面上已有腾讯AI、百度AI、科大讯飞的文字识别接口，通过测试结果均不理想，这些接口的实现原理都是识别图片上的文字内容转换为文本。 后经分析参考案例，其使用的为汉王云AP...

背景        上篇分享了微信分享接口的文章，本篇分享微信授权接口的源码及使用说明。        接口开发语言是PHP，是通过两次跳转实现的。前端跳转到服务器接口获取用户信息，并通过追加用户信息（如：openid、昵称、头像等）地址参数跳回前端页面。实现方法        根据文档说明，网页授权流程分为四步。这里主要说下其中的三步，        第一步：用户同意授权，获取code。    ...

背景        这次想开发一个双屏互动的案例，考虑到数据实时性及ajax轮询对服务器的压力，尝试用websocket来实现。        自行搭建websocket服务，时间成本和技术成本较高，故寻找第三方服务。经检索，发现goeasy、LeanCloud、野狗云，三家“实时通信引擎”服务商，分析文档考虑价格、便捷性，决定用野狗。项目分析        “我和女神的故事”H5的玩法逻辑是： ...

base.css，作用是重设浏览器默认样式和提供通用原子类。@charset "utf-8";/*! * @名称：base.css * @功能：1、重设浏览器默认样式 * 2、设置通用原子类 *//* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */html { background:white; color:black;}/*

应用场景开发手机端Html5时，需要事件统计，如统计每个页面的PV（Page View 访问量）、UV（Unique Visitor 独立访客），某个按钮的点击次数，微信分享次数等。分析以上这些统计可以通过存储变量实现（如记录到数据库），但是比较繁琐并且无法准确的统计UV。考虑使用专业的统计工具，CNZZ、百度统计等。

公用文件协作开发过程中，会引入默认的base.css（里面包括了css reset、常用的css间距，css字体，css大小等，详细参见base.css）。书写风格规范1. 每一条规则的大括号 { 前加空格；2. 多个selector共用一个样式集，则多个selector以逗号+空格隔开；3. 每行写一个属性；4. 属性名冒号之前不加空格，冒号之后加空格；5

背景：在做一个微信Web项目开发过程中，遇到iPhone（主要iPhone4/4S）兼容性问题，记录如下。问题：1. 页面在iPhone下出现左右滑动的问题；2. 顶部标题在iPhone4/4S下宽度不能100%；3. iPhone4/4S下在input弹出输入法时，不支持position:fixed的问题（即 本来固定在顶部的菜单下移）；分析：view

应用场景      图片生成类H5，经常遇到在生成后的图片上放二维码，用于好友长按识别并跳转到H5链接的需求。有时网址较长或者二维码尺寸较小，会导致有些手机无法识别到二维码。解决方法      通过运用URL短网址服务，将网址缩短再生成二维码。      例如：http://html5.rockstudio.cn/iqiyi/HuckleberryFriend/index.

背景        需求为“一笔连接五点，画出星座图腾”，即手指画线穿过5个点，画出12种不同图形，播放对应的12星座动画。分析        主要技术点有两个：一是五点连线与12星座的对应关系，二是五点连线的技术实现。实现方法       第一个技术点，五点连线的情况分析。       把5个点命名：点1、点2、点3、点4、点5，因为最终是1条线，对5点的先后顺序没有要求，这里假设起始点为点1，...

背景        H5开发中几乎所有项目都要用到自定义分享，见过的分享接口有php引入和ajax调用两种，使用不方便且对代码环境有要求。故共享一版可通过javascript文件引入方式来实现自定义分享的接口（这是15年底做的接口，一直在使用，如果有更简单便捷的方法欢迎交流）。        使用这个接口，不管你是php开发的项目还是纯前端的html项目，不管是把代码放服务器还是放到OSS CDN...

背景        H5中会遇到生成二维码的功能需求，如网页名片、双屏互动等场景。实现方法        主要用到一个生成二维码图片的插件QRCode.js（插件下载及文档说明在底部参考链接）。说两种使用环境，第一种是在网页中直接使用，第二种是在Cocos中使用。        第一种，在网页中直接使用方法很简单，添加Dom结构，引入javascript库文件，然后设置调用参数即可，// 设置参数...

背景       H5开发中使用ajax调用数据接口， 如果接口文件不在同域名下会提示跨域错误（No 'Access-Control-Allow-Origin' header is present on the requested resource.）。解决方法        通过设置php接口文件的 Access-Control-Allow-Origin 头信息来实现跨域访问。        1...

文件规范1. tpl, css, js, image文件均归档至约定的目录中；2. tpl文件命名：英文命名, 后缀.html，请重命名与php文件同名，以方便后端添加功能时查找对应页面；3. css文件命名：英文命名, 后缀.css，由小写字母、数字及下划线组成，公用common.css，其他页面依实际模块需求命名；4. js文件命名  ： 英文命名, 后缀.js，由小写字母、数