移动端开发
多页面应用特点
页面跳转,返回html
优点:
首屏时间快,搜索引擎效果好缺点:
页面切换慢
单页面应用特点(vue)
页面跳转,js渲染
优点:
页面切换快缺点:
首屏时间稍慢,搜索引擎(SEO)优化效果差
服务器端渲染可以完美的解决单页面所遇到的问题
Viewport 基础
- width 控制 viewport 的大小, device-width为设备的宽度
- initial-scale 初始的缩放比例
- minimum-scale 允许用户缩放到的最小比例
- maximum-scale 允许用户缩放到的最大比例
- user-scalable 用户是否可以手动缩放
<meta
name="viewport"
content="
width=device-width,
initial-scale=1.0,
user-scalable=1.0,
minimum-scale=1.0,
maximum-scale=1.0"
>
移动端300ms延迟
移动端浏览器click事件为什么会有300ms的延迟呢?因为在手机上有个双击方案: 在手机上快速点击两下,实现页面放大;再次双击,恢复到原始比例
那它是如何实现的呢?浏览器在捕捉到第一次点击事件后,会等待一段时间,如果在这段时间内,用户没有再次进行点击操作的话,就执行单击事件;如果用户进行了第二次点击操作的话,就会执行双击事件。这段等待的时间大约300ms
如何解决这个延迟呢?
-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
-
引入第三方库
fastclick
npm install fastclick --save
- 在入口文件引入
import FastClick from 'fastclick'
FastClick.attach(document.body)
npm install stylus --save
npm install stylus-loader --save
keep-alive
<keep-alive exclude="uRankQuestionCategories">
<router-view v-wechat-title="$route.meta.title" v-if="!$route.meta.keepAlive" />
</keep-alive>
{
path: '/urank/:type/question_categories/:category_id',
name: 'uRankQuestionCategories',
component: uRankQuestionCategories,
meta: {
title: '问卷调查',
keepAlive: false
}
}
单页面跳转解决路由不刷新问题
computed: {
time () {
return this.$route.name != undefined ? this.$route.name+new Date().getTime() : new Date().getTime()
}
}
在css引入css文件@import '../../assets/styles/common.scss';
等效于@import '~@/assets/styles/common.scss';
在js中引入css文件import '../../assets/styles/common.scss';
等效于import '@/assets/styles/common.scss';
还可以在webpack.base.conf.js
进行配置'styles': resolve('src/assets/styles')
使用
- 在css中引入文件
@import '~styles/common.scss'
- 在js中引入文件
@import 'styles/common.scss
来源:https://blog.csdn.net/luluan_lin/article/details/99096946