【开发方案】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 目录下。