背景描述
由于公司項(xiàng)目的需求龄章，項(xiàng)目中會(huì)遇到各種各樣的表單，但是表單樣式幾乎都是統(tǒng)一的，考慮將所有的樣式輸入或者展示組件封裝入自定義form組件內(nèi)咳榜，form組件自己處理是否全部的必填項(xiàng)填寫(xiě)完畢，生成對(duì)應(yīng)的respontBody,檢驗(yàn)用戶的輸入負(fù)責(zé)是否符合規(guī)范爽锥，具體每個(gè)子頁(yè)面的展示和單獨(dú)的數(shù)據(jù)源處理是單獨(dú)的js去處理涌韩。由于之前做移動(dòng)端開(kāi)發(fā)，做過(guò)類似的封裝所以做了一下封裝嘗試氯夷，效果還錯(cuò)臣樱。
Aug-19-2020 11-10-41.gif
代碼思路講解
1.先構(gòu)建自己的form組件
通過(guò)Behavior共用代碼路由到配置項(xiàng)js文件
{
'title': '車系', // 標(biāo)題
'require': true, //是否必填項(xiàng)
'value': -1,//組件的值后面會(huì)轉(zhuǎn)為數(shù)據(jù)
'type': 'picker', //組件類型，標(biāo)識(shí)時(shí)那種組件
'subType': 'seclector', //組件的次級(jí)分類
'placeholder': '請(qǐng)選擇',
'regular': '',//校驗(yàn)規(guī)則
'error': '',//錯(cuò)誤提示
'apiKey': 'dartment',//上傳接口時(shí)候的key
'index': 5,//在表單中的下標(biāo)
'hidden': false,//是否隱藏
'options': [
],//數(shù)據(jù)源
},
//當(dāng)個(gè)picker組件form.wxml的樣式示例
<!-- picker組件分為date和配置項(xiàng)選擇 -->
<view wx:elif="{{item.type === 'picker'}}">
<view wx:if="{{item.subType === 'date'}}">
<picker mode="date" start="{{item.startDate}}" end="{{item.endDate}}" bindchange="pickerVauleChange" id="{{index}}">
<view class="picker-back {{item.value ? 'normal-font' : 'gray-font'}}">
<view class="we-picker-flex">
<text class="cell-title">{{item.title}}</text>
<i class="red-font-picker" hidden="{{item.require}}">*</I>
</view>
<view class="picker {{item.value ? 'normal-font' : 'gray-font'}}">{{item.value ? item.value :item.placeholder}}
<i class="csyfont csyxiayiye i"></I>
</view>
</view>
</picker>
</view>
<view wx:else>
<picker mode="selector" range="{{item.options}}" bindchange="pickerVauleChange" range-key="label" id="{{index}}" value="{{item.value}}">
<view class="picker-back">
<view class="we-picker-flex">
<text class="cell-title">{{item.title}}</text>
<i class="red-font-picker" hidden="{{item.require}}">*</I>
</view>
<view class="picker {{item.value > -1 ? 'normal-font' : 'gray-font'}}">{{item.options[item.value] ? item.options[item.value].label :item.placeholder}}
<i class="csyfont csyxiayiye i"></I>
</view>
</view>
</picker>
</view>
</view>
效果如下：
截屏2020-08-19 上午11.21.20.png
2.通過(guò)behaviors引入共用的代碼和共用屬性
代碼示例:
Component({
options: {
addGlobalClass: true // 等價(jià)于styleIsolation: 'apply-shared'
},
behaviors: [require('../../behavior/route/route.js')], // 引入公共代碼
externalClasses: ['my-class'],
properties: {
extraData: {
type: Object,
value: {}, //其他的子頁(yè)面需要的數(shù)據(jù)類型
observer: '__extraData'
},
saveData: {
type: Boolean,
value: false,
observer: '__saveRequest'//父類發(fā)起了保存操作腮考，會(huì)順序講item.value和item.apiKey相結(jié)合并觸發(fā)提交
},
extraInput: {
type: Array,
value: [],
observer: '__exraInput'
}
},
data: {
datasource: [],//數(shù)據(jù)源
emptyAry: [], //所有重要的下標(biāo)
allInput: false,//是否全部填寫(xiě)完畢
ativeIndex: 0,
vaild: [],//需要校驗(yàn)規(guī)則雇毫，輸入是否合法
requestData: {} //需要默認(rèn)傳的值
},
}
3.rout.js到底做了什么？
module.exports = Behavior({
properties:{
// 指定單獨(dú)操作組件的數(shù)據(jù)源的文件夾名稱
behaviorCode:String,
// 文件名稱
behaviorModel:{
type:String,
value:''
}
},
data:{
behaviorSite:''
},
attached:function(){
let code = this.data.behaviorCode || this.data.behaviorModel
this.setData({
behaviorSite: require('../../behavior/' + this.data.behaviorModel + '/' + code + '.js')//引入指定文件
})
},
methods:{
}
})
4.引用自定form的時(shí)候,通過(guò)behaviorCode和behaviorModel綁定操作當(dāng)前的form的js文件
<cs-form behaviorModel="repectionnew" behaviorCode="repectionnew" bind:allInput="allslected" saveData="{{saveData}}" ></cs-form>
5.在form里面對(duì)綁定的js操作
5.1 獲取數(shù)據(jù)源
this.data.behaviorSite.datasource(this, function (res) {
if (res) {
if (!util.isNull(that.data.datasource)) {
util.log("form:" + 'behaviorSite.datasource')
that.getEmptyAry(that.data.datasource)
}
} else {
that.getEmptyAry(that.data.datasource)
}
})
5.2面對(duì)需要調(diào)的單獨(dú)方法
只需要調(diào)用指定的js暴露出來(lái)的方法就好
