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

背景

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

相关知识和编译调试方法

KaiOS APN Settings模块代码-CSDN博客

KaiOS 运营商相关文件operator_variant_manager.js代码功能和调试-CSDN博客

KaiOS Data业务代码调试验证方法（无需项目全编）-CSDN博客

KaiOS APN配置文件apn.json调试验证方法（无需项目全编）-CSDN博客

KaiOS APN 编辑页代码逻辑-CSDN博客

KaiOS 系统全编和模块单编-CSDN博客

代码

模块：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
    //新建APN
    createApn(serviceId, apnItem) {
      this.fillInputElements(this.inputElements, apnItem.apn);
      return ApnEditorSession(
        { serviceId, mode: 'new' },
        this.inputElements,
        apnItem
      );
    },
    //编辑APN
    editApn(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);
  };

)};