资讯专栏INFORMATION COLUMN

总结微信公众平台网页开发中遇到的ios的兼容问题

番茄西红柿 / 3665人阅读

摘要:解决方案使用微信的。先引入微信的,然后在中调用方法播放。配置信息即使不正确也能使用微信升级到版本以后,填写表单信息弹出键盘会把页面顶上去,键盘消失的时候页面不自动下来解决方案使用方法在表单失去焦点的时候让页面滚动到最顶部。

1. ios中音频不自动播放;

原因:出于节省流量的初衷,ios系统禁止音视频自动播放。

解决方案:使用微信的JS-SDK。

DEMO:

先引入微信的JS-SDK,

1 

然后在wx.ready中调用play方法播放。

 1 var audio = document.getElementById(bgmusic);
 2     autoPlayAudio();
 3     function autoPlayAudio() {
 4         wx.config({
 5             // 配置信息, 即使不正确也能使用 wx.ready
 6             debug: false,
 7             appId: ,
 8             timestamp: 1,
 9             nonceStr: ,
10             signature: ,
11             jsApiList: []
12         });
13         wx.ready(function() {
14             audio.play();
15         });
16     }

2. 微信升级到7.0版本以后,填写表单信息弹出键盘会把页面顶上去,键盘消失的时候页面不自动下来;

解决方案:使用onblur方法在表单失去焦点的时候让页面滚动到最顶部。

DEMO:

1 
2
onblur="window.scrollTo(0, 0);" id="idNumber">
3

3. 去除移动端点击时的背景;

1 *{
2     -webkit-tap-highlight-color: rgba(0,0,0,0);
3     -webkit-tap-highlight-color:transparent;
4 }

4. 去掉input框的默认样式;

1 input {
2     background-color: transparent;/*背景变透明*/
3     filter: alpha(opacity=0); /*androd*/
4     appearance: none;  /*去除系统默认appearance的样式,常用于IOS下移除原生样式(下拉框去掉右侧图标等)*/
5     -moz-appearance: none;
6     -webkit-appearance: none;
7 }

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1120.html

相关文章

  • 记录一次开发微信网页分享

    摘要:需求最近在做一个项目需求,分享领好书活动,获取用户的个人信息以及,并诱导用户分享给好友或朋友圈,达到裂变拉新的目的。 需求 最近在做一个项目需求,分享领好书活动,获取用户的个人信息以及unionID,并诱导用户分享给好友或朋友圈,达到裂变拉新的目的。在做的过程中遇到了一些坑的地方,所以回过来总结一下 技术方案 使用微信JS-SDK自定义分享到好友和分享到朋友圈 实现步骤 1、要实现微信...

    宋华 评论0 收藏0
  • 网页程序迁移至微信小程序web-view详解

    摘要:网页引入网页发起支付由后台返回,主要是需要统一下单平台的微信支付页面支付参数错误,请稍后重试支付成功支付失败支付错误分享功能小程序直接分享的所在的页面,如果需要加上页面参数,那我们就需要处理一下了。 小程序现在越来越流行,但是公司的很多项目都是用网页写的,小程序语法不兼容原生网页,使得旧有项目迁移至小程序代价很高; 小程序之前开放了webview功能,可以说是网页应用的一大福音了,但...

    junbaor 评论0 收藏0
  • 网页程序迁移至微信小程序web-view详解

    摘要:网页引入网页发起支付由后台返回,主要是需要统一下单平台的微信支付页面支付参数错误,请稍后重试支付成功支付失败支付错误分享功能小程序直接分享的所在的页面,如果需要加上页面参数,那我们就需要处理一下了。 小程序现在越来越流行,但是公司的很多项目都是用网页写的,小程序语法不兼容原生网页,使得旧有项目迁移至小程序代价很高; 小程序之前开放了webview功能,可以说是网页应用的一大福音了,但...

    AlphaGooo 评论0 收藏0
  • Python爬虫学习路线

    摘要:以下这些项目,你拿来学习学习练练手。当你每个步骤都能做到很优秀的时候,你应该考虑如何组合这四个步骤,使你的爬虫达到效率最高,也就是所谓的爬虫策略问题,爬虫策略学习不是一朝一夕的事情,建议多看看一些比较优秀的爬虫的设计方案,比如说。 (一)如何学习Python 学习Python大致可以分为以下几个阶段: 1.刚上手的时候肯定是先过一遍Python最基本的知识,比如说:变量、数据结构、语法...

    liaoyg8023 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<