Fork me on GitHub

移动端小结

字数统计: 2.4k字   |   阅读时长≈ 10分

微信小程序

  • 微信小程序使用iconFont

  • 文本框及其父元素保持在软键盘上方：

    • 文本框auto-focus配合v-if使软键盘自动弹出
    • wx.onKeyboardHeightChange监听软键盘高度并调整文本框
    • 文本框:adjust-position="false"兼容iphone，保证软键盘上升不顶开页面

  • uni-app中使用节流函数，由于uni-app类似vue的特性，节流函数直接绑定到元素上每次会触发新的节流函数而不是调用节流return的方法，不能生成闭包。赋值到methods内或者定义到全局也因为this的指向不方便使用页面实例的数据。解决如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //将节流方法赋值给data中的属性，只要不轻易修改该属性。即能满足this指向，
    //又会在存初始化时节流函数return的方法生成闭包，使用时调用data中的改方法即可
    data() {
        return {
         //this.loadMore是methods中定义的加载更多方法
         //this.$tool是赋到Vue原型上的utils
           throLoad: this.$tool.throttle(this.loadMore, 500)
        }
    },

  • 自定义tabBar除了每页放一个自定义组件，还可以使用官方提供的方法:

    在根目录新建custom-tab-bar存放原生小程序自定义组件的tabbar内容

    具体方式见文章微信小程序自定义tabbar

更新机制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function updateProcess() {
	const updateManager = wx.getUpdateManager()
	updateManager.onUpdateReady(function () {
	  wx.showModal({
	    title: '更新提示',
        content: '发现新功能，请更新使用',
        showCancel: false,
	    success({confirm}) {
	      if (confirm) {
	        //新的版本已经下载好，调用 applyUpdate 应用新版本并重启
	        updateManager.applyUpdate()
	      }
	    }
	  })
	});
	updateManager.onUpdateFailed(function () {
	  // 新版本下载失败
		wx.showModal({
		  title: '已经有新版本咯~',
		  content: '请您删除当前小程序，重新搜索打开呦~'
		})
	});
  // 打印版本信息
  updateManager.onCheckForUpdate(function (res) {
    // 请求完新版本信息的回调
    console.log('是否有更新', res.hasUpdate)
  });
  const account = wx.getAccountInfoSync();
  console.log('当前版本信息', account.miniProgram);
}
  • 推荐将更新逻辑放到App的onShow，而非onLaunch，否则在后台的小程序重新扫码进入不会触发
  • 还要注意，旧版本没有增加更新检测的，更新后仍然不能检测，及时新代码中有

h5

内部元素滚动时页面滚动bug

在自己定义可滚动的侧边栏时，常规方法侧边栏无法阻止滚动冒泡到body。虽然使用的遮罩并阻止遮罩滚动，但侧边栏等层级高于遮罩的元素仍会出现问题。主要有三种情况导致页面滚动:

  • 侧边栏无法滚动时,滚动目标会给到body
  • 侧边栏滚动到最顶部在下滑或到最底部再上滑滚动目标会给到body
  • 侧边栏内的元素仍会冒泡到body,除非给所有子元素阻止冒泡

解决方法

