整體介紹
1.1 主要框架
vue+vuex+vue-router+cordova+axios+cube-ui...
1.2 主要思路
- js與html分離
- 基類(lèi)抽離、業(yè)務(wù)模塊抽離（工具類(lèi)登钥、混入娶靡、typescript繼承）
- 統(tǒng)一html根標(biāo)簽
- 頁(yè)面管理
- 換膚（h5和原生titlebar）、titlebar的動(dòng)態(tài)配置
2 主要功能簡(jiǎn)介
2.1 頁(yè)面管理
- card
- card-index：//頁(yè)面索引塔鳍，與管理平臺(tái)配置的id一致
- card-constants：//定義path和title
- card-directory：//目錄數(shù)組献幔，每項(xiàng)包括cardId趾诗、path（主ui）和副ui組件
示例:
1.定義頁(yè)面Id
//card-index.js
export const cardId = {
CARD_AGREEMENT_SIGN: 'K9006', // 協(xié)議簽署
}
2.定義頁(yè)面path和title
//card-constants.js
export const cardConstants = {
router: {
card: {
......
agreement: {
AGREEMENT_SIGN: '/card-agreement-sign' // 協(xié)議簽署
}
},
// 標(biāo)題常量
title: {
......
CARD_AGREEMENT_SIGN: '協(xié)議簽署'
}
}
3.定義頁(yè)面目錄
//card-directory.js
// 總目錄
export const cardInfoList = [
......
{
cardId: cardId.CARD_AGREEMENT_SIGN, // 協(xié)議簽署
path: cardConstants.router.card.agreement.AGREEMENT_SIGN,
//path指向的組件是在router注冊(cè)的
//component 頁(yè)面的第二種ui，動(dòng)態(tài)加載郑兴，無(wú)需router注冊(cè)情连，跟kcop項(xiàng)目需求有關(guān)
component: (resolve) => {
require(['@/views/card/agreement/sign/ChatSign.vue'], resolve)
}
}
]
4.注冊(cè)路由
//router.js
export default [
......
{
path: cardConstants.router.card.agreement.AGREEMENT_SIGN, // 協(xié)議簽署
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隨便寫(xiě)，能實(shí)現(xiàn)ui就行
7.sign.js
- 網(wǎng)絡(luò)示例：見(jiàn)2.2示例
- native交互：見(jiàn)2.3示例
- 頁(yè)面跳轉(zhuǎn)如下：
this.nextCard(true, cardId.CARD_AGREEMENT_SIGN)
//具體見(jiàn)基類(lèi)的`nextCard`
2.2 網(wǎng)絡(luò)
- bean
- request-bean //請(qǐng)求對(duì)象，填充了基本參數(shù)
- service
- http-utils
- rsa //加解密
- security //加解密
- storage
- http //網(wǎng)絡(luò)請(qǐng)求基類(lèi)：①獲取加密因子②請(qǐng)求接口
- kcb-service //項(xiàng)目所需網(wǎng)絡(luò)状囱，可以按業(yè)務(wù)模塊拆分
示例：
//kcb-service.js
// 獲取影像頁(yè)數(shù)
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交互
詳情見(jiàn)cordova-help
原生的代碼見(jiàn)KwlSDK項(xiàng)目的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交互：動(dòng)態(tài)配置titlebar
詳情見(jiàn)js2native-help
原生的代碼見(jiàn)KwlSDK項(xiàng)目的KwlWebActivity和KwlTitleBar
-
createTitleData：中間文字亭枷、顏色奶栖、背景色 -
createBackButton：返回的圖標(biāo)门坷、提示袍镀、處理事件 -
createRightButton：右邊的圖標(biāo)或文字、顏色绸吸、處理事件设江、url -
createRefresh：刷新
可以在mounted方法中設(shè)置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標(biāo)簽
布局的根標(biāo)簽統(tǒng)一用<KwlPage>，詳情見(jiàn)KwlPage.vue码俩，統(tǒng)一管理h5頁(yè)面的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 其它
以混入的方式抽離基類(lèi)稿存，項(xiàng)目示例：
image-mixin（影像相關(guān)） -> kcb-mixin（業(yè)務(wù)） -> base-mixin（基類(lèi)）
3 后續(xù)優(yōu)化
- 使用typescript編寫(xiě)瓣履，更好迎接vue3.0、用繼承關(guān)系替代混入袖迎，封裝更合理
- 頁(yè)面參數(shù)可以更方便配置燕锥，頁(yè)面路由動(dòng)態(tài)下發(fā)
- 對(duì)外輸出kwl的組件打包成npm悯蝉，雙向視頻、上傳影像等
