微信H5开发中常见的坑

article/2025/8/20 6:53:45

 

坑点1:android、ios做分享时,若是hash路由模式下,无法加载正常url,发现分享的链接变成(https://xxx.com/?from=grounmessage&installed=0#/register?code=1111&locale=zh_cn之类的)。

解决方法:在/#/里加query值

例如:

image.png

 

坑点2:ios分享朋友圈方法(onMenuShareTimeline)时不会执行成功回调。

解决方法:成功回调加上延迟(500ms即可)

例如:

image.png

坑点3:ios键盘唤起后页面input不能再次输入(input输入错位)。

出现原因:固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入。

解决方法: 在失去焦点的时候给一个事件,使页面滚动条高度和当前一致。

例如:

getTop() {  setTimeout(() => {    var scrollHeight =     document.documentElement.scrollTop     || document.body.scrollTop || 0;    window.scrollTo(0, Math.max(scrollHeight, 0));  }, 100); }

 

坑点4:安卓微信H5弹出软键盘后挡住input输入框。

 

解决办法:给input和textarea标签添加focus事件,如下,先判断是不是安卓手机下的操作,当然,可以不用判断机型,Document 对象属性和方法,setTimeout延时0.5秒,因为调用安卓键盘有一点迟钝,导致如果不延时处理的话,滚动就失效了。

changefocus(){  let u = navigator.userAgent,   app = navigator.appVersion;  let isAndroid = u.indexOf('Android') > -1   || u.indexOf('Linux') > -1;  if(isAndroid){    setTimeout(function() {      document.activeElement.      scrollIntoViewIfNeeded();      document.activeElement.scrollIntoView();    }, 500);         }},

 

坑点5:微信jssdk中微信支付wx.chooseWXPay的支付签名时间戳。

    微信jssdk中的所有使用timestamp字段均为小写。

但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符。

 

坑点6:IOS不支持new Date("2019-01-01 00:00:00") 这种格式。

var date =new Date("2020-02-10 00:00:00");
这种写法在pc和android都能正常使用,但是ios只支持var date =new Date("2020/02/10")这种写法。调试发现 2020/02/10 等同 2010-02-10 00:00:00 ,也就是说ios默认就是从0开始计算的,我们不需要设置后面的时分秒为 00:00:00。

 

坑点7:vue单页应用微信分享一直提示签名错误invalid signature。根据官方文档说是需要当前页面出去‘#hash’部分的链接,并且需要encodeURIComponent,可是安卓正常了,ios还是报错。

出现原因:页面进入的时候记录url,如果是iOS设备那么使用这个url获取微信签名。

解决方法:页面进入的时候记录url,如果是iOS设备那么使用这个url获取微信签名。

 

router.afterEach(to => {sessionStorage.setItem('currentUrl',window.location.href)
})
let url = encodeURIComponent(location.href.split('#')[0])if(system == "iOS" && sessionStorage.getItem('currentUrl')) {url = encodeURIComponent(sessionStorage.getItem('currentUrl').split('#')[0])
}

 

 

 

更多前端技能请关注公众号”极致简文“

 

 

 

 

 

 

 


http://chatgpt.dhexx.cn/article/sXxK8iGM.shtml

相关文章

【微信H5开发】the permission value is offline verifying

一、配置了完整的config后为什么还是显示the permission value is offline verifying呢,安卓没问题而iphone手机会出现问题? iphone手机获取路径是你进入该网站第一个页面开始算(包括刷新页面) 所以,我们需要对url进行…

微信H5开发之页面布局

随着微信用户数量超过 10 亿,作为 web 开发者,微信很多时候已经成为了我们 web 页面的载体,我们制作的页面几乎都会在微信上面展示和传播。于是,在开发过程中,如何去兼容微信,就成为了一个 web 开发者必须面…

uniapp开发h5微信授权登录(详细教程)

uniapp开发h5微信授权登录 文章目录 uniapp开发h5微信授权登录前言一、前期准备--申请测试账号二、正式开发--前端代码三、打包发布总结 前言 我也是第一次做h5授权微信登录,网上找了很久,基本差不多做法,但是不太适用于我的流程。 公众号官…

利用H5开发微信公众号

利用H5开发微信公众号 一、 首先授权配置 公众号设置 --》功能设置设置业务域名!123 这里的MP_verify_w7tdZrafqhkK9Mcj.txt文件,需要放到你项目的根目录下,例子:你的项目war包叫 test.war ,里面包含了src,WEB-INFO两个文件夹,则…

微信H5开发 总结一

文档: 概述 | 微信开放文档 注意事项: 微信JSSDK 概述 | 微信开放文档 微信jssdk就是相对于小程序提供的api一样 小程序也是基于这个jssdk来开发的而已, jssdk 就是 jsbridge,在原生端暴露接口,js调原生端接口&am…

微信H5开发wx.config授权invalid signature

微信H5(公众号)开发过程中,遇到了wx.config失败的情况,造成的原因在此记录一下,也为各位提个醒。 打开wx.config的debug选项,会在配置后弹框提示配置结果,如果提示errMsg:config ok…

uniapp开发微信小程序/h5完整流程,含vant/uview(h5适配vw)

theme: smartblue highlight: dark 创建项目 创建后的项目 此处插入一个坑 亦可以使用uniapp vue-cli 创建项目 vue create -p dcloudio/uni-preset-vue my-project 使用vue3/vite 创建项目(如命令行创建失败,请直接访问 gitee 下载模板&#xff0…

微信H5页面前端开发,大多数人都会遇到的几个兼容性坑

最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了。 1、ios端兼容input光标高度 问题详情描述:input输入框光标,…

企业微信h5开发(即JS-SDK),一不小心,就会掉进坑,进入死胡同

最近在开发企业微信的业务,可以借此机会学习到企业微信的开发,这让我非常开心、激动。殊不知,企业微信的开发让我很头疼,遇到了非常多的坑。在这里我记录一下,希望大家不要像我一样掉进坑里面。 一、wx.agentConfig方法…

微信H5页面前端开发,大多数人都会遇到的几个兼容性坑(转载)

1、ios端兼容input光标高度 问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样。例如下图,左图是正常所期待的输入框光标,右边是io…

微信H5开发(二)

这篇主要讲解微信H5 常用到的微信模块和微信文件的引入及微信公众号、微信商务平台、微信开放平台的相关配置。 第一次使用微信开发文档的时候,感觉文档里面写的内容不算太难,但在实际开发中会碰到很多预想不到的问题。 微信开放平台、微信商务平台 有…

H5微信网页开发总结(授权,分享,地图)

H5微信网页开发总结(网页授权,JS-SDK分享、地图) 目录: 网页授权分享地图 参考文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html 一:网页授权 目的&#xff1…

微信H5开发(一)

H5开发,一般是指移动端的页面开发。移动端可分为app和普通浏览页面。从嵌入的环境来归类:可以分为app、微信H5及手机浏览器里面打开的页面。 以前粗略的涉略过h5开发的一些知识,感觉H5并不是很难。在这半年内,接手并完成了两个微…

app推广渠道数据统计Xintall

APP推广时需要统计不同渠道带来的用户量,这个怎么做到 我们在做一款app推广的时后,经常会遇到一个问题,比如你花了一大笔预算去给自家开发的App做广告推广,却无法得知不同的广告素材、不同的广告位、不同的推广平台,各…

还在为推广发愁?这里有一份活动推广渠道清单请查收

对于运营来说,用户量和收入是两个最关键的指标。我们希望更多的用户留在我们的产品中,新用户的留存更高,老用户也拥有较高的活跃度,用户量起来了,收入的提升也变的容易了许多。而用户分为新用户和老用户,本文列举了针对老用户推广渠道,以游戏行业为例,其他行业可以触类…

浅谈游戏系统

浅谈游戏系统 某日,Brandon突发奇想(脑子抽了)买了《异度之刃2》开始游玩,虽然画质不如原神,但他还是沉下心来连续游玩了10个小时。”这游戏战斗系统怎么样?“ 舍友随口一问瞬间让Brandon摸不着头脑&#x…

App全渠道推广统计方案

做过 App 运营岗位,肯定提过类似的需求: 自然新增渠道:自然新增的用户,想知道他们都是从哪下载了 App,以为初步分析下载原因,好在后续提供个性化推荐等服务。H5 推广渠道:开展活动需要分发大量…

浅析APP应用内及新媒体类推广渠道

之前我写了一篇关于APP用户数据分析的文章,提到过用户来源的问题。APP的下载注册用户来自线上线下各种渠道,可能是在某个常逛的网站上看到APP投放的广告产生了兴趣;也有可能是在朋友圈看到了朋友转的APP活动链接从而被吸引…… 这些都是通过…

app推广渠道数据统计

APP推广时需要统计不同渠道带来的用户量,这个怎么做到 我们在做一款app推广的时后,经常会遇到一个问题,比如你花了一大笔预算去给自家开发的App做广告推广,却无法得知不同的广告素材、不同的广告位、不同的推广平台,各…

抖音最常见的付费与免费推广渠道有哪些?3+6推广技巧干货!丨国仁网络

直播作为全新的互动传播方式,带来了互联网全新盛会的同时,也开启了企业新兴传播媒介——直播营销。直播营销为企业带来更全面的潜在客户,帮助企业更好营销。 然而,在互联网营销中,任何营销方式和工具模式,都需要推广,否则直播内容再好、主播再有颜值优势,其营销效果也会…