kwl-vue

整体介绍

1.1 主要框架

vue+vuex+vue-router+cordova+axios+cube-ui...

1.2 主要思路

• js与html分离
• 基类抽离、业务模块抽离（工具类、混入、typescript继承）
• 统一html根标签
• 页面管理
• 换肤（h5和原生titlebar）、titlebar的动态配置

2 主要功能简介

2.1 页面管理

- card
  - card-index：//页面索引，与管理平台配置的id一致
  - card-constants：//定义path和title
  - card-directory：//目录数组，每项包括cardId、path（主ui）和副ui组件

示例:

1.定义页面Id

//card-index.js

export const cardId = {
  CARD_AGREEMENT_SIGN: 'K9006', // 协议签署
}

2.定义页面path和title

//card-constants.js

export const cardConstants = {
 router: {
    card: {
      ......
      agreement: {
        AGREEMENT_SIGN: '/card-agreement-sign' // 协议签署
      }
    },
 // 标题常量
  title: {
    ......
    CARD_AGREEMENT_SIGN: '协议签署'
   }
}

3.定义页面目录

//card-directory.js

// 总目录
export const cardInfoList = [
  ......
  {
    cardId: cardId.CARD_AGREEMENT_SIGN, // 协议签署
    path: cardConstants.router.card.agreement.AGREEMENT_SIGN,
    //path指向的组件是在router注册的
    //component 页面的第二种ui，动态加载，无需router注册，跟kcop项目需求有关
    component: (resolve) => {
      require(['@/views/card/agreement/sign/ChatSign.vue'], resolve)
    }
  }
]

4.注册路由

//router.js

export default [
  ......
  {
    path: cardConstants.router.card.agreement.AGREEMENT_SIGN, // 协议签署
    name: 'AgreementSign',
    component: (resolve) => {
      require(['@/views/card/agreement/sign/Sign.vue'], resolve)
    },
    meta: {
      title: cardConstants.title.CARD_AGREEMENT_SIGN,
      keepAlive: false
    }
  }
}

5.新建Sign.vue和sign.js

6.Sign.vue

js与html文件分离，便于管理，html和css随便写，能实现ui就行

7.sign.js

• 网络示例：见2.2示例
• native交互：见2.3示例
• 页面跳转如下：

this.nextCard(true, cardId.CARD_AGREEMENT_SIGN)
//具体见基类的`nextCard`

2.2 网络

- bean
  - request-bean  //请求对象，填充了基本参数
- service
  - http-utils
  - rsa  //加解密
  - security //加解密
  - storage
  - http //网络请求基类：①获取加密因子②请求接口
  - kcb-service  //项目所需网络，可以按业务模块拆分

示例：

//kcb-service.js

// 获取影像页数
static queryImagePageNum (bizType = null, requestBean) {
    return post('KIDM.D9900033', bizType, requestBean)
}

let requestBean = new RequestBean()
requestBean.addItem('F_OP_USER', this.userInfo.USER_CODE)
requestBean.addItem('USER_TYPE', this.userInfo.USER_TYPE)
requestBean.addItem('B_SNO', item.IMG_BSNO)
requestBean.addItem('SNO', item.SNO)
requestBean.addItem('IMG_CLS', item.IMG_CLS)
this.service.kcopService.queryImagePageNum(this.bizType, requestBean).then(result => {
   console.log(result)
}).catch(error => {
   console.log(error.MSG_TEXT)
})

2.3 与native交互

- native
  - cordova-help  //使用cordova交互
  - js2native-help  //使用js交互

2.3.1 cordova交互

详情见cordova-help
原生的代码见KwlSDK项目的KwlCordovaPlugin

示例：

//cordova-help.js

export default {
  // 电子签名
  uploadEleSign (params) {
    return cordovaExec('uploadEleSign', params, 'kwl')
  }
}

this.cordova.uploadEleSign(params).then((base64) => {
  let imageData = 'data:image/jpeg;base64,' + base64
  imageUtils.resizeImage(imageData).then(result => {
    this.imgPath = result
  })
}).catch(() => {
  this.toast('签名失败')
})

2.3.2 js交互：动态配置titlebar

详情见js2native-help

原生的代码见KwlSDK项目的KwlWebActivity和KwlTitleBar

1. createTitleData：中间文字、颜色、背景色
2. createBackButton：返回的图标、提示、处理事件
3. createRightButton：右边的图标或文字、颜色、处理事件、url
4. createRefresh：刷新

可以在mounted方法中设置titlebar

js2native.createTitleData(this.cardConstants.title.AI_CHAT, '#ffffff', '#2D75FA')
     .createBackButton('0', require('@/assets/ic_back.png'), '', '')
     .createRightButton('', '#242834', '1', targetUrl, require('@/assets/ic_history_do.png'))
     .createRefresh('')
     .create()

2.5 KwlPage标签

布局的根标签统一用<KwlPage>，详情见KwlPage.vue，统一管理h5页面的titlebar

export default {
  name: 'kwl-page',
  props: {
    showTitleBar: Boolean,
    title: String,
    rightTitle: String,
    rightIcon: String,
    content: {
      type: String,
      default: ''
    },
    right: {
      type: String,
      default: ''
    }
  },
  methods: {
    onBack () {
      this.$emit('onBack')
    },
    onRightClick () {
      if (this.rightTitle || this.rightIcon) {
        this.$emit('onRightClick')
      }
    }
  }
}

示例

 <kwl-page :title="title" 
            @onBack="onBack"
           :rightTitle="rightTitle" 
            @onRightClick="onRightClick">
 
            .....
 </kwl-page>

2.6 其它

以混入的方式抽离基类，项目示例：

image-mixin（影像相关） -> kcb-mixin（业务） -> base-mixin（基类）

3 后续优化

• 使用typescript编写，更好迎接vue3.0、用继承关系替代混入，封装更合理
• 页面参数可以更方便配置，页面路由动态下发
• 对外输出kwl的组件打包成npm，双向视频、上传影像等