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

 更新时间:2019-04-17 21:43:09   作者:佚名   我要评论(0)

撸一套vue多端共用,非常适合需要快速且全面上线的项目。但是多端共用一套vue代码,由于平台间的互相限制,每端在某些业务例如支付分享等是完全独立的代码,每

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

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

拆分后目录结构:

拆分前项目目录结构

拆分后项目目录结构

目录拆分好之后,开始拆分代码。由于部署到生产环境的时候只能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端的代码。

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

您可能感兴趣的文章:

  • 使用vue开发移动端管理后台的注意事项
  • vue插件mescroll.js实现移动端上拉加载和下拉刷新
  • 移动端(微信等使用vConsole调试console的方法
  • 利用Vconsole和Fillder进行移动端抓包调试方法
  • jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
  • jQuery实现适用于移动端的跑马灯抽奖特效示例
  • 如何封装了一个vue移动端下拉加载下一页数据的组件
  • 原生js实现移动端Touch轮播图的方法步骤
  • js实现移动端轮播图
  • 移动端使用CSS或JS判断横屏和竖屏的讲解

相关文章

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

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

    撸一套vue多端共用,非常适合需要快速且全面上线的项目。但是多端共用一套vue代码,由于平台间的互相限制,每端在某些业务例如支付分享等是完全独立的代码,每
    2019-04-17
  • JavaScript 正则表达式与字符串查找方法

    JavaScript 正则表达式与字符串查找方法

    首先提出一个问题: 如何取得一个给定的字符串substr在另一个字符串str中出现的次数? 字符串匹配,第一想到的就是正则表达式,但我们最常使用的字面量来创建
    2019-04-17
  • JavaScript email邮箱/邮件地址的正则表达式及分析

    JavaScript email邮箱/邮件地址的正则表达式及分析

    简言 在做用户注册时,常会用到邮箱/邮件地址的正则表达式。本文列举了几种方案,大家可以根据自己的项目情况,选择最适合的方案。 方案1 (常用) 规则定义如
    2019-04-17
  • 浅谈php使用curl模拟多线程发送请求

    浅谈php使用curl模拟多线程发送请求

    每个PHP文件的执行是单线程的,但是php本身也可以用一些别的技术实现多线程并发比如用php-fpm进程,这里用curl模拟多线程发送请求。php的curl多线程是通过不断
    2019-04-17
  • web下载文件和跳转的方法

    web下载文件和跳转的方法

    如果不通过JSP和servlet直接下载文件的话,可以通过web.xml文件来识别文件类型来进行下载。如果要通过servlet来下载的话,可以如下所示来进行下载: 但是这
    2019-04-17
  • ASP.NET Core WebApi中使用FluentValidation验证数据模型的方法

    ASP.NET Core WebApi中使用FluentValidation验证数据模型的方法

    介绍 验证用户输入是一个Web应用中的基本功能。对于生产系统,开发人员通常需要花费大量时间,编写大量的代码来完成这一功能。如果我们使用FluentValidation
    2019-04-17
  • Node.js + express基本用法教程

    Node.js + express基本用法教程

    本文实例讲述了Node.js + express基本用法。分享给大家供大家参考,具体如下: 这里来讲下 express 框架的使用,编译的环境是 VS Code ,这里我已经配饰了阿
    2019-04-17
  • 正则表达式re.sub替换不完整的问题及完整解决方案

    正则表达式re.sub替换不完整的问题及完整解决方案

    title: 正则表达式re.sub替换不完整的问题现象及其根本原因 toc: true comment: true date: 2018-08-27 21:48:22 tags: ["Python", "正则表达式"]
    2019-04-17
  • tomcat共享多个web应用会话的实现方法

    tomcat共享多个web应用会话的实现方法

    tomcat共享多个web应用会话的实现方法 问题 今天有位朋友问了个问题,大致是:tomcat下两个Java web,一个是商城,一个是直播,从商城登录后,再跳转到直播,
    2019-04-17
  • vue自定义指令用法经典实例小结

    vue自定义指令用法经典实例小结

    本文实例总结了vue自定义指令用法。分享给大家供大家参考,具体如下: 自定义指令: 一、属性: Vue.directive(指令名称,function(参数){ this.el -> 原生
    2019-04-17

最新评论