详解vue移动端项目代码拆分记录


Posted in Javascript onMarch 15, 2019

撸一套vue多端共用,非常适合需要快速且全面上线的项目。但是多端共用一套vue代码,由于平台间的互相限制,每端在某些业务例如支付分享等是完全独立的代码,每个平台的支付方式也会有所差异,造成在这些业务的实现过程中会有太冗余的“if else”判断。所以为了提高代码的复用性、扩展性,可以将代码拆分,以-小程序和App两端举例,一份部署到小程序,一份部署到App(Android&Ios)。

首先代码拆分应该保证本地开发的时候只有一套代码,提取所有公共页面,并且分别提取小程序和app的独立JS方法,避免开发完小程序端vue,然后粘贴复制到App端的繁琐操作。
直接看图最清晰,拆分前目录结构:

拆分后目录结构:

详解vue移动端项目代码拆分记录

拆分前项目目录结构

详解vue移动端项目代码拆分记录

拆分后项目目录结构

目录拆分好之后,开始拆分代码。由于部署到生产环境的时候只能App端部署App端,小程序端部署小程序端,那么在本地开发过程中为了调试不同端的页面就需要进行路由配置,所以对路由配置文件route.list.js做了修改:
拆分代码前,route.list.js中将所有页面JS文件的相对路径放在一个数组里:

define(
 [
  ‘../xxx/xxx/user.js',
  ‘../xxx/xxx/goods.js',
  …
  …
 ]
)

拆分后,route.list.js中按public、mobile_app、wechat_mini 分别定义数组,这样如果现在正在开发小程序端的vue,那么则将public和wechat_mini的数组合并到一起,开发app端的vue则将public和moblie_app的数组合并到一起,合并数组使用ES6扩展运算符(…)。

var public_goods = [];
var mini_goods = [];
var app_goods = [];
var fun = (isWechatMini) => {
  if(isWechatMini){
    return [
     …public_goods,
     …mini_goods
    ]
  } else {
    return [
     …public_goods,
     …app_goods
    ]
  }
}
define(
  fun(true)
)

将公共部分和独立部分的页面拆分之后,进一步分析代码:App端和小程序端相互独立的大多是支付功能,分享功能等涉及到需要原生处理的地方,并且会在多个页面,多个业务中出现,那么就将App独立的vue代码拆分到一个公共JS中(app-common.js),将小程序独立的vue代码拆分到一个公共JS中(mini-common.js),在需要的页面中引入即可。就商品购买支付功能为例:

拆分前:

define([‘vue', ‘axios', ‘text!/File/Html/goods/goodsPay.html'], (vue, axios, Template) => {
  var App = {
   data() {

   },
   template: Template,
   mounted() {

   },
   methods: {
     pay(){
       if(isWechatMini){
         //这里是小程序支付
       } else {
         //这里是App支付
       }
     }
   }
  };

  return{
    app: App
  };
  
});

业务复杂的情况下,会有多层if else,代码太冗余。

拆分后:

小程序端的商品支付购买页面:

define([‘vue', ‘axios', ‘text!/File/Html/mini/goods/goodsPay.html', ‘mini-common'], (vue, axios, Template, common) => {
  var App = {
    data() {

    },
  template: Template,
  mounted() {

  },
  methods: {
     pay(){
       //调用mini-common中定义的支付方法
       common.pay();
     }
  }
 };

 return{
  app: App
 };
  
});

App端的商品购买支付页面只需要将引入的JS换成app-common即可:

define([‘vue', ‘axios', ‘text!/File/Html/app/goods/goodsPay.html', ‘app-common'], (vue, axios, Template, common) => {
  var App = {
    data() {
    },
  template: Template,
  mounted() {

  },
  methods: {
    pay(){
      //调用app-common中定义的支付方法
      common.pay();
    }
   }
  };
  return{
   app: App
  };
  
});

本地开发完后,部署到服务器只需要将public目录下和wechat_mini下的文件复制粘贴到打包工具打包即是小程序端的代码,public和mobile_app打包即是app端的代码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript注入技巧
Jun 22 Javascript
JavaScript 学习笔记(五)
Dec 31 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 #Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 #Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 #Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 #Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 #Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 #Javascript
详解React项目中碰到的IE问题
Mar 14 #Javascript
You might like
Apache设置虚拟WEB
2006/10/09 PHP
php数组去重实例及分析
2013/11/26 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
js中的string.format函数代码
2020/08/11 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
python next()和iter()函数原理解析
2020/02/07 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
python如何随机生成高强度密码
2020/08/19 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
Python-split()函数实例用法讲解
2020/12/18 Python
应届生护士求职信
2013/11/01 职场文书
体育教师自荐信范文
2013/12/16 职场文书
党章学习思想汇报
2014/01/14 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
党员违纪检讨书
2014/02/18 职场文书
李培根演讲稿
2014/05/22 职场文书
环保志愿者活动方案
2014/08/14 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
工作收入证明范本
2015/06/12 职场文书