移动端知识点

本文主要讲述刚接触移动端的开发人员可能遇到的一些坑。

移动端的Click事件

click事件，对于移动端的兼容性不是很好，有的设备上可能会失效问题。

有时候在由于一些原因，需要在 li 标签上添加点击事件，这时候使用click点击事件就可能会失灵。即点击非 a 链接或 button 按钮的时候，click事件不起作用。

click事件触发机制为：touchstart -> touchend -> click

解决方法：

touchend

使用touchend代替click(不推荐)

  $(document).on('touchend','#btn',function(){
    //add event code...
  })

touchend事件不推荐使用，因为：touchend事件在页面滚动时有个问题。在滚动完成后，如果当前触点的位置所指的元素绑定了touchend事件，这时便会触发该元素的touchend事件，造成误操作。

tap

使用tap代替click(常用，推荐)

这里有一个需要注意的地方，就是js的原生事件中是没有tap事件的，需要用jq框架或mui等框架封装的tap事件。

  $(document).on('tap','#btn',function(){
    //add event code...
  })

css

给需要点击的标签添加CSS属性。

比如需要点击ul列表中的每个li项，可以给 li 添加 css 属性,使其支持click点击事件

  ul > li {cursor:pointer;}

这个方法我这边使用目前没出现什么问题，不清楚具体的浏览器内核解析过程。

移动端适配rem

移动端的适配一直以来，对开发人员就是一个比较难以解决的问题，我也只是把我接触过的适配方法写下来：

首先就是每个页面必须的声明部分

​``` bash

​``` ### 简单适配

适配代码需要放在css文件引入之前运行。css单位使用rem.

​bash window.onload = function(){ /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是 为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/ getRem(720,100) }; window.onresize = function(){ getRem(720,100) }; function getRem(pwidth,prem){ var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.style.fontSize = oWidth/pwidth*prem + "px"; } ​

小米官网写法

