墨瞳漫画h5一期 vuejs总结

发布时间:2019-08-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了墨瞳漫画h5一期 vuejs总结脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

博主也是vuejs萌新,公司仅我一个前端,收到做h5的需求后,马上想到要用下vuejs,于是说服领导,开始慢慢钻研,现在记录一下踩到的坑。这些坑主要是在一些组件的使用上,其它的只要好好看官方文档就好了,vue,vue-router, vuex的文档相当重要

欢迎体验提bug 墨瞳漫画 m.cm233.com

@H_777_7@vue-router

router这里踩的坑主要是组件的重用。构建单页面大型应用的话,肯定要开启组件的缓存的,因为一般会要求后退的时候不要重新加载页面,而且要记住原始的滚动位置。
首先,引入router-view的地方要加上keep-alive

<router-view keep-alive></router-view>

然后开启html5 history模式,并开启位置纪录

const router = new Router({
  history: true, // use history=false when testing
  saveScrollPosition: true
})

开启keep-alive以后,当要求一个组件的内容发生变化时,比如 漫画详情页面是一个路由带参数的组件,当参数变化时,router会重用这个组件,而不是重新请求数据,这显然是不符合要求的,所以正确的姿势是:
首先,用一个字段保存这个路由参数,
用router的钩子函数data获取路由变化参数,保存到字段里


route:{
  data: function(transition){
      this.BookId = transition.to.params.id;
  }
}

写一个watcher来拉取数据并填充模版,因为在data钩子函数中,我们已经修改了相应字段,所以当路由参数更改时会直接触发这个watcher

watch: {
  'bookId' : function(val){
    //do something
  }
}

如果是多个参数的,可以把这些参数放到一个对象里,watcher采用深监测

route:{
  data: function(transition){
      this.watcher.type = transition.to.params.type;
      this.watcher.id = transition.to.query.id;
  }
},
watch : {
  'watcher' : {
    handler: function(val){
    //do something
    window.scrollTo(0,0);// 不使用缓存时,不使用记录好的用户位置,滑倒顶部
    },
    deep: true
  }
}

一开始没有用这种方法出了很多的bug,改了以后,路由和缓存方面的逻辑瞬间就变得清晰了,组件的切换也更加流畅了。
第二个坑就是关于缓存页面浏览位置的纪录,router是通过html5 history的pushState来纪录当前滚动位置的,切换路由的时候,把当前位置push进去,用户后退时,会触发onpopstate事件,这个时候再把位置取出来并滚动到指定位置,但是!某些浏览器本身也设置了一些奇怪的位置滚动,vue-router的滚动就失效了,所以需要延迟执行一下

   window.addEventListener("popstate",function(e){
     setTimeout(()=>{
       window.scrollTo(0,e.state.pos.y);//通过打log,发现了位置纪录在这个变量里了
     },300)
    },false);

然而,浏览器只能记录一个位置,所以会有这样的情况: 从m.cm233.COM 到 m.cm233.com/book,再返回到m.cm233.com,这时浏览器跳到了当时记录的位置,但是再前进到/book时,浏览器还是会停在首页的那个位置上,这个bug暂时还没有解决,好在用户场景不是很多。所以告诉我们,子页面路由参数变化的时候,要把滚动条人工弄到最上面,要不然就会滚动到入口页面的浏览位置。也就是watcher里还要加一句如上的滚动。

页面标题也是要手动更改的,所以每个页面要放一个专门的title变量存一下,然后在data钩子函数(用于组件缓存时) 和 路由参数的watcher(用于组件更新时) 里 都改变title

route:{
  data: function(transition){
    this.title = 'hiahia';
    document.title = this.title;
  }
},
watch : {
  'id' : function(val){
    this.title = 'hiahia';
    document.title = this.title;
  }
}

通常页面的标题不是固定的,用变量存储title,主要是为了记住上一次组件被用的时候的title,以便于重用的时候更换。

然而,ios微信不会监测document.title的变化,所以要写一个专门针对它的hack,通过创建iframe

//全局函数
window.isWeiXin = function(){
    VAR ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/Micromessenger/i) == 'micromessenger'){
        return true;
    }else{
        return false;
    }
}

window.weiXinChange = function(title){
  if(window.isWeiXin()){
    document.title = title;
    var iframe = document.createElement('iframe');
    iframe.src = './favicon.ico';
    iframe.style.display = 'none';
    iframe.onload = function(){
      setTimeout(function() {
        document.body.removeChild(iframe);
      }, 0);
    }
    document.body.appendChild(iframe);
  }
}

//组件中

