文档中心

Link手机端界面定制

Link原生界面扩展,是对Link终端界面布局、功能的扩展。请注意所有的扩展配置都是在自动编译配置项里配置的, 是编译打包时配置。

1.在什么地方配置?


如上图所示,扩展配置对应是一份xml,所有界面拓展定义在这份xml里。

2.哪些界面可配置?

用户登陆界面


扩展方案:
1. 添加链接文字,例:增加忘记密码功能
2. 添加底部按钮(支持多个),按钮可执行内置的多种动作(动作详情由第三部分说明)
配置的xml如下:

<Login>
    <Menu type="main">
        <link text="忘记密码" textColor="white"
              actionParams="[OpenBuiltIn]&#10;key=ForgetPW"/>
        <button text="模拟体验" textColor="white"
            actionParams="[BingoTouch]&#10;url=https://link.bingocc.cc:8080/phone/experience.html"/>
        <button text="创建企业" textColor="white"
            actionParams="[BingoTouch]&#10;url=http://link.bingocc.cc:8088/phone/phone_register.html"/>
    </Menu>
</Login>

主界面选项卡


扩展方案:
1. 自定义选项卡的图标,文字,以及动作;
PS:内置图标请看附录1
配置的xml如下:

<Tabs>
    <item
    actionParams="[OpenApp]&#10; appCode=com.nfjd.platform &#10; appUrl=index.html"
    iconN="zsnj_tab_home_n"
    iconP="zsnj_tab_home_p"
    text="首页" />
    <item
    actionParams="[OpenBuiltIn]&#10;key=ServiceAccount"
    iconN="zsnj_tab_phone_n"
    iconP="zsnj_tab_phone_p"
    text="服务号" />
    <item
    actionParams="[OpenBuiltIn]&#10;key=App"
    iconN="zsnj_tab_app_n"
    iconP="zsnj_tab_app_p"
    text="应用中心" />
    <item
    actionParams="[OpenBuiltIn]&#10;key=Contact"
    iconN="zsnj_tab_contact_n"
    iconP="zsnj_tab_contact_p"
    text="通讯录" />
    <item
    actionParams="[OpenBuiltIn]&#10;key=MySelf"
    iconN="zsnj_tab_person_n"
    iconP="zsnj_tab_person_p"
    text="我" />
</Tabs>

通讯录顶部标题栏


扩展方案:
1. 可配置左右两边的按钮,指定图标以及点击后的动作
配置的xml如下:

<Contact>
    <Menu type="main" key="contact" text="通讯录">
        <headbar>
            <rightItem icon="contact_add_friends"
                actionParams="[BingoTouch]&#10;url=https://link.bingocc.cc:8080/phone/user.html"/>
        </headbar>
    </Menu>
</Contact>

通讯录主界面


扩展方案:
1. 群组、部门、服务号的列表项可自由组合;
配置的xml如下:

<Contact>
    <Menu type="main" key="contact" text="通讯录">
        <extend>
            <item text="部门" icon="contact_organization_icon_deep" actionParams="[OpenBuiltIn]&#10;key=OrganizationList" />
            <item text="服务热线" icon="zsnj_hotline" actionParams = "[OpenApp]&#10; appCode=com.nfjd.info &#10; appUrl=modules/page/fuwu_list.html" />
        </extend>
    </Menu>
</Contact> 

群组聊天界面


扩展方案:
1. 在“加号”下方添加扩展按钮,例如,添加“工作汇报”,点击可以打开应用,也可以打开原生界面。
扩展方式:服务端配置,同步后生效

名片详情界面

扩展方案:
1.个人名片详情中可配置 :TA的动态等,手机号,邮箱等根据服务端的数据增加和减少;(服务端实时数据)。


配置的xml如下:

<Contact> 
    <Menu type="child" key="usercard" text="用户名片">
       <extend>
         <item text="TA的动态" icon="contact_card_ic_blog"
         actionParams="[OpenBuiltIn]&#10;key=BlogCard"/>
       </extend>
    </Menu>  
</Contact>

2.群组名片详情中可配置:群动态、群公告、群签到等,可自由组合;


配置的xml如下:

<Contact>
    <Menu type="child" key="groupcard" text="群组名片">
        <extend>
            <item text="群动态" icon="contact_card_ic_blog"
                actionParams="[OpenBuiltIn]&#10;key=GroupBlogList"/>
            <item text="群公告" icon="contact_card_ic_bulletin"
                actionParams="[OpenBuiltIn]&#10;key=GroupAnnouncementList"/>
            <item text="群签到" icon="contact_card_ic_sign"
                actionParams="[OpenBuiltIn]&#10;key=CheckInList"/>
        </extend>
    </Menu>
</Contact>

3.服务号名片详情中可配置:最新动态等,可自由组合;


配置的xml如下:

<Contact>     
    <Menu type="child" key="accountcard" text="服务号名片">
        <extend>
            <item text="最新动态" icon="contact_card_ic_blog"
                actionParams="[OpenBuiltIn]&#10;key=BlogCard"/>
        </extend>
    </Menu>
</Contact>

我的界面


扩展方案:

  1. 当前界面的列表项,例如我的工作、我的动态、我的签到等都是可自由配置的;
  2. 二级界面“设置”,里面的列表项都是可以配置的。

