基于vue开发微信活动页-总结篇

历经1周半开发周期，我基于vue的微信活动页也算勉强上线了，经历了很多坑也填了很多坑，整体来讲仍是受益不浅的。

本篇会涉及的内容有：

• Vue活动页框架搭建
• 开发活动页时路由的相关用法
• 活动页与主站的用户互通
• 实际上线遇到的问题
• 本次开发总结

Vue活动页框架搭建

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

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

记从无到有的活动页开发

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

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

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

基于vue开发活动页-路由相关

活动页与主站的用户互通

关于这块仍是想简单提提，活动页通常来讲是少不了微信受权或是支付的，这时候若是可以复用主站的用户数据就爽不少了（特别是用户体验上），因此建议活动页有条件的话能够放在主站的域名下，为啥？能够共用某些东西呗~

实际上线遇到的问题

①vue-router中base路径的问题

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

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

②初始化微信JSSDK的方式

一开始在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文件夹内方便之后维护的同窗"顾名思义"。

总结

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

等到同事们配完须要展现的内容，但愿能在这里展现给你们看看吧，谢谢阅读~