route:{
  data: function(transition){
    this.title = '墨瞳漫画';
    document.title = this.title;
    window.weiXinChange(this.title);
  }
},
watch : {
  'id' : function(val){
    this.title = '墨瞳漫画';
    document.title = this.title;
    window.weiXinChange(this.title);
  }
}

vue-infinite-scroll (directive)

(为什么不自己写!)

组件地址 https://github.com/ElemeFE/vue-infinite-scroll 饿了么出品

使用方法
main.js

import Scroll From 'vue-infinite-scroll'
Vue.use(Scroll)

组件中

  <dl v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="7">
    <template v-for="item in list">
      <dd class="page-item">
      </dd>
    </template>
  </dl>

其中busy这个变量比较重要,他控制着这个指令是否继续执行,当没有下一页数据的时候,应该把busy置为true来关闭滚动加载。正在读取下一页数据时,要先把busy置为true,数据返回时在置为false

loadmore(){
  this.busy = true;
  someApi.someFunction().then((data) => {this.busy = false;})
}

但是这个组件在路由切换的时候会出问题,routerView被移除时,组件会触发加载(大概是因为页面高度突然塌陷),而且会一直加载到我们自己设置的停止条件(busy=true)。所以离开页面的时候,需要在路由的deactivate钩子函数里把滚动关掉,再次进入页面的时候再开启(路由无变化在data钩子函数里开启,有变化的话在watcher里开启,如果不需要在路由改变时向子组件延时传递参数也可以都在data钩子函数里开启)

route:{
    deactivate: function(transition){
      this.busy = true;
      transition.next();
    },
  data: function(transition){
    if(){
      this.busy = false;
    }//这里输入组件路由参数没有变化的条件
  }
}

lazyload

(为什么不自己写!)
网上找了几个lazyload的组件,都不太好使,就自己改了一个,是改了一个,原组件叫vue-lazyload, 毛病还挺多的,写这个组件的人估计没有真正在大项目中用过就匆匆发布在npm了,es6版本也写的不伦不类的 - -,不过还是很厉害,自己写的话毛病肯定会更多。我改后的放在https://github.com/Ganother/blog/blob/master/lazyload.js了,是个较为稳定的版本。其中过渡动画写在img-loaded这个class里

/*简单的透明度渐入,图片加载完成后会删掉这个class,以router切换缓存页面时再次引起动画*/
.img-loaded {
  animation: loaded .2s ease-in-out;
 }
 @keyframes loaded {
   0%{
     opacity: 0;
   }
   100%{
     opacity: 1;
   }
 }
let loadingjpg = require('assets/loading.jpg');//这里引入一张loading图,会被转成base64
Vue.use(VueLazyload, {
 PReLoad: 1.3, //图片顶端距窗口顶端1.3个屏幕高度时开始加载
 loading: loadingJpg,
 error: loadingJpg
})

自适应的图片:如果服务端传过来的图片带了高信息,可以在img外层包一个class为img-bar的元素,图片过来的时候先设置一个min-height为响应高,组件在图片加载后会自动取掉这个min-height。这样可以防止loading图和图片大小不一样引起的页面跳动继而导致的加载图片时机错误。

vue-resource

跨域时,会先发送一个空的options请求来查看接口是不是支持跨域,再发送一次真实请求。还不是很了解这种方式的好处,当接口较多时,请求数量多了一倍也是有点尴尬的,所以要设置一下。而且如果接口每次都打印空参数的log的话。。。嗯。

Vue.http.options.emulateJSON = true;
Vue.http.options.headers={
    'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
};

结构目录

vue-cli直接构建的,src里的目录如下

api 放一些ajax请求接口的函数
assets 放一些静态资,图片,公共sass
directives 放一些指令js,比如改动后的lazyload
pages 页面入口组件,用在router中
components 小组件们
vuex vuex
app.vue
main.js

另外,可以修改下生成的静态文件,vue-cli默认声称的静态文件时间戳是加在文件名上的,如app.fefDFd7s8f78sd7.js,这样版本迭代很快后会使服务器上积压过多无用文件,我们希望这样加时间戳 app.js?t=32j32ih4u32h 所以改一下webpack.prod.conf.js就好了,如下

  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].js?t=[chunkhash]'),
    chunkFilename: utils.assetsPath('js/[id].js')
  }


    new ExtractTextPlugin(utils.assetsPath('css/[name].css?t=[contenthash]')),

脚本宝典总结

以上是脚本宝典为你收集整理的墨瞳漫画h5一期 vuejs总结全部内容,希望文章能够帮你解决墨瞳漫画h5一期 vuejs总结所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。