web移动端开发总结 第1篇

在和后台做交互数据的过程中，避免不了出现不同端口或者不同域名，这个时候我们就要做代理，首先vue提倡的交互工具是axios这里就不多说了，至于为什么技术栈里会涉及到vue-axios，是为了更好地适配vue而做的

在config文件夹下有一个，该文件就是webpack的配置，里面有一个proxyTable对象，将下面的代码放进去：

在vue中这样交互:

这样就可以完成代理进行交互了，但是在你之后打包项目到生产环境的时候你会发现并无法访问；这里有几个坑需要填一下：

web移动端开发总结 第2篇

相对于PC端来说，移动端设备分辨率百花齐放，千奇百怪，对于每一个开发者来说，移动端适配是我们进行移动端开发第一个需要面对的问题。

在移动端我们经常可以在head标签中看到这段代码：

通过meta标签对viewport的设置，定义了页面的缩放比例；要了解这些参数的意义，我们需要先知道几个视口宽度的意义。

meta的设置其实就是对layoutviewport和visualviewport进行设置。

所以现在我们知道，这段在移动端常见的代码的意思，即将visualviewport和layoutviewport设置为idealviewport的值；这样我们在移动端就不会出现滚动条，网页内容可以比较好的展示出来，在这个前提下我们再考虑页面的适配问题。

UI出图的时候一般是有一个固定的宽度的，而我们实际的移动端设备的宽度却都不太一样，但是如果页面元素的缩放比例和页面宽度的缩放比例一致，在不同尺寸的设备下我们网页的效果也将会是一致的。

使用相对单位

rem

rem 是相对于根元素 html 的 font-size 来做计算。通常在页面初始化时加载时通过对 设置来实现。一般我们将根元素html的font-size设置为宽度的1/10，不同设备的宽度不同，但是同样数值的rem比例与设备的宽度比例是一致的。

在实际项目中我们无须在开发中自己进行转换，可以使用pxtorem在输出的时候将px转换为rem。

视口单位

将视口宽度和视口高度（即layoutviewport）等分为 100 份。

vw : 1vw 为视口宽度的 1%vh : 1vh 为视口高度的 1%vmin : vw 和 vh 中的较小值vmax : 选取 vw 和 vh 中的较大值

和rem相比较，视口单位不需要使用js对根元素进行设置，兼容性稍差，但是大部分设备都已经支持了，同样的无须再开发时进行单位换算，直接使用相关的插件postcss-px-to-viewport在输出的时候进行转换。

web移动端开发总结 第3篇

这两个事件如果同时使用的时候，可能会引发冲突，即touchstart好使，click失效，这个问题来自于touchstart下阻止了默认事件，导致click失效，需要去掉touchstart身上的取消默认事件方法或属性

在配置全局路由的时候，加一个meta对象，在meta对象里面写一个title，该title就是我们微信公众号文章上的title，在配置一个全局路由守卫，将路由中的title赋值给DOM的title：

在中使用：通过axios请求拿到了这四个属性值，然后调用传参：

再封装一个可定义的分享插件：

然后再每个页面初始化的时候调用上面的这个方法: