- 博客(14)
- 收藏
- 关注
RSS订阅
原创 本博客全部文章导航
好记性不如烂笔头 - - - 博客中的文章，主要来源于实践中的需求与总结，在此记录，欢迎交流与指正。灵感来自大神朋友anxpp的博客2018年6月10、正则 - - 字符串每4位后自动加空格（银行卡号显示效果）2018年5月9、C3 - - 如何用静态loading.png实现loading动画2018年4月8、H5 - -（封装）移动端原生长按事件7、H5 ...
2018-06-08 12:02:25
316
原创 H5 -- （功能）公众号微信支付的实现
1、需求：由于公司微信公众号新增充值业务，所以需要在公众号里h5页面里接入微信支付2、分析：其实微信支付开发文档写的很详细，只要按照步骤一步一步来，基本问题不大，但我还是遇到了形形色色大大小小的坑，在此记录，希望有相似需求的小伙伴有所收获~① 首先确认公众号支付的定义（截图来自微信商户平台）② 业务流程（图片来自微信商户平台）③ 要想完成这个功能，需要业务办理人员、后台api人员及前端...
2018-10-31 13:54:30
8006
6
原创 H5 -- （功能）App内嵌h5网页实现芝麻认证的接入
1、需求：由于高贵的IOS提审时不能出现支付宝相关字眼及相关SDK，所以我们app实名认证只有通过内嵌H5页面实现2、分析：通过调研 “芝麻认证”官方技术文档 ，接入芝麻认证的流程如下图（图片来自官方文档）： 要想完成这个功能，需要业务办理人员及后台3、过程4、参考文档：1、基于html2canvas实现网页保存为图片及图片清晰度优化 - - 小小云朵 2、html...
2018-10-09 15:55:18
8168
9
原创 H5 -- （功能）基于html2canvas实现长按网页保存为图片到本地
1、需求：长按页面中的一部分（里面有动态获取的用户昵称、头像及动态生成的二维码），弹出下载框，点击后将这部分保存为图片下载到手机里（如图）2、分析：由于有动态获取数据，需等DOM元素生成之后，再将这一部分的DOM转化为canvas，再将canvas转为image，然后再实现长按image下载到本地 - - 一路走来，踩了不少坑，希望有此相似需求的能有所收获吧。 3、过程第一...
2018-07-03 14:24:41
20187
16
原创 正则 -- 字符串每4位后自动加空格（银行卡号显示效果）
需求：输入框中输入银行卡号（或其他）时，每4位自动加空格（如下图）分析方法一：监控输入框的keyup事件，当value值的长度为4,8,12,16时，插入空格字符串“ ”（vue中代码片段如下）<input type="text" v-model="bankCard" @keyup="bankCardKeyup&qu
2018-06-04 17:33:47
6887
1
原创 C3 -- 如何用静态loading.png实现loading动画
需求：用静态loading图（下图一）实现loading动画（下图二） 分析1、方法一：最简单的方法是叫UI大大给一个gif图，或者自己动手利用ps帧动画制作一个gif图2、方法二：利用css3的animation属性实现 （animation语法）// html --> 页面上直接引入静态的png格式的loading图<img src="../...
2018-05-04 19:19:07
2339
原创 H5 --（封装）移动端原生长按事件
1、需求：封装移动端长按事件2、分析：JavaScript原生并不存在长按事件，所以我们需要通过touchstart 、touchmove 、touchend来模拟并封装一个长按事件3、上代码（函数名为：longpress，参数为：需长按元素的id、长按之后的逻辑函数 func）// 函数名longpress，参数为: 需长按元素的id、长按之后的逻辑函数funcfunc...
2018-04-27 17:13:01
6407
1
原创 H5 -- 自定义微信分享第三方页面链接的标题和小缩略图
需求：自定义微信分享第三方页面链接的标题和小缩略图（如图）1、标题(上图中红色框内文字)生成标准：自动获取当前页面的标题，即title里面的内容自定义方法：设置页面标题即可，可使用：document.title = “标题内容”，动态设置。2、小缩略图(上图中红色箭头所指图片)生成标准：自动获取当前页面body内最前面的一张尺寸大于300px × 300px...
2018-04-26 18:54:35
28774
11
原创 H5 --（解决）安卓的webview中line-height等于height不垂直居中问题
问题描述：用rem适配的H5页面在安卓的webview中，当line-height等于height时，有时会稍微偏上一些，不能垂直居中（ps：ios上没有这个问题）1、分析原因：由于用rem作适配，则根元素的字体大小可能不是整数，然后将元素的字体大小设置为rem为单位时，字体实际的大小若以px为单位则可能是奇数（更可能并不是整数）；且当字体大小小于12px时，安卓webview中的浏览器为了避...
2018-04-24 17:39:09
7663
3
原创 H5 --（解决）ios的webview中上/下拉露出黑灰色背景问题
问题描述：手机H5页面在ios的webview中，下拉（或上拉）会露出黑灰色背景解决思路1、touchmove 时阻止系统的默认滑动事件document.querySelector('body').addEventListener('touchmove', function(e) { e.preventDefault();})结论：这个方法在安卓上能好使，但在io...
2018-04-18 18:37:49
7743
2
转载 Vue --（vue-cli脚手架）webpack配置文件详细分析
1、脚手架版本vue-cli 2.8.12、配置文件 package.json 功能：在 package.json 中，可以找到开发和生产环境的入口"scripts": { "dev": "node build/dev-server.js", // 开发环境入口 "build": "node b
2018-04-16 14:41:25
2150
原创 H5 --（解决）安卓中input输入框获取焦点后，底部固定定位的按钮顶起问题
问题描述：手机H5页面当input输入框获取焦点时，软键盘会弹起，这时：IOS底部固定定位的按钮不会随着键盘弹起而弹起；而安卓底部固定定位的按钮会跟随软键盘弹起而顶起，往往会遮挡一部分视图，这对用户的体验有点不好，故本篇文章将利用js来解决这个问题，优化用户体验。1、解决思路当软键盘弹起时，将底部弹起的按钮隐藏；当软键盘收起时，将按钮正常显示。2、确定捕获的事件（1）i...
2018-04-10 19:30:08
10560
4
原创 H5 -- 微信h5页面中下载第三方app的方法
需求：在微信h5页面中下载第三方app —— 安卓， 直接下载apk文件包；iphone，跳转AppStore分析：微信不支持，在微信中屏蔽了apk文件的下载以及AppStore的跳转（且除非和TX有合作的应用，否则也不支持通过scheme跳转第三方app）变通方法：一、借助TX的应用市场 –‘应用宝’：将app上架应用宝，在微信中点击下载按钮(app的应用宝微下载地址)，安卓则可...
2018-04-08 19:11:12
9518
2
原创 H5 -- 取消a标签在点击时的背景颜色
1、取消a标签在移动端点击时的蓝色a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select: none;}2、使用图片作为a标签的点击按钮时，当触发touchs...
2018-04-03 15:58:12
13152
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人