ipu结合vue开发

本文档为ipu框架结合vue开发的开发指导。 vue工程打包后生成文件,与ipu框架传统开发(基于jquery方式)并无区别,都是html+css+js等资源文件,把vue页面当作一个普通的ipu页面即可,需对vue工程调整以适于ipu框架环境运行。 demo工程下载

vue调整

需对vue工程的路由和打包设置进行调整才能让vue工程在ipu框架下运行。

路由模式设置

vue页面在ipu框架app中运行时,vur-router的路由模式目前只支持abstract模式(hash模式页面可跳转,但不返回,history模式不能工作),初始化路由组件时,mode属性设置为abstract(可参考demo工程 src\router\index.js)

const router = new VueRouter({
  mode: 'abstract',  
  routes
})

abstract下,没有默认路由跳转,需在代码中主动进行一次路由跳转,否则页面加载后未进入任何路由,页面一般显示为空白,可在App.vue组件的creat方法,代码主动进行一次路由跳转(可参考demo工程 src\App.vue)


if (this.$router.mode == 'abstract') {      // 路由为absract模式时,需要主动进行一次路由跳转
  this.$router.push({name: 'HelloWorld'});  // HelloWorld应调整为工程实际首页路由名称
}

vue打包设置

在ipu框架中,ipu页面加载路径都是相对web根目录,需在vue.config.js中配置publicPath,为vue打包后文件在server端工程相对web根目录下路径,路径不正确,页面的资源文件会加载失败

假设要服务端web目录为webapp,vue打后文件放在webapp/template/dist目录,参考配置如下(可参考demo工程 vue.config.js)

let isProd = process.env.NODE_ENV === 'production';
let vueFilePath = './template/dist';     // 项目中根据实际路径进行调整

module.exports = {
  lintOnSave: true,       // 移除js编译警告,默认值default,有警告时不能访问页面
  publicPath: isProd ? serverFilePath : '/',  // 打包时使用server工程中的目录位置,非打包使用默认配置
  filenameHashing: !isProd     // 打包生成文件是否hash,ipu更新静态资源不会移除历史已有资源,不使用hash,可减少客户端静态资源体积
};

调用ipu插件

在vue工程中调用ipu框架插件功能,需在页面引入ipu框架js,修改为vue工程js语法(es6),再进行调用

引入ipu框架js

将服务端工程中ipu框架js拷贝到vue工程(ipu框架有哪些js文件,可参考demo工程 ipuframe中js文件),请注意不同ipu版本中js文件存在一些差异,请以得到的服务端工程中框架js为准。

修改ipu框架为es6语法

ipu框架js是require.js加载,使用的是amd语法,需调整为es6语法,具体修改可参考demo工程框架js文件,demo工程将ipu框架设定需要暴露的4个对象。

export {
  Common,         // 通用业务方法封装
  Mobile,         // 框架对象,适配浏览器与app环境
  IpuMobile,      // 插件对象(部分版本中为WadeMobile对象)
  jcl             // Zepto扩展,增加了jcl.DataMap和jcl.DataSet数据格式,部分插件参数为jcl.DataMap或jcl.DatasetList
}

调用插件

在页面引入框架,即可使用框架js调用插件功能,可参考demo工程src\components\PlugDemo.vue

// 请求服务端数据接口
var param = new jcl.DataMap(); 
param.put("data", "testCommon");
Common.callSvc("SceneBean.dataRequestScene",param,function (resultData) { // 获取返回的数据
  if (typeof (resultData) == "string") {
    resultData = new jcl.DataMap(resultData);
  }
  alert(resultData);
});

其它说明

开发生产使用不同路由模式

在app环境只可使用abstract模式,在开发时,在浏览器中运行,可使用其它模式,可在vue工程设置环境变量,在开发模式中使用其它路由模式如hash模式,可参考vue环境变量和模式,demo工程参考 .env.development、.env.production,使用环境变量参考src\router\index.js

Android返回物理键响应

若需处理Android返回键,让页面进行后退,可参考下面代码

let _this = this
if (IpuMobile.isAndroid()) { // 若为APP环境Android环境运行
  IpuMobile.setKeyDownFlag("back", true);  // js负责处理手机物理键返回事件

  IpuMobile.setKeyListener("back", function () {
    // 此判断条件目前只适用于abstract模式,vue-router文档未有描述history描述,此属性非标准属性,不同vue-router版本可能有差异导致判断条件失效
    if (_this.$router.history.index) {  // 其它则调用路由后退
      _this.$router.back();
    } else {            // 退至起始页,则调用退出,
      IpuMobile.setKeyDownFlag("back", false);  // APP负责处理手机物理键返回事件
      IpuMobile.back();    // 若是返回别的页面,调用此方法
      //IpuMobile.close(true);    // 退出app调用此方法,有参数true,则会有确认框,否则没有确认框
    }
  });
}

本地代码在app中开发调试

在app中调试vue工程代码,需要先将vue工程打包后,放到服务端工程,再发布,再更新到客户端,整个周期较长,可使用下面方式:

  • 条件:有一个本地app,且可访问本机电脑web服务。
  • 新建一个ipu页面,在页面加入逻辑:如点击某个按钮后,页面跳转到本地vue工程开发时访问路径,请参考下面代码。
  • 将此页面在服务端发布更新,在app中打开此页面,点击按钮后,页面将进入本地vue工程页面,可这般调试vue功能开发,修改本地vue工程代码,不再需要在发布打包和在服务端发布。
    // 也可在页面内提供一个输入框,点按钮时让页面进入输入的地址
    location.href = 'http://10.13.13.79:8080/plugdemo'     // 可调整为本地实际路径
    

请求接口数据

若未使用ipu的插件请求数据接口,使用web的ajax请求,在app环境运行时页面为本地方式加载,需要服务端支持跨域,请求路径且需为完整url路径,不能使用相对路径。

demo工程说明

  • 本工程通过vue脚手架工程生生
  • 其中的框架js可参考,不要直接拷贝到工程,js的版本需与客户端服务端一致,否则可能插件功能可能失败出错等。

Copyright © aiipu.com 2017 all right reserved,powered by Gitbook该文件修订时间: 2020-09-07 11:24:09

results matching ""

    No results matching ""