# 立即体验

• 扫码查看示例移动应用

# 如何学习

如果你没有接触前端，没有接触过javaScript、css、html、vue等前端基础内容，建议学习此教程的同时，补充学习以下内容：

• javaScript基础教程点击访问 (opens new window);

• css基础教程点击访问 (opens new window);

• html基础教程点击访问 (opens new window);

• vue.js官方教程点击访问 (opens new window);

• vue-router官方教程点击访问 (opens new window);

• vuex官方教程点击访问 (opens new window);

# 获取工程

从总工办获取产品，可直接联系统一开发平台助手-小宇点击查看联系方式,或发邮件联系产品负责人。邮箱: zhouby@yusys.com.cn

# 项目依赖软件安装

# 环境准备

1. 工具依赖

  node -v         # v14.16.0+ 
  npm  -v         # v6.9.0+
  yump          # 1.21.0+ (yump版本在工程中package.json文件中查看，若不存在或者版本号有误请联系我们)
  vue --version   # @vue/cli 4.1.1+ (可选)
  webpack-cli -v  # 3.3.10+ (可选)
  npx webpack -v  # 4.44.2+ (可选)

# 安装依赖

下载工程依赖包，安装yump-cli相关依赖包。

在工程终端运行如下命令：

yarn install

# yump-cli工具

  yarn add:module 模块名称     #新增一个业务模块

  yarn remove:module  模块名称 #删除一个业务模块

  yarn list:module            #列表现有的业务模块

  yarn update:module 模块名称  #更新模块入口相关文件

  yarn updateAll:module       #更新所有模块入口相关文件

  yarn upload       #上传离线包至管理平台

  
  

1. 若工程还未初始化，则使用命令yarn add:module 模块名称初始化工程模块。模块创建完成之后，模块中以下内容自动创建完成：

• 入口文件目录-src/modules/模块名
• router目录-src/router/模块名
• vuex目录-src/store/模块名
• 业务代码开发目录-src/views/模块名

2. 删除模块，则使用命令yarn remove:module 模块名称。

3. 更新模块内容则调用yarn update:module 模块名称，每个模块初始化完成之后可独立修改，也可通过修改template下module目录页面后，执行更新命更新模块。也可调用yarn updateAll:module,批量更新各个模块。需要注意的是模块内容更新时仅更新入口文件目录-src/modules/模块名，其他目录内容各模块间差异较大，因此不使用命令统一更新。

4. 查看当前所有模块则调用yarn list:module,控制台即输入当前模块列表

# 全局配置

# 编译配置

编译配置文件工程路径/yump.config.js中可对项目进行一些资源配置，buildEntries可指定编译模块, H5APP_APPID_MODULES_REFS可配置全量模块、H5APP_CDNS_CONFIG可按需配置cdn文件、H5APP_PLUGIN_CONFIG 可按需配置plugin文件等，比如指定编译模块和全量模块的配置如下：

1、 修改编译模块 根据工程路径/yump.config.js配置文件中buildEntries来进行指定需要打包的模块,未配置则全量打包

2、修改全量模块配置 根据工程路径/yump.config.js配置文件中H5APP_APPID_MODULES_REFS来配置项目全量的模块，每一个模块都需要在此配置中。

3、HAS_USE_CDN是否使用公共资源包(打包执行yarn build时关注)

# 采用公共资源包

工程路径/yump.config.js配置文件中HAS_USE_CDN变量设置成true,环境配置文件VUE_APP_COMM_RES_SRC变量为公共资源地址，打包完成后将在dist/packages目录下生成名称为此地址的域名加上www的公共资源包,在资源加载时，引用的资源将被拦截到此公共资源包。这种模式适用于项目中有多个开发模块，避免公共资源打包至每个模块中造成冗余。

# 不采用公共资源包

工程路径/yump.config.js配置文件中HAS_USE_CDN变量设置成false,所有资源会被打包至当前离线包中，所有资源从当前离线包中加载，适用于项目中只有一个开发模块，不和其他模块共享资源的情况。

# 环境配置

项目默认支持配置多环境打包配置，环境文件工程路径/.env中可对项目进行环境配置，项目中可以配置的环境有：.env配置本地开发环境.env.mock配置mock环境、.env.development配置开发环境、.env.production配置生产环境、.env.sit配置SIT测试环境、.env.uat配置UAT测试环境。

打包时可以选择不同的打包环境，以.env.development为例其中的配置项如下：

1、虚拟域名、服务地址、网关地址配置

VUE_APP_VIRTUAL_CDN_URL配置虚拟域名；VUE_APP_BASE_URL配置服务地址；VUE_APP_BASE_URL_GATEWAY配置网关地址；

2、公共资源相关配置

VUE_APP_COMM_RES_SRC配置公共资源包地址/可映射到本地离线包（了解详细配置），离线包报名为地址域名，www文件夹关键字不能更改，若更改需要修改打包逻辑；VUE_APP_PUB_MODULE_SRC配置公共模块资源地址；VUE_APP_CDN_URL配置线上CDN地址；

