去旅行App 练习记录

Posted 言叶以上のBLOG

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了去旅行App 练习记录相关的知识,希望对你有一定的参考价值。

一、首页Header的开发

1.stylus使用

  • 设计图 750 px ,是iphone6 的2倍图设计稿
  • 使用 stylus 方便我们快速的编写 CSS 代码,stylus 是一种CSS预处理语言
  • npm install stylus --save
  • npm install stylus-loader --save (stylus-loader 可以将 stylus 语言转换成原生 css)
  • 新建Header.vue 设置
    export default {name: ‘Home‘)
  • 在Home.vue中引入
  • import HomeHeader from ‘./components/Header‘

     并且声明该局部组件

  • component: {HomeHeader}

     关于样式:使用stylus语言,只对当前组件有效

  • <style lang="stylus" scpoed>

     iconfont 引入图标

  • 通过webpack对文件路径进行简化,进入build=>webpack.base.conf.js,缩写路径: reslove.alias 内添加 ‘styles‘: resolve(‘src/assets/styles‘),

 

遇到的问题:

下次运行项目会遇到 stylus报错的问题。

原因,package.json 缺失依赖,不能解析stylus

解决方法:执行 npm install stylus-loader css-loader style-loader --save

 

二、首页轮播图

1.创建分支,在分支开发完毕会合并到master主分支上

  • git pull (把线上分支拉到本地)
  • git checkout index-swiper (修改本地的分支为新建的那个分支)
  • git status (查看本地的分支)

2.轮播图插件插件 vue-awesome-swiper

  • npm install vue-awesome-swiper --save (默认最新版)
  • npm install [email protected] --save (安装稳定的版本)
  • 在main.js中引入
  • import Vue from ‘vue‘
    import VueAwesomeSwiper from ‘vue-awesome-swiper‘
    
    // require styles
    import ‘swiper/dist/css/swiper.css‘
    
    Vue.use(VueAwesomeSwiper, /* { default global options } */)

     

     

三、图标区域页面布局

  写样式,此阶段没什么难点

四、图标区域逻辑实现

1. 图标分类轮播效果

  • 打开 swiper.vue
  • 给要滚动的组件包裹 <swiper :options="swiperOption"> 与 <swiper-slide> 标签,一个<swiper-slide>为一页
  • 实现上下区域都能滑动,需要将.swiper-container 的宽高设定为和 .icons一样,使用样式穿透符 "<<<" ,可以修改不属于本页组件的样式
  • 关闭自动滚动参数 :swiperOption: {autoplay: false},

2.合并线上分支

//同步线上仓库分支
git add .
git commit -m ‘add icons‘
git push

//切换到master分支
git checkout master
//合并
git merge origin/index-icons
git push

 

五、推荐区域

写样式,此阶段没什么难点

 

六、Ajax 获取首页数据

推荐 vue-axios

整个首页发送一个Ajax 请求

  • 引入:import axios from ‘axios‘
  • methods: {
              getHomeInfo: function() {
                axios.get(‘/api/index.json‘)
                  .then(this.getHomeInfoSucc)
              },
              getHomeInfoSucc: function() {
                console.log(res)
              }
            },
    mounted () {
              this.getHomeInfo()
            }

     

  • 整个项目中 只有static 目录下的内容可以被外部访问到
  • 进入 config/index.js  添加 proxyTable 进行api替换,可以做到线上本地api 自动切换
    proxyTable: {
          ‘/api‘: {
            target: ‘http://localhost:8080‘,
            pathRewrite: {
              ‘^/api‘:‘/static/mock‘
            }
          }

     

七、城市选择页面路由配置

better-scroll 使用

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- you can put some other DOMs here, it won‘t affect the scrolling -->
</div>

 

//初始化
mounted () {
      this.scroll = new Bscroll(this.$refs.warpper)
}

 

 

遇到的问题,加载后无法滚动 ,刷新后可滚动

情况一:

原因:当数据是动态渲染时,在没有渲染出来的情况会视为scollBox的高度为0,因此要在渲染完成后执行 better-scroll的refresh 操作。因为此时高度因为新数据发生改变,需要重置 better-scroll 

//mounted函数  
  this.$nextTick(()=>{
                  if (!this.scroll) {
                    this.scroll = new BScroll(this.$refs.rongqi, {
                      click: true
                    });
                  } else {
                    this.scroll.refresh();
                  };
            });

 

情况二:

以PC模式打开页面,按F12后切换移动端无法滚动。

解决方法:切换移动端后,按F5 以移动端模式重新加载即可。

 

八、兄弟组件间联动

子传父,父传弟的形式

 

九、使用Vuex实现数据共享

 遇到的问题:模块莫名其妙的丢失

目前解决办法是 手动删除 node_modules文件夹,之后进行 npm install 重新安装

VUEX的使用

 

十、城市保存

localStorge本地存储 

state: {city: localStorage.city || ‘上海‘},
mutations: {
    localStorage.city = city
}

 

使用keep-alive 优化网页性能

遇到的问题:

每次切换路由时,Ajax 都会发送请求

解决方法: 在App.vue 文件的 <router-view>标签外包裹一层 <keep-alive> ,下次请求时会将已存储的内容从内存中取出即可,实质是不再执行mounted 周期函数

 

十一、详情页动态路由及 banner 布局

 

十二、公共图片画廊组件拆分

 

遇到的问题,

页面拖动会互相影响 解决滚动行为

https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html

在router/index.js 文件中 routes下面添加

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

 

作用:每一次做页面切换时,让先进入的页面X轴为0 Y轴也为0,(始终回到最顶部)

 

十三、真机测试

  1. 通过 ipconfig 命令获取本地IP (我的是 192.168.1.105:8080)
  2. 进入 package.json 在 "dev" 内添加 "--host 0.0.0.0" 即可使用手机在内网访问 

解决手机低版本浏览器白屏不支持 promise 的问题

  • npm install babel-polyfill --save
  • 在 main.js 中引入 "import ‘babel-polyfill"

十四、打包上线

前后端联调:

修改 config/index.js 下的 proxyTable

proxyTable: {
      ‘/api‘: {
        target: ‘http://localhost:8080‘, //前端模拟数据形式
        pathRewrite: {
          ‘^/api‘:‘/static/mock‘
        }
      }
    },

 

修改为:

proxyTable: {
      ‘/api‘: {
        target: ‘http://localhost:80‘ //后端从80端口返回数据
      }
    },

 

 

遇到的问题:

Vue 打包后运行 index.html 网页一片空白

解决方法:修改 config 文件夹下的index.js

设置assetsPublicPath: ‘./‘

 

以上是关于去旅行App 练习记录的主要内容,如果未能解决你的问题,请参考以下文章

golang 去练习片段

校招真题练习019 毕业旅行问题(头条)

团队作业

App设计灵感之十二组精美的旅行App设计案例

团队作业5

原型化系统 :美食分享软件-食戟