​bash !function(n){ var e=n.document, //获取document t=e.documentElement, //获取根节点html i=720, //初始值720px d=i/100, //假设100px为1rem，那么720px为7.2rem o="orientationchange"in n?"orientationchange":"resize", //判断是否有改变横屏事件，没有的话用resize事件 a=function(){ var n=t.clientWidth||320; //获取手机屏幕宽度 n > 720 && (n=720), //手机屏幕宽度大于720px默认设置为720px，即最大宽度为720px t.style.fontSize=n/d+"px" //设置根元素的字体大小为手机屏幕宽度/7.2,为上面自己定义的，当然你可以定义成别的，8.2，9.4都行 }; e.addEventListener && (n.addEventListener(o,a,!1), //判断是否有addeventlistener方法，如果有，就绑定上面判断的o事件 e.addEventListener("DOMContentLoaded",a,!1)) //绑定DOMContentLoaded事件 }(window); ​

微信分享的缩略图和简介

官方文档链接 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

声明shareWx方法

​``` bash
function shareWx(url,img,title,desc,callBack){
$.ajax({
url: ‘**‘, //获取微信公众平台的各种参数接口
type: “POST”,
data: {
url: window.location.href,
appid: “****” //微信公众号的appid
},
dataType: “json”,
success: function (data) {
if (data.nonceStr != null && data.nonceStr != “”) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appId, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature,// 必填，签名，见附录1
jsApiList: [‘onMenuShareTimeline’, ‘onMenuShareAppMessage’, ‘hideAllNonBaseMenuItem’, ‘showMenuItems’,’addCard’] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
//分享链接的缩略图
var imgUrl = img;
//分享链接的链接地址
var lineLink = url;
//分享链接的描述信息
var descContent = desc;
//分享链接的标题
var shareTitle = title;
//一般为空就可以
var appid = ‘’;
//分享给好友
wx.ready(function () {
wx.onMenuShareTimeline({
title: shareTitle, // 分享标题
link: lineLink, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
if(typeof callBack == “function”){
callBack();
}
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareAppMessage({
title: shareTitle, // 分享标题
desc: descContent, // 分享描述
link: lineLink, // 分享链接
imgUrl: imgUrl, // 分享图标
type: ‘’, // 分享类型,music、video或link，不填默认为link
dataUrl: ‘’, // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
if(typeof callBack == “function”){
callBack();
}
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.hideAllNonBaseMenuItem();
wx.showMenuItems({
menuList: [‘menuItem:share:appMessage’,’menuItem:share:timeline’] // 要显示的菜单项，所有menu项见附录3
});
});

    wx.error(function (res) {
      //alert("验证不通过");
      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    });
  }
}

});
}
​```

调用分享的方法，调用前需要在页面先引入微信官方提供的js

​``` bash
// 页面引入

//页面引入js文件

// 调用方法
var url = “*”; //分享链接的URL
var img = “test.jpg”; //分享的缩略图
var title = “*“; //分享链接的标题
var content = “****”; //分享链接的描述信息
shareWx(url, img, title, content); //调用方法
​```

附录1：JS-SDK使用权限签名算法
附录2：所有JS接口列表
附录3：所有菜单项列表

video视频播放问题

有的视频，使用video标签播放的时候，Android端可以播放，但IOS端有时候不能播放视频。

可以转换为 .mp4 格式。

不过有时候 .mp4 格式可能也会无法播放，这是因为 mp4 格式中，视频编码方式也需要设置正确。

这里我用【格式工厂】软件来说明。

格式工厂 -> mp4 -> 输出配置 -> 视频编码:AVC(H264)

清除微信H5缓存

之前在调试开发的过程中，遇到一个问题，就是：无论怎样刷新微信页面，或者重启web服务器，都无法清除缓存的css和js数据。

现在推荐2种不同手机的清除缓存方法，用来清除微信浏览器缓存。

IOS端

• IOS端浏览器内置的刷新，貌似可以清除css和js缓存，我这边测试的时候，是可以清除缓存的。
• IOS端：我 -> 设置 -> 通用 -> 微信存储空间 -> 清理微信缓存。即可清除缓存。

今天(2018/06/29)遇到了点击“清理微信缓存”后，返回去查看页面还是没有变化的问题，后来多点了几次页面右上角的刷新，就解决了。

Android端

在微信浏览器访问 http://debugx5.qq.com (X5 调试页面)，然后滚动到页面最下面。

勾选 Cookie, 文件缓存, 广告过滤缓存, DNS缓存 ,然后点击右侧的 “清除” 按钮。即可清除缓存。

注意：此方法不适用于IOS端。

微信H5的a链接点击失灵

微信内置浏览器的 a 链接，来回跳转几次就出现了跳转加载进度条，但是就是不跳转，也没有任何反应的情况。

解决办法：

给 a 链接的 href 属性添加任意参数，例如：

​bash <a href="www.baidu.com?2018"></a> ​

就可以解决 a 链接不跳转的问题。

IOS端长按屏幕变暗

IOS端的微信H5页面，有时候长按 div 或带有 background-image 的时候，屏幕会变暗.

解决办法：

给CSS添加以下属性：

​``` bash

• { -webkit-tap-highlight-color:transparent;}
  ​```
  即可解决上述问题。

audio音乐标签的方法调用

使用jq或者zepto时，想要调用音乐的play()方法时，发现 $(“#audio”).play(); 不起作用，并且报错 play()方法 undefined。

解决办法：

使用原生document方法即可调用

​bash var audio = document.getElementById('audio'); audio.play(); audio.stop(); ​

IOS的alert弹窗有域名

微信内置的H5浏览器，在IOS端的alert()弹框会带上域名，很影响页面美观。在Android端不会带上域名。

解决办法:

在js中加上如下代码，重置window的alert()方法。

​bash window.alert = function(name){ var iframe = document.createElement("IFRAME"); iframe.style.display="none"; iframe.setAttribute("src", 'data:text/plain,'); document.documentElement.appendChild(iframe); window.frames[0].window.alert(name); iframe.parentNode.removeChild(iframe); }; ​

IOS的H5页面text-decoration无效

微信内置的H5浏览器，在IOS端CSS中的 text-decoration 属性不生效，在Android端显示正常。

解决办法：

添加 -webkit- 前缀

​bash .test{ -webkit-text-decoration: underline solid #fff; text-decoration: underline solid #fff; } ​

---

以上是我在开发过程中遇到的问题，后续再更新。。。