1.1.5 • Published 4 years ago

webprojectmobi v1.1.5

Weekly downloads
-
License
-
Repository
-
Last release
4 years ago

OpenKylin版本升级说明（支持CLI命令行图形交互）

npm start
************************************************
*          欢迎使用OpenKylin-v0.1.0            *
*                                             *
*           1) 面向移动mPaaS平台               *
*           2) 完全开源 优秀高效               *
************************************************
? 请输入配置文件名(xxx)
? 请选择要进行的操作 (Use arrow keys)
> 创建标准交易模板(create-template)
  本地开发测试(dev)
  分包配置初始化(init-pkg-conf)
  分包构建(pkg-build)
  公共资源包构建(common-pkg-build)
  生成修改日志

工程开发说明

安装node.js与本工程依赖包及启动

第一步：安装node.js

第二步：安装依赖

  • 通过 在本工程根路径上，执行npm install 命令完成依赖安装

第三步：初开发时，本地服务的配置

  • ? 请输入配置文件名 xxx (会在src/config下生成Config_xxx.json)
    • ? 创建标准交易模板(create-template)
      • 多页模版（kylin）
      • 单页模版（vue）

第四步：启动 本地开发测试(dev)

第五部：浏览器打开启动的页面

仓管使用

  • 地址：http://192.168.1.50/h5/mpass/
  • master（主分支）
    • dev （新建功能分支从这拉取）
    • dev.common (大家都可以使用的提交公共代码的分支)
      • dev.功能一（功能一分支）
      • dev.功能二（功能二分支）
  • 代码提交：使用npm commit进行规范化提交git日志
  • 每个功能分支下创建对应的readme功能.md文件，及时更新readme功能.md的内容。记录对应日期更新的东西。

工程文件说明

  • mpaas
    • Document/ --> 关于本工程的参考文档
      • 光大信用卡组件库BaseMandMobile_v1.0.1.pdf
    • lib/ ---> 工程化脚本目录
      • packages ---> 同node_moudules依赖，本地的依赖包
      • plugins ---> 前端工程配合的工具
      • cli.js ---> cli
      • com_pkg_build.js ---> build公共资源包脚本
      • command.js ---> command
      • generateChangeLog.js ---> 生成日志
      • verify-commit-msg.js ---> git日志
    • node_modules/ ---> 依赖包目录，可以由npm install命令生成
    • output/ ---> build之后输出的目录
      • package_common/ ---> 公共资源包
      • packages/ ---> 功能包
      • packinfo/ ---> 生成功能包配置信息
    • public/ ---> 公共的静态资源(慎放图片)
    • server/ ---> 配合前端工程的其他服务
      • Response/ ---> 配合的服务代理的资源
        • common_source/ ---> 公共资源
        • pweb/ ---> mock数据
    • src/ ---> 开发工程目录
      • baseComponents/ ---> mand mobile组件库源码
      • components/ ---> 改写mand mobile组件源码的组件
      • config/ ---> 开发、构建配置项
      • pages/ ---> 功能页
        • componentsExample/ ---> 常用组件示例
        • KylinTemplate/ ---> 单页模版
        • VueTemplate/ ---> 多页模版
      • styles/ ---> 公共css,方便开发。要进行优化
      • usually/ ---> 公共的方法、过滤器逻辑（要不停的进行优化添加）
      • Page.js/ ---> 如普通vue工程中的main.js
      • template.html/ ---> 如普通vue工程中的index.html
    • .cz-config.js/ ---> npm commit固定格式提交形式
    • .env/ ---> 开发环境配置文件
    • .env.production/ ---> 构建时的配置文件
    • vue.config.js/ ---> vue工程脚手架配置项

工程主要方法、配置

  • 跳往下一页（传参），下一页接受参数，使用jsApi
AlipayJSBridge_call("pushWindow", {
  // 要打开页面的 URL
  url: "xxx.html",
  // 打开页面的配置参数
  param: {
    readTitle: true, //自动读取 title
    showOptionMenu: false // 隐藏右边菜单
    // key1: "key1Value",//此处可以不写"自定义"参数了，passData写一份即可
    // key2: "key2Value"
  },
  // 用于给新开的页面传递参数，所有"自定义"参数统一放在passData下
  passData: { key1: "key1Value111111", key2: "key2Value222222" }
});
/*
* 在新开的页面使用AlipayJSBridge_startupParams方法，自定义传参也在返回结果res里。
* AlipayJSBridge_startupParams(res=>{
*  console.log("新页面接受传参：",res);
* })
*/

