• 等级
  • 25586 访问
  • 13 原创
  • 1 转发
  • 212971 排名
  • 18 评论
  • 1 获赞

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中代码片段如下) <input type="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图 <img src="../...

2018-05-04 19:19:07

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

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

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-cli 2.8.1 2、配置文件 package.json 功能:在 package.json 中,可以找到开发和生产环境的入口 "scripts": { "dev": "node build/dev-server.js", // 开发环境入口 "build": "node b

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
  • 中国 上海 徐汇区
奖章
  • 持之以恒