前端移动端问题小结

移动端项目小结

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

1、微信分享

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: () => {
                        // 用户取消分享后执行的回调函数
                    }
                })
            })

2、移动端自动播放音乐

iOS 和部分 Android 限制了自动播放音频视频等，须要用户有点击的动做后才能够播放。这样的缘由在于不少用户流量须要付费，而限制了自动播放能够避免用户在不知情的状况下产生高额的流量费用。

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

3、移动端页面适配

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

网易移动端适配方案

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

二、经过给html的style设置font-size

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

三、设计稿px/100便可换算为rem

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

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

手淘移动端适配方案

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

二、引入flexible

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

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

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

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

4、音频格式

浏览器	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...