以下代码块menubox为滚动盒子的jq对象，menuBoxPri是滚动盒子的dom对象

  • 禁止所有的滚动行为，再用JS手动添加滚动:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    menuBox.on('touchstart', function(e) {
      this.startY = e.targetTouches[0].clientY
    }).on('touchmove', function(e) {
      let dis = this.startY - e.targetTouches[0].clientY
      if (dis != 0) this.startY = e.targetTouches[0].clientY
      //JS手动添加滚动
      menuBoxPri.scrollTop += dis
      //禁止所有的滚动行为
      preventDefault(e)
    }) 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    //这种方式唯一有点缺陷就是没有原生惯性滚动的效果，我们可以用js自己写：
    //比起自己实现，为了兼容添加那么多无用代码更恶心
     menuBox.on('touchstart', function(e) {
       this.startY = e.targetTouches[0].clientY
       if (this.timer) clearInterval(this.timer)
     }).on('touchmove', function(e) {
       let dis =  this.startY - e.targetTouches[0].clientY
       if (dis != 0) this.startY = e.targetTouches[0].clientY
       menuBoxPri.scrollTop += dis
       this.speed = Math.abs(dis) > 4 ? dis : null
         
       preventDefault(e)
     }).on('touchend', function() {
         if (!this.speed) return
         const speed = this.speed
         this.speed = null
         let step = speed > 0 ? 12 : -12
         if (this.speed > 30) step *= 2
      
       this.timer = setInterval(() => {
         if (step <= 0.1) return clearInterval(this.timer)
           menuBoxPri.scrollTop += step 
           step *= 0.96
       }, 1)
     })

  • 弹出层出现时就给bodyfixed ，但这种方式会导致整个页面瞬间到达顶部，需要先获取body原本的scrollTop动态赋值给top（为负数才是下滚）。结束时记得把scrollTop给回去

    • document.documentElement.scrollTop || document.body.scrollTop

      1
      2
      3
      4
      5
      6
      7
      8

        - 在移动端可以更简便地使用`document.scrollingElement.scrollTop`代替上面方式获取到滚动属性

      - 弹出层出现时给后方元素加上如下设置，结束时赋值为空即可：
        
        ```js
        document.scrollingElement.style.height = '100vh'
        document.scrollingElement.style.overflow = 'hidden'

  • 实际开发我们可以借助大佬的插件优化移动端滚动，简单更方便，如better-scroll。vue中使用如下:

    1. npm i -S better-scroll

    2. <div class="wrapper">
  <ul>
    <li>商品</li>
   <li>商品</li>
  </ul>
</div>

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10

      3. ```js
         import BetterScroll from 'better-scroll'
         //实例内:
         mounted() {
           const bs = new BetterScroll('.wrapper', {
             movable: true,
             zoom: true
           })
         }
    3. .wrapper {
  overflow: hidden;
  height: 500px;
}

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31

      >script引入使用bscroll.js需要`new Bscroll`来创建实例

      ```html
      <script src="bscroll.js"></script>
      <script>
          // probeType: 0,1都是不侦测实时位置1会更节流，2是在手指滚动的过程中监测，手指离开后的惯性滚动过程不监测，3是只要滚动，都监测
          let bscroll = new BScroll('.wrapper', {
              probeType: 3,
              click: true, //允许监听点击
              pullUpLoad: true, //上拉加载更多
            	pullDownRefresh: true	//下拉刷新
          })

          //监听滚动位置 默认情况下BScroll 是不可以监听滚动位置的，只有在初始化的时候设置了probeType才可以监听
          bscroll.on('scroll', function (position) {
              console.log(position)
          })
          bscroll.on('pullingUp', function () {
              console.log('上拉加载更多');
              //调用finishiPullUp()表示本次上拉加载完成，可以进行下次上拉加载更多，不调用这个的话，默认只能由一次上拉加载更多
              setTimeout(function () {
                  bscroll.finishPullUp()
                	bs.refresh()	//若内容增加但是可能无法继续下拉，使用refresh
              },2000)
          })
        	bscroll.on('pullingDown', function(){
             console.log('下拉刷新更多');
            	bscroll.finishPullDown()
          })
      </script>

移动端第三方唤起及分享

  • 唤起手机微信

    1
    <a href="weixin://">打开微信</a>

  • QQ:

    • 唤起QQ并打开与指定联系人的聊天框

      1
      <a href="mqqwpa://im/chat?chat_type=wpa&uin=QQ号&version=1&src_type=web&web_src=oicqzone.com">打开QQ</a>

    • 分享到QQ空间(网页)

      1
      <a href='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary='+title+'&url='+url+'&pics='+picurl'>分享到QQ空间</a>

  • 分享到微博(网页):

    1
    2
    1. "http://service.weibo.com/share/share.php?url="+shareUrl+"&title="+sharetitle+"&searchPic=true";//微博自动抓取图片用这个
    2. "http://service.weibo.com/share/share.php?url="+shareUrl+"&title="+sharetitle+"&pic="+shareImg;//自定义图片用这个

hybrid app

安卓证书

生成证书需要安装jre环境，生成位置默认在其bin目录

沉浸式状态栏

  • 在manifest.json中plus选项加上:

    1
    2
    3
    4
    "statusbar" : {
      "immersed" : true,
      //"style" : "dark" 前景色 可选值:dark/light
    },

  • 然后通过plus.navigator.getStatusbarHeight()计算系统状态栏高度，在页面顶部用元素顶出状态栏的高度空间并自定义样式

视频播放

h5的video标签不支持m3u8等直播流路径，尝试使用videojs也失败告终。最后使用h5+调用原生的视频播放模块:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//mounted：
const rect = document.querySelector(".videos").getBoundingClientRect();
this.video = plus.video.createVideoPlayer("videoplayer", {
  //根据容器样式设置播放器大小，位置
  left: rect.left + "px",
  top: rect.top + barH + "px",
  height: rect.height + "px",
  width: rect.width + "px",
  autoplay: true,
  playStrategy: 3 //播放策略，m3u8推荐3
});
plus.webview.currentWebview().append(this.video);
this.video.show();
//destroyed
this.video.close();
//监听视频地址(to)变化
const ope = to ? "show" : "hide";
if (!this.video) return;
this.video[ope]();
if (!to) return;
this.$nextTick(() => {
  this.video.setStyles({
    src: to
  });
});

  • 视频全屏时，手机底部的安全区仍然遮住视频下方。计划方案:

    1.在manifest.json => plus下：

    1
    2
    3
    4
    5
    6
    //取消所有安全区
    "safearea" : {
        "bottom" : {
          "offset" : "none"
        }
    },

    2.在需要安全区的时候使用constant(safe-area-inset-bottom);和env(safe-area-inset-bottom)手动空出：

    1
    2
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

flexible适配方案

  • 引入flexible.js，监听窗口宽度动态修改html font-size：
1
2
3
4
<script
      type="text/javascript"
      src="https://g.alicdn.com/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"
    ></script>
  • 安装postcss-pxtorem(当前^4.0.1)并配置postcss.config.js
1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ["Android >= 4.0", "iOS >= 7"]
    },
    "postcss-pxtorem": {
      rootValue: 37.5,
      propList: ["*"]
    }
  }
};

样式中的px等单位会将自动转换为对应rem值(不包括行内样式)

赏

谢谢你请我吃糖

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术：
前端开发、Hexo博客、Vue、微信小程序爱好者