详解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 hasFocus使用实例
Jun 29 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 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
农民C键的运用技巧
2020/03/04 星际争霸
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
php中OR与|| AND与&&的区别总结
2013/10/26 PHP
php生成excel列序号代码实例
2013/12/24 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
js表单登陆验证示例
2016/10/19 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
Python多线程学习资料
2012/12/19 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
Python文件操作函数用法实例详解
2019/12/24 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
python实现字符串和数字拼接
2020/03/02 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
初中数学教学反思
2014/01/16 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
保护地球的标语
2014/06/17 职场文书
典型事迹材料范文
2014/12/29 职场文书
房屋产权证明书
2015/06/19 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
详解Python中下划线的5种含义
2021/07/15 Python