【开发方案】KaiOS 新增APN信息字段的代码实现

本文主要是介绍【开发方案】KaiOS 新增APN信息字段的代码实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

背景

KaiOS 基线不提供MCC、MNC、MVNO和bearer等信息的显示，因此在APN详情页无法查看单条APN的这些信息，跟Android 原生逻辑存在差异，需要自行实现。

代码

模块：gaia/apps/settings

文件：

js/panels/apn_editor/apn_editor_const.js 添加界面字段常量
elements/apn_editor.html 添加UI显示字段
js/panels/apn_editor_tct/apn_editor.js 填充数据

apn_editor_const.js 数据字段定义

//js/panels/apn_editor/apn_editor_const.js /*** The apn editor const*/
define(() => {const APN_PROPERTY_DEFAULTS = {//kaios默认支持carrier: '',apn: '',user: '',password: '',proxy: '',port: '',mmsc: '',mmsproxy: '',mmsport: '',authtype: 'notDefined',types: ['default'],protocol: 'notDefined',roaming_protocol: 'notDefined', //eslint-disable-line//客制化新增字段 mcc: '',mnc: '',mvno_type: 'notDefined',mvno_match_data: ''bearer:''};const APN_PROPERTIES = Object.keys(APN_PROPERTY_DEFAULTS);});

apn_editor.html 布局

<element name="apn_editor" extends="section"><template><gaia-header data-href="#apn_list"><h1 slot="text" data-l10n-id="apn-editor-header"></h1></gaia-header><div class="panel"><ul role="menu" class="apnSettings-advanced"><!--Kaios原生字段-->  <li role="menuitem"><p data-l10n-id="apn-name" class="input-description"></p><input type="text" x-inputmode="verbatim" class="carrier" dir="auto" maxlength="100" /></li><li role="menuitem"><p data-l10n-id="apn" class="input-description"></p><input type="text" x-inputmode="verbatim" class="apn" dir="auto" maxlength="100" /></li><!--新增自定义字段，根据模板新增li列表--><li role="menuitem"><p class="input-description">MCC</p><input type="text" x-inputmode="verbatim" class="mcc" dir="auto" maxlength="100" /></li><li role="menuitem"><p class="input-description">MNC</p><input type="text" x-inputmode="verbatim" class="mnc" dir="auto" maxlength="100" /></li><li role="menuitem"><p class="apn-mvno-type">Mvno Type</p><span class="button icon icon-dialog"><select class="mvno_type" data-track-class="apn-mvno-type"><option value="notDefined" data-l10n-id="apn-protocol-notDefined"></option><option value="gid">GID</option><option value="spn">SPN</option><option value="pnn">PNN</option><option value="iccid">ICCID</option><option value="ecid">ECID</option></select></span></li><li role="menuitem"><p class="input-description">Mvno Match Data</p><input type="text" x-inputmode="verbatim" class="mvno_match_data" dir="auto" maxlength="100" /></li></ul></div><panel data-path="panels/apn_editor_tct/panel"></panel></template>
</element>

apn_editor.js 数据加载

//apn_editor.js/*** The apn editor module*/
'use strict';
define(function(require) { //eslint-disable-line//ApnEditor对象function ApnEditor(rootElement) {this.inputElements = {};APN_PROPERTIES.forEach(function input(name) {this.inputElements[name] = rootElement.querySelector(`.${name}`);}, this);}//原型的构造方法和内部接口ApnEditor.prototype = {convertValue(value, converter) {if (converter) {return converter(value);}return value;},//客制化方法填充界面详情fillInputElementsNoneEditable: function ae_fillInputElementsNoneEditable(inputElements, apnItem, editable) {let iccInfo = getIccInfo(0);let mcc = iccInfo && iccInfo.mcc;let mnc = iccInfo && iccInfo.mnc;let gid1 = iccInfo && iccInfo.gid1;mcc = mcc || '000';mnc = mnc || '00';gid1 = (gid1 === undefined || gid1 == null || gid1 == '') ? '' : gid1;gid1 = gid1.toLowerCase();log('fillInputElementsNoneEditable: mccmnc=' + mcc + mnc + ' gid1=' + gid1+ ' iccInfo=' + iccInfo);let bearer = '1|2|3|4';bearer = apnItem.bearer;  //默认拿到的bearer是十进制的，需要转换APN_PROPERTIES.forEach(function input(name) {const inputElement = inputElements[name];if (inputElement) {let value = (apnItem.apn && apnItem.apn[name.toLowerCase()]) || APN_PROPERTY_DEFAULTS[name];//填充数据if (name == 'mcc') {value = value || mcc;} else if (name == 'bearer') { value = value || bearer;}inputElement.value = this.convertValue(value,VALUE_CONVERTERS.TO_STRING[name]);}}, this); //APN_PROPERTIESAPN_PROPERTIES},//新增APN时填充默认数据fillInputElements(inputElements, apn) {let iccInfo = getIccInfo(0);let mcc = iccInfo && iccInfo.mcc;let iccInfo = getIccInfo(0);let mcc = iccInfo && iccInfo.mcc;mcc = mcc || '000';//定制默认值let bearer = '1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20';APN_PROPERTIES.forEach(function input(name) {const inputElement = inputElements[name];if (inputElement) {inputElement.removeAttribute('disabled');let value =(apn && apn[name.toLowerCase()]) || APN_PROPERTY_DEFAULTS[name];if (name == 'mcc') {value = mcc;} else if (name == 'bearer') {if (bearer != '') {value = bearer; //定制默认值}}}}inputElement.value = this.convertValue(value,VALUE_CONVERTERS.TO_STRING[name]);}}, this);},//新建和查看 APN是不同的APNEditor内容。新增时需要填充默认数据，用fillInputElements//新建APNcreateApn(serviceId, apnItem) {this.fillInputElements(this.inputElements, apnItem.apn);return ApnEditorSession({ serviceId, mode: 'new' },this.inputElements,apnItem);},//编辑APNeditApn(serviceId, apnItem, editable) {this.fillInputElementsNoneEditable(this.inputElements, apnItem, editable); //客制化可编辑性return ApnEditorSession({ serviceId, mode: 'edit' },this.inputElements,apnItem);}};//最后返回对象return function apnEditor(rootElement) {return new ApnEditor(rootElement);};)};

这篇关于【开发方案】KaiOS 新增APN信息字段的代码实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！