【开发方案】KaiOS APN 设置界面菜单选项定制

一、模块需求介绍

参考：KaiOS APN Settings模块代码-CSDN博客

APN 列表页对每一条APN提供编辑、删除等功能 ，对APN整体提供reset重置功能。

当前需要隐藏reset，不允许用户重置APN。

二、代码实现方案

APN列表页在gaia/apps/settings/应用中，在panel.js设置菜单选项，接口registerSoftkey。

• gaia/apps/settings/elements/apn_lists.html 定义了 APN Settings界面的结构和布局
• gaia/apps/settings/js/panels/apn_list/panel.js 功能逻辑
• gaia/apps/settings/js/panels/apn_list/apn_template_factory.js 界面模板

  apn_list/panel.js

  /** * The apn list panel */'use strict';define(function(require) { //eslint-disable-line  const ListView = require('modules/mvvm/list_view');  const SettingsPanel = require('modules/settings_panel');  const ApnSettingsManager = require('modules/apn/apn_settings_manager');  const ApnTemplateFactory = require('panels/apn_list/apn_template_factory');  return function createApnSettingsPanel() {    //设置案件    function registerSoftkey() {      //1.左边：添加APN      const softkeyAdd = {        name: 'Add Apn',        l10nId: 'add-apn',        priority: 1,        method: () => {          onApnAddAction(serviceIdNum, apnType, rootElement);        }      };      //2.中间：选中APN      const softkeySelect = {        name: 'Select',        l10nId: 'select',        priority: 2,        method: () => {          if (!rootElement.querySelector('.focus label')) {            return;          }          const dataItemId = rootElement.querySelector('.focus label').dataset            .id;          const radioElement = rootElement.querySelector('.focus input');          onApnItemDefaultSet(            serviceIdNum,            apnType,            radioElement,            itemsOBJ[dataItemId]          );          SettingsSoftkey.hide();          returnTop();        }      };      //3.右边：编辑+删除（+重置）      const softkeyOption = [        {          name: 'Edit',          l10nId: 'edit',          priority: 7,          method: () => {            focusId = getFocusPos(rootElement);            const dataItemId = rootElement.querySelector('.focus label').dataset              .id;            onApnItemEdit(itemsOBJ[dataItemId]);          }        },        {          name: 'Delete',          l10nId: 'delete-apn',          priority: 8,          method: () => {            const dataItemId = rootElement.querySelector('.focus label').dataset              .id;            const focusItem = itemsOBJ[dataItemId];            const dialogConfig = {              title: { id: 'confirmation', args: {} },              body: {                id: 'delete-apn-confirm',                args: {                  apnName: focusItem.apn.carrier                }              },              cancel: {                l10nId: 'cancel',                priority: 1              },              confirm: {                l10nId: 'delete-apn',                priority: 3,                callback: () => {                  if (focusItem.apn.deletedCpApn === false) {                    focusItem.apn.deletedCpApn = true;                    ApnSettingsManager.updateApn(                      serviceIdNum,                      focusItem.id,                      focusItem.apn                    )                      .then(() => {                        onApnDelete(rootElement, focusItem.apn.carrier);                      })                      .then(() => {                        updateUI();                      });                  } else {                    ApnSettingsManager.removeApn(serviceIdNum, focusItem.id)                      .then(() => {                        onApnDelete(rootElement, focusItem.apn.carrier);                      })                      .then(() => {                        updateUI();                      });                  }                }              }            };            DialogHelper.show(dialogConfig);          }        }, //如果没有定制开发添加下面reset，可以去掉此逗号         //【开发方案】添加 reset 功能，重置APN        {            name: 'Reset to Default',            l10nId: 'reset-apn',            priority: 9,            method() {                resetApn();            }        }      ]; //softkeyOption       const softkeyParams = {        header: { l10nId: 'options' },        items: []      };      let focusLabel = rootElement.querySelector('.focus label');      if (!focusLabel) {        focusLabel = rootElement.querySelector('li label');      }      softkeyParams.items.push(softkeyAdd);      //最终判断菜单用的常量      if (focusLabel) {        softkeyParams.items.push(softkeySelect);        const dataItemId = focusLabel.dataset.id;        const focusItem = itemsOBJ[dataItemId];        if (          focusItem.itemCategory !== 'preset' ||          focusItem.itemApn.carrier !== 'Jio 4G'        ) {          // eslint-disable-next-line          softkeyParams.items.push.apply(softkeyParams.items, softkeyOption);        }      }      SettingsSoftkey.init(softkeyParams);    } //菜单功能函数接口 registerSoftkey    //更新菜单配置    function updateSoftkey() {      registerSoftkey();      SettingsSoftkey.show();    }    return SettingsPanel({    }); //SettingsPanel  }; //createApnSettingsPanel.});

  方案介绍

  在功能函数 registerSoftkey 中自定义菜单选项常量 softkeyOption_custom，然后最后通过判断你选择不同的菜单内容项。

        const softkeyOption_custom = [          {              name: 'More Info',              l10nId: 'more-info',              priority: 7,              method: function() {                  focusId = getFocusPos(rootElement);                  const dataItemId=rootElement.querySelector('.focus label').dataset.id;                  onApnItemMoreInfo(itemsOBJ[dataItemId]);              }          }      ];      if (focusLabel) {        softkeyParams.items.push(softkeySelect);        const dataItemId = focusLabel.dataset.id;        const focusItem = itemsOBJ[dataItemId];        if(ApnUtils.isOpSim()) { //自定义接口判断 , ApnUtils工具类自定义在js/module中softkeyParams.items.push.apply(softkeyParams.items, softkeyOption_custom );dump('apn_list/panel, OP require to remove Reset menu.');        } else {            softkeyParams.items.push.apply(softkeyParams.items, softkeyOption);        }      }

  apn_list/panel.js 导入个工具类可用如下方式：

  const ApnUtils = require('modules/apn/apn_utils');

  apn_utils.js

  • gaia/apps/settings/js/module/apn/apn_utils.js

    Note：新增接口的时候一定要同步加到return中，否则报错找不到函数：

    04-05 16:50:43.277  2048  2048 E Web Content: [JavaScript Error: "TypeError: ApnUtils.isOpSim is not a function" {file: "http://settings.localhost/js/panels/apn_list/panel.js" line: 291}]

    /* global ApnHelper, SimCardHelper *//** * The apn utilities */'use strict';define(function(require) { //eslint-disable-line  const ApnConst = require('modules/apn/apn_const');  const ApnItem = require('modules/apn/apn_item');  //新增函数判断运营商  function isOpSim() {    let connection = navigator.b2g.mobileConnections;    if (connection[0]) {      let iccId = connection[0].iccId;      if (iccId) {        let iccInfo = navigator.b2g.iccManager.getIccById(iccId).iccInfo;        if (iccInfo) {  let mcc = iccInfo.mcc;          let mnc = iccInfo.mnc;          let gid1 = iccInfo.gid1 + '';          let gid1Upper = gid1.toUpperCase() + '';          let mccmnc = mcc.concat(mnc);          dump('apn_utils: check isOpSim, mccmnc = ' + mccmnc + ', gid1 = ' + gid1);          if (gid1Upper.indexOf('BA01490000000000') == 0 && mccmnc === '311480') {              return true;          } else if (mccmnc === '31420') {              return true;          }        }      }    }return false;  }                      return {    getOperatorCode,    apnTypeFilter,    getDefaultApns,    getCpApns,    getEuApns,    generateId,    separateApnsByType,    isMatchedApn,    sortByCategory,    clone,    isOpSim  };});

    三、调试Debug

    push替换settings应用文件application.zip到设备快速调试。

    如果是kaios全编项目，则settings产物在 gaia/profile/webapps 目录下。