一门APP开发教程

标题: UI界面风格设置为不同的页面URL快捷匹配不同的原生框架UI风格 [打印本页]

作者: 李旺旺 时间: 昨天 18:16
标题: UI界面风格设置为不同的页面URL快捷匹配不同的原生框架UI风格
UI界面风格设置为不同的页面URL快捷匹配不同的原生框架UI风格

一门很早就提供了页面JS以实现原生框架UI风格自定义，可以参考：https://www.yimenapp.com/doc/demo.cshtml
但是部分开发者还是觉得比较麻烦；
2025年我们升级了原生框架UI的配置，实现正则匹配，后台设置，一键匹配；

1.登录一门开发者后台，找到配置进入，在左侧导航找到【UI界面风格设置】
(, 下载次数: 0)

在配置页面，点击【添加配置项目】即可新建匹配；
(, 下载次数: 0)

在默认设置项里面可以进行基础的全局默认配置；
(, 下载次数: 0)

2.全局框架UI配置，点击默认的基础配置项目右侧配置进行配置
(, 下载次数: 0)

点击右侧配置按钮会弹出配置界面
(, 下载次数: 0)

如图，这里可以快捷设置原生框架的UI配置
自定义主题；
自定义状态栏；
自定义标题栏；
自定义导航栏；
所有配置，都为所见即所得，可以点击配置后，在右侧查看效果变化；
——默认项目为全局默认配置，如需匹配不同的URL链接，点击新建，匹配URL链接参数即可；

3.新建配置项，为不同的URL页面网址匹配不同的原生风格UI
(, 下载次数: 0)

点击【添加配置项】
(, 下载次数: 0)

备注为自己所见，随便输入方便管理即可；
正则表达式一般输入网页唯一值即可：
比如：
https://www.yimenapp.com/doc/demo.cshtml                                     可以选择doc或demo作为唯一值

https://www.yimenapp.com/kb-yimen/                                              可以选择kb-yimen作为唯一值

https://bbs.yimenapp.com/forum.php?mod=forumdisplay&fid=37       可以选择forum作为唯一值

温馨提醒：多个匹配项目，不要出现重复值参数，不然会相互影响正则匹配，导致匹配失败！

例如我们给BBS做上匹配
(, 下载次数: 0)

再给demo页面做上匹配
(, 下载次数: 0)

再给kb-yimen做上匹配
(, 下载次数: 0)

配置好之后点击底部保存安装；
温馨提示：如果需要配置及时生效，不用重新打包APP，您需要配置在线网关能力
在线网关配置教程：https://bbs.yimenapp.com/forum.p ... 4236&extra=page%3D1

最后我们在APP内查看效果，点击进入不同的页面，即可呈现我们配置的原生框架UI界面效果
https://bbs.yimenapp.com/uiqiehuan.mp4

当然也可以使用新版JS快捷自定义：https://www.yimenapp.com/doc/demo_option.cshtml

通过原生UI配置，可以快速的匹配不用页面切换不用的ui风格，让APP呈现不用的视觉效果。

欢迎光临一门APP开发教程 (https://bbs.yimenapp.com/)