Web SDK - Mobile支援使用者介面樣式的自訂。您可以根據需要自訂引導頁、證件採集頁、OCR結果編輯頁以及活體檢測頁的表徵圖、按鈕顏色、背景顏色等樣式。
Web SDK - Mobile UI自訂目前僅適配移動端整合模式，PC 端請查看Web SDK - PC UI自訂配置說明。
配置方法
根據配置模板，將自訂樣式的JSON字串，通過服務端的Initialize介面中的StyleConfig欄位傳給阿里雲服務端初始化後使用。
不傳對應配置則使用預設配置；不傳對應配置項的樣式則使用預設樣式。為了減少初始化請求的大小，建議只傳遞需要修改的配置，其他配置項保持阿里雲預設配置。
JSON字串中不可含有Regex中的特殊字元。
配置模板
const styleConfig = {
guidePage: {
backgroundColor: "white", // css顏色值
btnBgColor: "#fb5d01", // css顏色值
btnTextColor: "white", // css顏色值
btnShadow: "0 16px 32px 0 rgba(251, 115, 38, 0.3)", // css box-shadow
circle1Img: "", // 圖片連結
circle2Img: "", // 圖片連結
leftBorderImg: "", // 圖片連結
faceImg: "", // 圖片連結
ocrImg: "", // 圖片連結
shelterFromImg: "", // 圖片連結
lightImg: "", // 圖片連結
phoneImg: "" // 圖片連結
},
ocrPage: {
// ocr頁面背景顏色及不透明度
ocrBgColor: "rgba(2, 2, 2, 0.8)", // css rgba
tipColor: "white", // css顏色值
maskColor: "rgba(2, 2, 2, 0.7)", // css rgba
backIconImg: "", // 圖片連結
submitIconImg: "", // 圖片連結
ocrPhotoBorderImg: "", // 圖片連結
albumIconImg: "" // 圖片連結
},
ocrResultPage: {
backgroundColor: "white", // css顏色值
topTipBgColor: "white", // css顏色值
topTipTextColor: "black", // css顏色值
ocrTextColor: "#333333", // css顏色值
inputBgColor: "#f7f7f7", // css顏色值
btnBgColor: "#fb5d01", // css顏色值
btnTextColor: "white", // css顏色值
maskColor: "rgba(2, 2, 2, 0.7)", // css rgba
backIconImg: "" // 圖片連結
},
facePage: {
backgroundColor: 'white', // css顏色值
topTipColor: "#333333", // css顏色值
processBarColor: ['#FFA500', '#FF8C00', 'rgba(237,119,49,1)'], // css顏色值的數組，長度為3，值分別對應進度條由淺到深的顏色值
maskColor: 'rgba(0, 0, 0, 0.6)', // css rgba
maskTipColor: "white", // css顏色值
backIconImg: "" // 圖片連結
}
};{
"guidePage": {
"backgroundColor": "white",
"btnBagColor": "#fb5d01",
"btnTextColor": "white",
"btnShadow": "0 16px 32px 0 rgba(251, 115, 38, 0.3)",
"circle1Img": "",
"circle2Img": "",
"leftBorderImg": "",
"faceImg": "",
"ocrImg": "",
"shelterFromImg": "",
"lightImg": "",
"phoneImg": ""
},
"ocrPage": {
"ocrBgColor": "rgba(2, 2, 2, 0.8)",
"tipColor": "white",
"backIconImg": "",
"maskColor": "rgba(2, 2, 2, 0.7)",
"ocrPhotoBorderImg": "",
"albumIconImg": "",
"submitIconImg": ""
},
"ocrResultPage": {
"backgroundColor": "white",
"topTipBgColor": "white",
"topTipTextColor": "black",
"ocrTextColor": "#333333",
"inputBgColor": "#f7f7f7",
"btnBgColor": "#fb5d01",
"btnTextColor": "white",
"maskColor": "rgba(2, 2, 2, 0.7)",
"backIconImg": ""
},
"facePage": {
"backgroundColor": "white",
"topTipColor": "#333333",
"processBarColor": [
"#FFA500",
"#FF8C00",
"rgba(237,119,49,1)"
],
"maskColor": "rgba(0, 0, 0, 0.6)",
"maskTipColor": "white",
"backIconImg": ""
}
}配置項說明
自訂頁面的顏色設定：SDK支援客戶傳入不同UI組件顏色色值實現顏色的替換。
自訂icon：指SDK支援客戶傳入不同icon或圖片資源實現效果替換。icon大小和位置不變。
自訂框樣式：指SDK支援客戶傳入不同資源檔實現效果替換。框大小和位置不變。
模組頁面 | 元素 | 說明 | 配置項 | 配置項說明 |
引導頁（僅限WebSDK） | 頁面背景顏色 | 無。 | guidePage: { backgroundColor: "", } | backgroundColor：CSS顏色值。 |
樣本圖 | 支援客戶替換樣本圖。 | guidePage: { circle1Img: "", circle2Img: "", leftBorderImg: "", faceImg: "", ocrImg: "", shelterFromImg: "", lightImg: "", phoneImg: "", } |
| |
按鍵背景顏色/按鍵字型顏色/按鍵下方陰影顏色 | 無。 | guidePage: { btnBgColor: "", btnTextColor: "", btnShadow: "", } |
| |
證件採集頁 | 頁面背景顏色 | 無。 | ocrPage: { ocrBgColor: "", } | ocrBgColor：CSS顏色值。 |
證件取景框的顏色 | 替換資源實現適配卡證、護照不同形狀和顏色的變化。 | ocrPage: { ocrPhotoBorderImg: "", } |
| |
證件取景框的樣式 | ||||
相簿icon | 替換資源實現樣式和顏色的變化。 | ocrPage: { albumIconImg: "", } |
| |
蒙層顏色/蒙層不透明度 | 無。 | ocrPage: { maskColor: "", } | maskColor：CSS rgba值。 | |
蒙層上方文案顏色 | 無。 | ocrPage: { tipColor: "", } | tipColor：CSS顏色值。 | |
退出icon | 替換資源實現樣式和顏色的變化。 | ocrPage: { backIconImg: "", } |
| |
提交icon | 替換資源實現樣式和顏色的變化。 | ocrPage: { submitIconImg: "", } |
| |
OCR結果編輯頁 | 頁面背景顏色 | 無。 | ocrResultPage: { backgroundColor: "", } | backgroundColor：CSS顏色值。 |
頂部提示背景色/頂部提示文字顏色 | 無。 | ocrResultPage: { topTipBgColor: "", topTipTextColor: "", } | topTipBgColor/topTipTextColor：CSS顏色值。 | |
OCR資訊項文字顏色 | 無。 | ocrResultPage: { ocrTextColor: "", } | ocrTextColor：CSS顏色值。 | |
鍵入框背景色 | 無。 | ocrResultPage: { inputBgColor: "", } | inputBgColor：CSS顏色值。 | |
蒙層顏色/蒙層不透明度 | 無。 | ocrResultPage: { maskColor: "", } | maskColor：CSS rgba值。 | |
退出icon | 替換資源實現樣式和顏色的變化。 | ocrResultPage: { backIconImg: "", } |
| |
按鍵背景顏色/按鍵字型顏色 | 無。 | ocrResultPage: { btnBgColor: "", btnTextColor: "", } | btnBgColor/btnTextColor：CSS rgba值。 | |
活體檢測頁 | 頁面背景顏色 | 無。 | facePage: { backgroundColor: "", } | backgroundColor：CSS顏色值。 |
標題《拿起手機，眨眨眼》字型顏色 | 無。 | facePage: { topTipColor: "", } | topTipColor：CSS顏色值。 | |
取景框周圍進度條的顏色 | 無。 | facePage: { processBarColor: ['', '', ''], } | processBarColor：CSS顏色值的數組，長度為3，值分別對應進度條由淺到深的顏色值。 | |
蒙層顏色/蒙層不透明度 | 無。 | facePage: { maskColor: "", } | maskColor：CSS rgba值。 | |
蒙層上方文案顏色 | 無。 | facePage: { maskTipColor: "", } | maskTipColor：CSS顏色值。 | |
退出icon | 替換資源實現樣式和顏色的變化。 | facePage: { backIconImg: "", } |
|