详解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 相关文章推荐
jquery时间下拉框小例子
Apr 15 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
PHP6 mysql连接方式说明
2009/02/09 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
php实现图片缩放功能类
2013/12/18 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
详解Vue的七种传值方式
2021/02/08 Vue.js
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
如何用python整理附件
2018/05/13 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
交通事故赔偿协议书范本
2014/04/15 职场文书
公司收款委托书范本
2014/09/20 职场文书
单身申明具结书
2015/02/26 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
关于教师节的广播稿
2015/08/19 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书