Vue活动页框架搭建

相信大家都有接到过做活动页的需求吧，并且而且大部分情况下是基于微信环境的。在这样的背景下，vue方便快捷的生产模式似乎比其他框架要更占优。

一般开发一个活动单页需要用到的技术有Vue/Vue-router/axios/sass/webpack，看似好像挺多的，但其实vue-cli都帮我们把这些问题解决了，该配的配置也配好了，只需要根据自己的需要变更或增添一些配置即可快速搭建一个可用的活动页框架。下方有关于活动页框架搭建的传送门↓↓

开发活动页时路由的相关用法

一个移动端活动页开发的是否成功，个人认为体验是一大因素，既然谈到了体验那么路由自然就不可忽略了，好的路由跳转能够给整个活动页加分许多，但是实际开发中，路由并不是那么的容易和我们的业务贴合，特别是在微信环境中。

本次活动页大部分时间都是耗在了路由坑里，无论是微信授权还是微信支付都是坑坑洼洼的，下方有关于活动页路由使用的传送门↓↓

关于这块还是想简单提提，活动页一般来说是少不了微信授权或是支付的，这时候如果能够复用主站的用户数据就爽很多了（特别是用户体验上），所以建议活动页有条件的话可以放在主站的域名下，为啥？可以共用某些东西呗~

在关于路由的文章中提及了base路径的用法，去解决非根路径指向index的问题，但是事实发现是不可行的（当然这是基于我这边的开发背景下不可行）。

浏览器总会在我的路径最后加上'/'导致微信支付无法正常调起（特别是安卓机），最终还是讲route中的path改成了相应的完整路径，以解决这个问题。

一开始在main.js中初始化了JSSDK，但发现这样无法在vue应用中很好的获取当前wxReady的状态，可能会导致微信分享出现问题。最终还是独立出了一个component用来加载微信的JSSDK并且监听$route的状态，每次route变化时都重新设置微信分享。

将初始化JSSDK的方法放到component中有一个好处就是能够用到props和state，在应对某些需求的时候效果拔群。

刚开发的时候将支付相关的方法都放到了Utils.js中了，但随着开发的进行，页面深度越来越深，并且触发支付的姿势也越来越多种多样了，最终还是决定将支付相关的代码剥离开来，放到Pay.vue这个组件中，挂载在顶层父组件中，并交由vuex来处理支付逻辑。

最后给大家看看这次项目的目录结构，虽然估计还是挺多坑的，但还是希望能有所帮助。

这次不仅是js我建立了Utils，在scss上我也尝试设立一个类似的"公用库"里面存放一些关于px2rem的方法以及一些常用的mixin，试验效果还是不错的。

另外，无论在page层级还是component层级的开发，只要项目不是特别大型，我都建议将html、css、js都放到同一个文件夹内，倘若用到图片资源甚至也可以放在同一文件夹下，这样一来，如果项目日益变大，它的效果就出来了。

上面提及的微信JSSDK与支付的component都写在了components文件夹内方便以后维护的同学"顾名思义"。

这也算是少数几个由一人独自解决的中小型活动页了，这一周多下来工作量还是比较饱和的~~（虽然都是在查文档）~~。其实不仅仅是在项目搭建和逻辑耗费精力，在页面的设计稿还原上也是花了不少时间的，毕竟涉及到了多列表以及横纵列表混合，并且页面的信息量十分巨大，布局写起来也是令人窒息的。

等到同事们配完需要展示的内容，希望能在这里展示给大家看看吧，谢谢阅读~