• 等级
  • 50673 访问
  • 13 原创
  • 1 转发
  • 112993 排名
  • 28 评论
  • 3 获赞

H5 -- (功能)公众号微信支付的实现

1、需求:由于公司微信公众号新增充值业务,所以需要在公众号里h5页面里接入微信支付2、分析:其实微信支付开发文档写的很详细,只要按照步骤一步一步来,基本问题不大,但我还是遇到了形形色色大大小小的坑,在此记录,希望有相似需求的小伙伴有所收获~①首先确认公众号支付的定义(截图来自微信商户平台)②业务流程(图片来自微信商户平台)③要想完成这个功能,需要业务办理人员、后台api人员及前端...

2018-10-31 13:54:30

H5 -- (功能)App内嵌h5网页实现芝麻认证的接入

1、需求:由于高贵的IOS提审时不能出现支付宝相关字眼及相关SDK,所以我们app实名认证只有通过内嵌H5页面实现2、分析:通过调研“芝麻认证”官方技术文档,接入芝麻认证的流程如下图(图片来自官方文档):要想完成这个功能,需要业务办理人员及后台3、过程4、参考文档:1、基于html2canvas实现网页保存为图片及图片清晰度优化--小小云朵2、html...

2018-10-09 15:55:18

H5 -- (功能)基于html2canvas实现长按网页保存为图片到本地

1、需求:长按页面中的一部分(里面有动态获取的用户昵称、头像及动态生成的二维码),弹出下载框,点击后将这部分保存为图片下载到手机里(如图)2、分析:由于有动态获取数据,需等DOM元素生成之后,再将这一部分的DOM转化为canvas,再将canvas转为image,然后再实现长按image下载到本地--一路走来,踩了不少坑,希望有此相似需求的能有所收获吧。3、过程第一...

2018-07-03 14:24:41

本博客全部文章导航

好记性不如烂笔头---博客中的文章,主要来源于实践中的需求与总结,在此记录,欢迎交流与指正。灵感来自大神朋友anxpp的博客2018年6月10、正则--字符串每4位后自动加空格(银行卡号显示效果)2018年5月9、C3--如何用静态loading.png实现loading动画2018年4月8、H5--(封装)移动端原生长按事件7、H5...

2018-06-08 12:02:25

正则 -- 字符串每4位后自动加空格(银行卡号显示效果)

需求:输入框中输入银行卡号(或其他)时,每4位自动加空格(如下图)分析方法一:监控输入框的keyup事件,当value值的长度为4,8,12,16时,插入空格字符串“”(vue中代码片段如下)<inputtype="text"v-model="bankCard"@keyup="bankCardKeyup&qu

2018-06-04 17:33:47

C3 -- 如何用静态loading.png实现loading动画

需求:用静态loading图(下图一)实现loading动画(下图二)分析1、方法一:最简单的方法是叫UI大大给一个gif图,或者自己动手利用ps帧动画制作一个gif图2、方法二:利用css3的animation属性实现(animation语法)//html-->页面上直接引入静态的png格式的loading图<imgsrc="../...

2018-05-04 19:19:07

H5 --(封装)移动端原生长按事件

1、需求:封装移动端长按事件2、分析:JavaScript原生并不存在长按事件,所以我们需要通过touchstart、touchmove、touchend来模拟并封装一个长按事件3、上代码(函数名为:longpress,参数为:需长按元素的id、长按之后的逻辑函数func)//函数名longpress,参数为:需长按元素的id、长按之后的逻辑函数funcfunc...

2018-04-27 17:13:01

H5 -- 自定义微信分享第三方页面链接的标题和小缩略图

需求:自定义微信分享第三方页面链接的标题和小缩略图(如图)1、标题(上图中红色框内文字)生成标准:自动获取当前页面的标题,即title里面的内容自定义方法:设置页面标题即可,可使用:document.title=“标题内容”,动态设置。2、小缩略图(上图中红色箭头所指图片)生成标准:自动获取当前页面body内最前面的一张尺寸大于300px×300px...

2018-04-26 18:54:35

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

H5 --(解决)ios的webview中上/下拉露出黑灰色背景问题

问题描述:手机H5页面在ios的webview中,下拉(或上拉)会露出黑灰色背景解决思路1、touchmove时阻止系统的默认滑动事件document.querySelector('body').addEventListener('touchmove',function(e){e.preventDefault();})结论:这个方法在安卓上能好使,但在io...

2018-04-18 18:37:49

Vue --(vue-cli脚手架)webpack配置文件详细分析

1、脚手架版本vue-cli2.8.12、配置文件package.json功能:在package.json中,可以找到开发和生产环境的入口"scripts":{"dev":"nodebuild/dev-server.js",//开发环境入口"build":"nodeb

2018-04-16 14:41:25

H5 --(解决)安卓中input输入框获取焦点后,底部固定定位的按钮顶起问题

问题描述:手机H5页面当input输入框获取焦点时,软键盘会弹起,这时:IOS底部固定定位的按钮不会随着键盘弹起而弹起;而安卓底部固定定位的按钮会跟随软键盘弹起而顶起,往往会遮挡一部分视图,这对用户的体验有点不好,故本篇文章将利用js来解决这个问题,优化用户体验。1、解决思路当软键盘弹起时,将底部弹起的按钮隐藏;当软键盘收起时,将按钮正常显示。2、确定捕获的事件(1)i...

2018-04-10 19:30:08

H5 -- 微信h5页面中下载第三方app的方法

需求:在微信h5页面中下载第三方app——安卓,直接下载apk文件包;iphone,跳转AppStore分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不支持通过scheme跳转第三方app)变通方法:一、借助TX的应用市场–‘应用宝’:将app上架应用宝,在微信中点击下载按钮(app的应用宝微下载地址),安卓则可...

2018-04-08 19:11:12

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

蜗牛羽

路漫漫其修远兮,吾将上下而求索!收拾脚步,以祭未来~
关注
  • 计算机软件/web前端&H5
  • 中国 上海 徐汇区
奖章
  • 持之以恒