前端移动端问题小结

移动端项目小结

1. 调用微信的接口分享给好友，分享到朋友圈
2. 移动端微信中对于 autoplay 无效时，自动播放MP3音频，
3. 移动端页面适配
4. audio 在不同的浏览器内核有不同的支持情况

一、微信分享

1. 首先引入微信的脚本库

   <script type="text/JavaScript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js">    </script>
   
   

2. 分享到朋友圈，分享给好友

            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: '', // 必填，公众号的唯一标识
                timestamp: '', // 必填，生成签名的时间戳
                nonceStr: '', // 必填，生成签名的随机串
                signature: '', // 必填，签名
                jsApiList: '' // 必填，需要使用的JS接口列表
            })
        
            wx.ready(() => {
                // 分享到朋友圈
                wx.onMenuShareTimeline({
                    title: 'XXX', // 分享标题
                    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '', // 分享图标,
                    success: () => {
                        // 分享成功的回调
                    }
                })
                // 分享给好友
                wx.onMenuShareAppMessage({
                    title: '', // 分享标题
                    desc: '', // 分享描述
                    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '', // 分享图标
                    success: () => {
                        // 分享成功的回调
                    },
                    cancel: () => {
                        // 用户取消分享后执行的回调函数
                    }
                })
            })

二、移动端自动播放音乐

iOS 和部分 Android 限制了自动播放音频视频等，需要用户有点击的动作后才可以播放。这样的原因在于很多用户流量需要付费，而限制了自动播放可以避免用户在不知情的情况下产生高额的流量费用。

    var audio = document.getElementById('music');
    document.addEventListener("WeixinJSBridgeReady", () => {
       audio.play();
    }, false);
    

三、移动端页面适配

移动端适配原理大同小异，大部分是通过控制根元素的font-size值实现设备宽度的适配（通常是宽度）

网易移动端适配方案

1、拿到设计稿除以100，得到宽度rem值

2、通过给html的style设置font-size

 document.getElementsByTagName('html')[0].style.fontSize = Math.min(document.getElementsByTagName('html')[0].clientWidth, 750) / 750 * 100 + 'px';

3、设计稿px/100即可换算为rem

优：通过动态根font-size来做适配，基本无兼容性问题，适配较为精准，换算简便。

劣：无viewport缩放，且针对iPhone的Retina屏没有做适配，导致对一些手机的适配不是很到位。

手淘移动端适配方案

1、拿到设计稿除以10，得到font-size基准值

2、引入flexible

3、不要设置meta的viewport缩放值

4、设计稿px/ font-size基准值，即可换算为rem

优：通过动态根font-size、viewpor、dpr来做适配，无兼容性问题，适配精准。

劣：需要根据设计稿进行基准值换算，在不使用sublime text编辑器插件开发时，单位计算复杂。

四、音频格式

浏览器	MP3	WAV	OGG
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	YES	YES	YES

参考文献

https://www.cnblogs.com/liang...
https://github.com/chesscai/f...
http://www.w3cplus.com/mobile...