微信H5开发随笔

问题与解决办法

1.微信版本更新之后,第三方网站的网页,在微信中点击页面的图片元素会自动放大。

    解决办法:设置Img属性Css样式    img{pointer-events:none}

    设置该属性后,图片点击事件会全部失效,之后需要用到图片点击响应效果的,需要在原有img基础上,加上一个遮罩层用来实现点击效果

2.解决微信H5地图导航时,调用高德API,有很多自定义方面的东西需要修改:

    <1>如图

 红色处按钮处点击能出现导航界面,蓝色部分为自定义的按钮,

 那么我们先来看一下官方示例给到的代码

如图所示红色部分为绑定事件,蓝色部分为导航的关键方法

然后需要实现到,自定义的按钮去执行蓝色部分的主要方法

办法很简单,在button处添加onclick事件,然后对click事件进行绑定   

onclick="marker.markOnAMAP({name:'中南国际汇',position:marker.getPosition()})"

就能很简单的将高德调用地图的方法很轻易的转换到自己自定义的事件里面去

3.关于移动端字体的设置,如果直接写死单位为px,不同屏幕的终端显示差异会比较大,原因大家应该都清楚,像素作为单位,影响显示的就是终端屏幕的像素比,所以写死px适配效果会很差,那么我们再来看一下另一种方法,也就是用em作为单位去写字体大小,事实上em确实比较好用,各种终端的显示效果都比较一致,但是em有个缺点,那就是换算问题很大,1em=16px,这样换算下去工作量会比较大。然后推荐给大家一种解决办法:


/*实时改变html的fontSize值*/

(function (doc, win) {

var docEl = doc.documentElement,

            resizeEvt ='orientationchange' in window ?'orientationchange' :'resize',

            recalc =function () {

var clientWidth = docEl.clientWidth;

                if (!clientWidth)return;

                docEl.style.fontSize = (clientWidth /7.5) +'px';

            };

    if (!doc.addEventListener)return;

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

4.这是一个简单的问题,就不多做介绍,audio标签在微信端有时候会不自动播放,下面是解决办法:


//解决微信端audio不自动播放

document.addEventListener("WeixinJSBridgeReady", function () {

document.getElementById('music').play();

}, false);

//音乐播放暂停

    function changeAudio(){

        var audio = document.getElementById('music');

        if(audio.paused){

            audio.play();//audio.play();// 播放

            $(".audio").addClass('rotate')

        }

        else{

            audio.pause();// 暂停

            $(".audio").removeClass('rotate')

        }

    }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,844评论 1 92
  • 1.ios高性能编程 (1).内层 最小的内层平均值和峰值(2).耗电量 高效的算法和数据结构(3).初始化时...
    欧辰_OSR阅读 29,712评论 8 265
  • 相关知识点 移动端、 适配(兼容)、 ios点击事件300ms延迟、 点击穿透、 定位失效...... 问题&解决...
    sandisen阅读 25,622评论 3 67
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,350评论 0 11
  • 五一假期第一天 今天是五一假期的第一天,哎!课外班数学、语文两节课,一天过去了,这是放假吗?//(ㄒoㄒ)/...
    六月的雪_8149阅读 407评论 0 0