Vue: 移动端项目总结

站长

2023年02月23日 22:39 · 阅读数 18

项目总结

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

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

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

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

import 'babel-polyfill'

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

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

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

 .wrapper >>> .swiper-pagination-bullet-active
    background: #fff

.wrapper  /deep/ .swiper-pagination-bullet-active {
    background: #fff
 }

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

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

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

@mixin omit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

div {
　@include omit;
}

在css里面，padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候，参照的是父元素的宽度.这个小技巧好处有很多：

可以进行提前占位，避免资源加载时候的闪烁
还可以让高度自适应在移动端或者在响应式开发情况下，我们可以利用这个特性来实现图片等比例缩放自适应。解决核心思想为：提供一个容器，设置容器的高度为0，再设置padding-bottom为56.25%（需要自适应的元素高度除以宽度*100%）（因为padding的百分比是按照容器宽度计算的，所以由padding来撑开容器高度，而不是height，保证了容器的宽高比例）

<div class="wrapper">
  <img class="swiper-img" />
</div>

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

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

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

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

Vue: 移动端项目总结

mounted () {
    this.lastCity = this.city
    this.getHomeInfo()   //ajax请求
  },
  activated () {
    if (this.lastCity !== this.city) {
      this.lastCity = this.city
      this.getHomeInfo()
    }
  }

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

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

.wrapper {
    overflow: hidden
    position: absolute
    top: 1.58rem
    left: 0
    right: 0
    bottom: 0
}

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

我们做好的项目，如何在移动端进行调试呢？我们发现，vue项目是用webpack-dev-server这个服务器跑起来的，这个服务器默认外部是无法访问的，需在package.json中加入--host 0.0.0.0才行：更改后的配置如下：

"scripts": {
    "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
  },

vuecli3.0

对于vuecli3.0的项目，可以采用如下配置：

devServer: {
    host: '0.0.0.0'，
    proxy: {
      "/api": {
        target: "https://xxxxx",
        secure: false,
        changeOrigin: true
      }
    }
  },

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