Nana's Blog

vuejs移动端项目总结

下面说一些我在写移动端项目时总结的经验：

  • 我们知道移动端click点击事件有300s延迟，为了正常使用click，需引入fastClick这个库
    在main.js编写如下代码：

    1
    2
    import fastClick from 'fastclick'
    fastClick.attach(document.body)

  • 低版本安卓浏览器打开一片白

    1
    import 'babel-polyfill'

  • 轮播图、横向滑动tab、图片放大滑动等这些使用vue-awesome-swiper插件

    1
    2
    3
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
    Vue.use(VueAwesomeSwiper)

具体使用场景需参照文档配置option选项，这里不再赘述。
下面只阐述一点就是我们在使用插件时常常需要更改样式，比如改变轮播图下面小圆点的颜色。这里我们推荐使用样式穿透：

/deep/ 是sass和less的样式穿透
>>>是stylus的样式穿透

1
2
.wrapper >>> .swiper-pagination-bullet-active
   background: #fff
1
2
3
.wrapper  /deep/ .swiper-pagination-bullet-active {
    background: #fff
 }

  • 当我们要引入不是其本文件跟目录下的 css 文件时，记得使用'~@文件名' 来简化 './../../....'这些相对路径。或者使用'~路径别名'

    1
    2
    3
    4
    @import './../../../assets/css/mixin.scss';
    //简化成功
    @import '~@/assets/css/mixin.scss';
    @import '~styles/varibles.scss'

  • css常用相同模块内容可以提mixin提供多处使用，如：

    1
    2
    3
    4
    5
    @mixin omit {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

然后通过@include来调用具有相同名称的mixin模块

1
2
3
div {
　@include omit;
}

  • 在css里面，padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候，参照的是父元素的宽度.这个小技巧好处有很多：
  1. 可以进行提前占位，避免资源加载时候的闪烁
  2. 还可以让高度自适应
    在移动端或者在响应式开发情况下，我们可以利用这个特性来实现图片等比例缩放自适应。
    解决核心思想为：提供一个容器，设置容器的高度为0，再设置padding-bottom为56.25%（需要自适应的元素高度除以宽度*100%）（因为padding的百分比是按照容器宽度计算的，所以由padding来撑开容器高度，而不是height，保证了容器的宽高比例）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div class="wrapper">
      <img class="swiper-img" />
    </div>

    .wrapper {
        overflow: hidden
        width: 100%
        height: 0
        padding-bottom: 31.25%
    } 
    .swiper-img {
        width: 100%
    }

  • 移动端页面当滑动到底部时，路由跳转后发现页面还是保持在底部，这里可以在router中配置

    1
    2
    3
    scrollBehavior (to, from, savedPosition) {
        return { x: 0, y: 0 }
    }

  • 项目打包后，manifest.js可以理解为webpack打包生成的配置文件， vendor.js各个页面各个组件公用的一些代码，app.js放的是项目各个页面的业务逻辑代码。app.js至少超过1M的时候才使用异步组件

  • 使用keep-alive时有两个钩子函数:
    877cd98ea39d2dcdce0918a0d9073d6.png

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    mounted () {
        this.lastCity = this.city
        this.getHomeInfo()   //ajax请求
      },
      activated () {
        if (this.lastCity !== this.city) {
          this.lastCity = this.city
          this.getHomeInfo()
        }
      }

  • 有一个移动端很常见的效果，当滑动右边部分的时候，左边会联动显示与当前内容相符合的标题高亮，当点击左边某一个标题的时候，右边会自动滑动到相应的内容。左右联动效果，可以通过better-scroll这个插件实现。另外，横向滚动的导航栏、竖向滚动的列表都可以通过这个插件来实现。

    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
    <template>
        <!--定义外层-->
        <div class="wrapper" ref="wrapper">
            <!--定义需要滚动的内容区域-->
            <ul class="content">
                <li v-for="item in items">{{item.text}}</li>
            </ul>
        </div>
    </template>
    <script>
      import BScroll from 'better-scroll'
      export default {
        mounted() {
          this.$nextTick(() => {
            this.scroll = new Bscroll(this.$refs.wrapper, {})
          })
        },
       watch: {
         letter () {
           if (this.letter) {
            const element = this.$refs[this.letter][0]
            this.scroll.scrollToElement(element)
          }
        }
       },
      }
    </script>

样式这里需要注意的是，要滚动的这一部分给了固定的高度，且超出部分overflow:hidden;

1
2
3
4
5
6
7
8
.wrapper {
    overflow: hidden
    position: absolute
    top: 1.58rem
    left: 0
    right: 0
    bottom: 0
}

另外附上better-scroll原作者的文章：https://www.imooc.com/article/18232

  • 我们做好的项目，如何在移动端进行调试呢？
    我们发现，vue项目是用webpack-dev-server这个服务器跑起来的，这个服务器默认外部是无法访问的，需在package.json中加入--host 0.0.0.0才行：
    更改后的配置如下：
    1
    2
    3
    "scripts": {
        "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
      },

这样的话，在命令行运行ipconfig，手机和电脑连接同一局域网，用手机访问电脑的ip地址就可以用真机打开啦