jsApi(pushWindow)
jsApi(popTo)

  • 返回按钮、完成页往回跳，两种方式：
jsApi(pushWindow) param{closeCurrentWindow: true} 销毁当前页，并跳转目标页
历史记录当前:[a,b,c]
c>d,加了这个参数并设置为true
历史记录之后:[a,b,d]

jsApi(popTo) {xx: xx}跳到某历史栈，如
历史记录当前:[a,b,c,d,e]
e>c，设置index:-2或urlPattern:c
历史记录之后:[a,b,c]
  • Config_xx.json 配置文件
**pages、packinfo必须配置**，如下
"pages": {
  "页面名": {
    "pack": "00000000",// 匹配packinfo，匹配到相同的packid，打到同一个包
    "login": true,//目前没用
    "name": "首页",//目前没用
    "title": "组件首页"//添加对应页面的title，mpaas能读取title，但是还是要求使用jsApi（setTitle）设置每个页面的标题
  }
}

"packinfo": {
  "00000000": {
    "packid": "00000000",
    "packname": "包名"
  }
}

config配置，如下

"config": {
  "commonSourcesUrl": "https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/3CD84AF031518_default/1.0/",//公共资源走那个url
  "logName": "README_xxxx.md",//生成的日志文件
  "ignore": [],// 排除那些页面启动
  "use": "" // 使用那个键值下的配置项
}
  • 阿里jsApi(rpc) 的外层封装
1.rpc添加四种状态（rpc、rpcCustom、rpcAsync、rpcNoLoading）
/**
  * jspApi (rpc) 可以有以下调用
  * 普通 （无loading，无拦截报错）
  */
AlipayJSBridge_call(
  'rpc',
  {
    operationType: url,
    requestData: [{ _requestBody: params }],//post请求
    requestData: [params],//get请求
    headers: {}
  },
  successFun,
  errorFun
);
/**
  * jspApi (rpcCustom) 可以有以下调用
  * 普通 （有loading，有公共拦截报错）
  */
AlipayJSBridge_call(
  'rpcCustom',
  {
    operationType: url,
    requestData: [{ _requestBody: params }],//post请求
    requestData: [params],//get请求
    headers: {}
  },
  successFun,
  errorFun
);
/**
  * rpcAsync(串联发送) 
  *  第一个接口loadingConfig: "start", 最后一个接口loadingConfig: "end"
  * （有loading，有公共拦截报错）
  */
AlipayJSBridge_call(
  'rpcAsync',
  {
    operationType: url,
    requestData: [{ _requestBody: { ...params, loadingConfig: 'start' } }],//post请求
    requestData: [{ ...params, loadingConfig: 'start' }],//get请求
    headers: {}
  },
  res => {
    AlipayJSBridge_call(
      'rpcAsync',
      {
        operationType: url,
        requestData: [{ _requestBody: params }],//post请求
        requestData: [params],//get请求
        headers: {}
      },
      res1 => {
        AlipayJSBridge_call(
          'rpcAsync',
          {
            operationType: url,
            requestData: [{ _requestBody: params, loadingConfig: 'end'  }],//post请求
            requestData: [{ ...params, loadingConfig: 'end' }],//get请求
            headers: {}
          },
          res2 => {},
          () => {}
        );
      },
      () => {}
    );
  },
  () => {}
);
/**
  *
  * rpcNoLoading 调用时不触发loading
  * （无loading，有公共拦截报错）
  */
AlipayJSBridge_call(
  'rpcNoLoading',
  {
    operationType: url,
    requestData: [{ _requestBody: params }],//post请求
    requestData: [params],//get请求
    headers: {}
  },
  successFun,
  errorFun
);
colorscore-jsdayjsnormalize.csspromise.allsettledservervuevue-class-componentvue-property-decoratorvue-qrvue-routervuexvuex-class
1.1.5

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

0.1.0

4 years ago