详解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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
小程序自定义单页面、全局导航栏的实现代码
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写的简易聊天室代码
2011/06/04 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
Python标准异常和异常处理详解
2015/02/02 Python
Python中DJANGO简单测试实例
2015/05/11 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
Python自定义一个异常类的方法
2019/06/27 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
浅谈Python __init__.py的作用
2020/10/28 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
MySQL面试题
2014/01/12 面试题
人力资源主管职责范本
2014/03/05 职场文书
伊索寓言教学反思
2014/05/01 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS
Python列表的索引与切片
2022/04/07 Python