整体介绍
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
-
createTitleData：中间文字、颜色、背景色 -
createBackButton：返回的图标、提示、处理事件 -
createRightButton：右边的图标或文字、颜色、处理事件、url -
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，双向视频、上传影像等
