背景
主管分配了一个移动端页面的任务，主要是几个展示内容，其中一个页面输入用户信息，接口查询值后展示具体的一个页面。不是自己项目组的工作，所以当时也就说切图，复杂的内容直接贴图。
设计师很快给了还在确定的设计图，看起来很简单，一个头、一个内容区。每个页面都差不多的格局，理论上很简单。
和设计师商量具体的交互细节，她在微信浏览器里打开了一个其他活动页，大概就是那个样子。这个时候才发现“我们不一样”，完全和当时接到的需求不一样，还好这个滑动不会做的很复杂，就是一般的滑动翻页，找一个插件就搞定了。
大概已经确定交互，剩下就是完善细节了。因为需求方没有给原型，没法体现出哪个页面和哪个页面有关系，只好和需求方电话沟通。
和需求方沟通后发现“我们更不一样”，最初接到的需求是，一个简单的移动端页面，几个展示内容，填写表单得到用户信息后，再展示对应的内容页。最终的需求是，首先展示四个页面，三个一直存在，一个表单页，上下滑动切换页面。情况一，当用户填写表单提交后，获取到具体信息后，展示出具体。情况二，当用户没有具体的信息，回到上一页（一个分类导航），用户点击一个分类，能够查看到当前所有的内容页，当从内容页回到导航页，内容也又要隐藏，再点击其中一个，又能看到。没有登录的情况，点击导航是没有效果的。
想了一下，其实可行的，只要动态添加滑动的页面就好了。第二种情况也只需要判断当前是否是导航就行了。
页面适配
布局
在接到这个任务的时候，就已经在想页面适配的问题了。于是和需求方确认页面的使用场景会是哪些地方，得到的答复是微信浏览器、手机QQ内置浏览器。哎哟，很棒，可以用很多有趣方案。
第一个想到的还是 rem 适配，这个单位对于浏览器的兼容比较好，淘宝的 amfe-flexible 可以试试看。
得到具体的应用场景后，我觉得 vw 或许更适合，这个单位对于不同分辨率的屏幕，比例缩放更准确。找了一些文章看看怎么玩 vw，主要还是 《如何在Vue项目中使用vw实现移动端适配》 这个方案吸引了我，webpack 的工作流，已经得到了运用，可以试试。
利用视口单位实现适配布局 这个方案也很棒，运用 CSS 的预处理就能实现，理解起来更简单。但为了踩坑，还是决定用前者。
倍图
移动端的图片确实比较有趣，不同的设备像素比不一样。好吧，简单地说，就是一倍图、二倍图、三倍图。
目前我了解到的，有两种方式实现，一种是 CSS 的新属性 image-set 做倍图，另一个就是媒体查询。
查看了其他几个网站，发现，媒体查询比较多。retinajs 是一个不错的工具，简单，比较讨厌的是，生成的 CSS 会有很多媒体查询的代码，明明都是一样的条件，每个地方都要写。不过还好，我们有 css-mqpacker 配合 postcss 合并这些媒体查询。
页面滑动
这个当然是选 swiper 咯，竖着、横着都可以，还能动态更新节点，很棒的嘞。
开发环境
最基本的适配方案已经有了，那就是开发环境。都 8102 年了，纯手戳代码是不太可能的了，最基本的也要用 Gulp 把代码进行编译、压缩，要不然 ES6 那么好玩为啥不用呢。
Gulp 那套，现在感觉有点不好耍了，结合前段时间自己倒腾了一下 React SSR 的开发环境，对于 webpack + webpack-dev-server 的搭建还是有点想法，遂选了他们俩。
和 React 那套方案很像，只是升级了 babel 的版本。
上线前的坑
代码写好后，搭了一个环境推了上去，基本能用，就等测试、验收了。
新增适配
前面说了，应用场景是微信浏览器、QQ内置浏览器，突然说，啷个电脑浏览器浏览器打开是乱的呢，我急忙解释，这个是移动端，手机上看的，PC 当然没有适配。需求方说不行，有时候要电脑打开的，加上适配一下电脑打开的情况。
因为当时使用了 vw 这个单位，它浏览器的宽度有关，只要手动拖动改变浏览器窗口的大小，也可以看到一个比较不错的页面状态，但体验不是很好。
如果我对显示内容固定一个最大宽度，应该就很棒了。但是，我选错了单位，用了 vw 来布局，没法快速的修改比例单位。庆幸页面内容不多，把每个样式增加一个样式，通过媒体查询，各种覆盖，啊哈哈，好心酸。但，完美的解决了。
如果，当时选择 搭配vw和rem 就简单多了，诶，算是长见识了。
内外都能访问
是的，中间我们用 Nginx 做了一个代理。在配置的时候，花了比较长的时间，服务器并不是我们的，也不清楚具体他们配置了什么，各种尝试中，学会了 location 里面，末尾加和不加 / 是不一样的，telnet、ping 各种命令。
最后发现当前那台服务器访问不了他们给的 IP 地址，而我们的应用和 Nginx 服务在一台机器上，干脆用 127.0.0.1 的方式代理，果然行得通。
微信分享
一开始，我认为微信分享只需要加载微信的那个 JS-SDK 就可以了，没想到还要做认证、签名等。
前后端都是第一次做微信相关的，虽然以前自己尝试用 Node.js 做一些微信开发的 Demo，流程是了解的，但这次是 Java，完全不会，只好现找代码给后端。
中间这个代码出问题了，有的是拼写错误，有的是数据格式错误。总之，克服很多错误，终于签名正确了，可还是没有正确的调用到分享接口。
后来才发现，对方提供的公众号没有认证，没有认证，没有认证。这没法做了。
总结
这次的任务，算是对以前做移动端进行了一次梳理。用到了没有用过的东西，也把一些有点熟悉的工具拼凑成功了，也踩下了各种情况不明的坑。
能够依靠自己通过 webpack + webpack-dev-server 搭建一个单/多页开发环境，遗憾的是代码打包上面，没有用到 webpack 的 dll 方式。
通过 postcss 对 Less 进行编译，对单位进行转换等，比较现代化的开发。
实实在在的搞了一次微信开发，哈哈。
转载请注明：OnlyLing - Web 前端开发者 » 一次移动端适配及上线的思考