初识移动端 | yk

文章目录

1. 移动端的Click事件
2. 移动端适配rem
1. 2.1. 简单适配
2. 2.2. 小米官网写法
3. 微信分享的缩略图和简介
4. video视频播放问题
5. 清除微信H5缓存
1. 5.1. IOS端
2. 5.2. Android端
6. 微信H5的a链接点击失灵
7. IOS端长按屏幕变暗
8. audio音乐标签的方法调用
9. IOS的alert弹窗有域名
10. IOS的H5页面text-decoration无效

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

移动端的Click事件

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

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

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

解决方法：

touchend

使用touchend代替click(不推荐)

1
2
3

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

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

tap

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

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

1
2
3

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

css

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

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

1	ul > li {cursor:pointer;}

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

移动端适配rem

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

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

1	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

简单适配

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

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";
}

小米官网写法

!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方法

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

// 页面引入
<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  //页面引入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 属性添加任意参数，例如：

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

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

IOS端长按屏幕变暗

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

解决办法：

给CSS添加以下属性：

1	* { -webkit-tap-highlight-color:transparent;}

即可解决上述问题。

audio音乐标签的方法调用

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

解决办法：

使用原生document方法即可调用

1
2
3

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

IOS的alert弹窗有域名

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

解决办法:

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

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- 前缀

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

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