H5编写指南

常见问题汇总：

移动端点击事件按钮变色

• 具体表现：安卓端点击变蓝色，ios端点击留黑色框
• 解决方案：在所有的a标签上添加属性

-webkit-tap-highlight-color: transparent;

安卓端输入框点击被软键盘遮盖

• 具体表现：安卓设备在点击输入框时，软键盘可能会遮挡住输入框的位置，ios设备会将页面自动抬起
• 解决方案：给安卓设备被遮挡的输入框一个scrollIntoView方法，该方法对应的目标元素会在页面上总能显示出来。

   $("input").on('click', function () {
        var tar = this;
        setTimeout(function () {
            target.scrollIntoView(true)
        }, 100)
    //给一个定时器会显得上浮过程不太突兀
    })

注意：设置该属性的时候不能限制住移动的范围，例如overflower:hidden这种参数，会使该方法没作用。

页面间值无法传递

• 具体表现：页面间有简单的参数传递在不使用框架的情况下都需要后台配合或者通过存取cooike的方式进行
• 解决方案：可以给window.name赋一个值用来简单的页面间参数传递

微信分享配置参数错误

• 具体表现：打开调试模式后报错config:invalid signature
• 解决方案：
  正确的配置方法：
• 首先引入js

<script src='http://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script>

• 配置参数

  wx.config({
                debug: false,
                appId: "填入appid",
                timestamp: 设置为动态参数,
                nonceStr: 设置为动态参数,
                signature: 设置为动态参数,
                jsApiList: ['onMenuShareTimeline',
                    'onMenuShareAppMessage'
                ] // 页面中使用的功能列表都要放在这里面
            });

            wx.ready(function () {
                // 当参数配置正确之后会自动执行ready里面的方法
                // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
                wx.onMenuShareTimeline({
                    title: "输入你的分享标题",
                    link: "此处要输入点击跳转的地址",
                    imgUrl: "分享图标的地址", 
                    success: function (res) {
                                 //成功的回调
                    }
                });

                // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
                wx.onMenuShareAppMessage({
                   title: "输入你的分享标题",
                    link: "此处要输入点击跳转的地址",
                    imgUrl: "分享图标的地址", 
                    desc: "分享描述",
                    type: 'link', // 分享类型,music、video或link，不填默认为link
                    success: function (res) {
                                     //成功的回调
                    }
                });
            });
            wx.error(function (res) {
                console.info(res);
            });
        },

注意：一般配置的参数不会写死，都是ajax从后台拿来的值且
参与签名的URL地址要注意，需要动态获取当前页面完整的URL地址（包括?后面的参数，但不能包含#号），如若URL地址为：http://www.xxx.xxx/payment/wxpay/jspay?oid=xxxx&attr=xxxx#wechat，那么完整的URL地址应该是截取#号之前的部份。为什么会出现#号呢？因为你的URL在被分享到朋友圈等微信系统自动会添加一些参数。

H5播放音乐

播放音乐的函数

 setmusic:function () {
        //    音乐播放
        var flag = 1;
        var rallback = document.getElementById('rock');
        var music = document.getElementById('audio');
        $('#rock').on('click',function () {
            if( flag==1 ){
                music.pause();  /*音乐关闭*/
                flag = 0;
                rallback.style.webkitAnimationPlayState = "paused";  //旋转动画暂停
            }else{
                music.play();   /*音乐开启*/
                flag = 1;
                rallback.style.webkitAnimationPlayState = "running";  //旋转动画暂停
            }
        })
    }
//旋转动画
/*音乐播放器*/
#rock{
    position: fixed;
    top:0.2rem;
    right: 0.2rem;
    width:0.6rem;
    height: 0.6rem;
    /*css3动画无限制的旋转*/
    -webkit-animation: music_disc 4s linear infinite;
    animation: music_disc 4s linear infinite;
    /*-webkit-animation-direction:alternate;*/   /*//平滑的过渡---反方向运动*/
}

/*css3动画的旋转*/
@-webkit-keyframes music_disc {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}