3、外壳配置

VUE_APP_H5CONTAINER_NAME 配置当前外壳类型，默认为宇信外壳配置为YUMP, 使用TMF外壳时配置为TMFcore, 使用mPaaS外壳时配置为Nebula,若对接者三种外壳之一时可配置，打包时可打包成对应平台要求的离线包。

4、调试模式配置

v-console可以帮助移动端进行调试，VUE_APP_DEBUG配置是否开启调试模式，开启时（为true时）可使用v-console

5、移动管理平台相关配置

VUE_APP_ID配置应用ID，用于管理平台关联的当前应用ID，VUE_APP_MGR_URL配置移动管理平台地址 VUE_APP_USERNAME配置移动管理平台账号

6、mock数据相关配置

VUE_APP_MOCK配置本地服务是否开启mock；VUE_APP_MOCK_SERVE配置离线包是否打包mock

# 运行工程

运行如下命令：

yarn serve

访问指定业务模块[moduleName]的页面,浏览器输入地址http://localhost:端口号/moduleName/index.html即可访问

# 前端脚手架打包

APP打包相关命令如下，

yarn build            # 在dist目录会生成不同业务模块目录,公共资源目录等
yarn build            # 打包所有业务模块及公共离线包，需要用户选择打包环境
yarn build:pro        # 打包生产环境离线包
yarn build:dev        # 打包开发环境离线包
yarn upload           # 上传离线包至移动管理平台

打包完成之后，在dist/packages目录下生成各个业务模块离线包, 公共资源离线包，如下图1,若使用v3.3.1.20221220.RELEASE版本及以上的前端框架,打包生成的离线包则带有当前打包环境后缀，如下图2

• 图1

• 图2

• 打包完成后的离线包，可在开发工具中上传至移动管理平台，使用此功能需要在脚手架中环境配置文件中配置移动管理平台地址, 应用ID, 登录账户，这三个配置项都随着代码版本下发时一同下发，配置完成后，使用步骤如下：

• 1. 终端命令中输入yarn upload命令，随后在弹出的选择向中选择上传的环境配置

• 2. 输入环境配置中用户名配置VUE_APP_USERNAME配置的用户名对应的密码

• 3. 选择需要上传的离线包，选择all即上传当前/dist/packages目录下所有离线包。

• 4. 上传成功后，可登录移动管理平台, 访问菜单离线包发布-》离线包管理 查看已上传的离线包,发布离线包时选择对应离线包即可。

# 打包成app

• 1. 如果是宇信内部使用，向产品团队申请云打包账号，然后登云打包系统打包app。点击访问宇信科技-云打包点击访问 (opens new window)
• 2. 如果是宇信外部客户使用，请访问客户私有化部署的云打包系统进行打包

# 发布离线包

完成上述步骤之后，生成各个业务模块离线包, 公共资源离线包之后，可到移动管理平台上发布新的离线包，各个平台离线包发布模式有所差异，若采用宇信科技-移动管理平台，操作步骤如下：

1.点击访问宇信科技-移动管理平台点击访问 (opens new window) ,每个项目有单独的移动管理平台账号，账号在项目版本下发时同时下发。

2. 登录之后，顺序点击移动发布、离线包发布，即可发布离线包页面。可新增离线包，发布离线包等。下面演示新增一个login离线包并发布的过程。

3.新增login离线包，点击左侧子应用中点击新增,在弹出框中输入子应用ID，子应用名称，一般和离线包压缩包一致即可，但不能重复。

4.离线包新建完成之后，在左侧的应用列表中选择需要上传的离线包，再点击右侧离线包发布的新增,打开离线包发布弹出框。填入相应信息。

5. 保存之后，生成一条待发布的离线包记录，选中记录，点击发布，即完成离线包发布流程。

6. 发布完成之后，在手机客户端重启应用，即可更新新的离线包内容。

# vant-ui基础组件库主题定制

Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以按照如下步骤进行主题定制。

• 1. 修改src\assets\style\vant-var.less主题变量，样式变量名参考vant-ui主题配置文件 (opens new window)
     
• 2. 配置环境配置文件中VUE_APP_VANT_CUSTOM_THEME变量为true

• 3. 确保vue.config.js中如下配置打开：

     module.exports = {
       css: {
         loaderOptions: {
           less: {
             lessOptions: {
               modifyVars: {
                   // 直接覆盖变量
                   // 'text-color': '#111',
                   // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
                   hack: `true; @import "src/assets/style/vant-var.less";`
               }
             }
           },
         },
       },
     };
     
     

# 页面跳转转场动画

在项目中可通过以下步骤开始内置的转场动画，动画形式主要参考iOS系统push页面时的过渡效果：

• 1.项目根目录下环境配置文件中设置VUE_APP_ROUTE_ANIMATE为true;

• 2. 动画形式主要参考iOS系统push页面时的过渡效果，也可在src\modules\模块名\App.vue中自定义动画效果。