配置的xml如下:

<MySelf>
    <Menu type="main">
       <group>
         <item text="我的工作" icon="my_work" actionParams="[OpenBuiltIn]&#10;key = MyWork"/>
         <item text="我的动态" icon="my_microblog"
         actionParams="[OpenBuiltIn]&#10;key = MyMicroBlog"/>
         <item text="我的应用" icon="my_app" actionParams="[OpenBuiltIn]&#10;key = MyApp"/>
       </group>
       <group>
         <item text="设置" icon="my_setting"
         actionParams="[OpenSubMenu]&#10;key=setting&#10;module=MySelf"/>
         <item text="关于" icon="my_about" actionParams="[OpenBuiltIn]&#10;key = MyAbout"/>
       </group>
    </Menu>
</MySelf>

3.可配置动作

动作是用户点击按钮、链接或者列表后执行的操作,是xml配置文件中的actionParams。
actionParams由两部分组成,一部分是动作指令(即中括号里内容),另一部分是动作参数(用&#10;分隔,由指令决定有什么参数)。
例:

[BingoTouch]&#10;url=https://link.bingocc.cc:8080/phone/user.html

动作指令

常用动作指令

  1. OpenBuiltIn : 打开原生功能,打开功能由参数key决定

    [OpenBuiltIn]&#10;key=MessageCenter
    
  2. OpenBulitinApp : 打开内置应用(打包编译时已加入)

    [OpenBulitinApp]&#10;appCode=crm&#10;appUrl=LinkOl/Modular/CRM/businessList.html
    
  3. OpenSubMenu : 打开动态构造的界面(即Menu标签里内容)

    [OpenSubMenu]&#10;key=setting
    
  4. BingoTouch : 打开BingoTouch应用

    [BingoTouch]&#10;url=http://www.bingolink.biz/
    
  5. OpenApp: 打开BingoTouch应用或原生应用
  6. OpenProcess: 打开自由流
  7. OpenChat : 打开聊天页面
  8. OpenUrl: 打开URL页面
  9. StartChat: 发起聊天
  10. StartCheckin: 打开签到页面

这些指令中,OpenBuiltIn最为关键,打开的功能取决于key,以下说明key类型:

  • MessageCenter : 消息中心界面
  • Contact : 通讯录界面
  • Discovery : 发现界面
  • MySelf : 我界面

通讯录

  1. Contact : 通讯录
  2. GroupList : 群组列表
  3. GroupAnnouncementList: 群公告列表
  4. OrganizationList : 部门列表
  5. ServiceAccountList : 服务号列表
  6. BlogCard : TA动态(根据Menu的key区别用户、群组、服务号)

发现

  1. DcMicroBlog : 动态
  2. DcService : 服务
  3. DcApp : 应用
  4. DcDocument : 文档
  5. DcEnterprise : 企业

  1. MyWork : 我的工作
  2. MyMicroBlog : 我的动态
  3. MyApp : 我的应用
  4. MyDisk : 我的网盘
  5. MyCheckIn : 我的签到
  6. MyAbout : 关于
  7. StNotification : 消息通知

  8. StDevice : 设备管理
  9. StFont : 字体大小
  10. StSync :手工同步
  11. StCleanCache : 清除缓存
  12. StModifyPassword : 修改密码
  13. StInvite : 邀请好友
  14. StQrcode : 版本二维码
  15. ScanCode : 扫描二维码
  16. StLogout : 注销
  17. EditPersonInfo : 打开修改个人信息界面
  18. privacy : 隐私设置

  19. gesturelock : 手势锁屏界面
  20. EnableGestureLock : 启用锁屏
  21. StGestureLock : 设置锁屏手势
  22. CheckGestureLock : 验证锁屏手势
  23. CheckVersion : 版本检测
  24. Feedback : 意见反馈
  25. ForgetPW : 忘记密码

签到

  1. CheckInList : 签到列表

附录1

内置图标有两种类型,一种是Tab图标,另一种是列表图标

Tab图标

ios和android的图标命名一样

tab_appmarket_n

tab_appmarket_p

tab_contact_n

tab_contact_p

tab_discovery_n

tab_discovery_p

tab_messagecenter_n

tab_messagecenter_p

tab_myself_n

tab_myself_p
名称按顺序如下:

  • tab_appmarket_n
  • tab_appmarket_p
  • tab_contact_n
  • tab_contact_p
  • tab_discovery_n
  • tab_discovery_p
  • tab_messagecenter_n
  • tab_messagecenter_p
  • tab_myself_n
  • tab_myself_p

列表图标

ios和android的列表图标命名不相同


android名称按顺序如下:

  • _dc_app
  • _dc_document
  • _dc_enterprise
  • _dc_microblog
  • _dc_service
  • _my_about
  • _my_checkin
  • _my_developer
  • _my_disk
  • _my_setting
  • _my_work
  • contact_card_ic_bulletin

ios名称按顺序如下:

  • dc_app
  • dc_document
  • dc_enterprise
  • dc_microblog
  • dc_service
  • my_about
  • my_checkin
  • my_developer
  • my_disk
  • my_setting
  • my_work
  • dc_inform