1. Oinone社区Home
  2. 前端

Oinone移动端快速入门

nation • • 前端 • 2777 views

介绍

oinone的pc端的页面默认都可以在移动端直接访问。自定义mask、layout、视图组件、字段组件、动作组件方式都参考pc端实现。目前移动端的UI组件是基于vant@3.6.0版本开发，如有自定义部分的代码，推荐使用该组件库。

“注意”： 由于移动端和pc端在交互上的巨大差异，两端用的是不同的UI组件库是，按照此约定开发的自定义组件在两端也是无法相互兼容的，在pc端自定义的组件或者页面，不会在移动端自动适配，需要自行开发对应的移动端组件或者页面。

工程搭建

移动端很多交互跟pc端差异很大，所以移动端的我们采用的方案是独立用一套移动端的UI框架实现，而不是简单的做页面布局自适应，所以移动端需要跟pc端一样独立部署一套前端工程。

参考文档：【前端】移动端工程结构最佳实践（v4/v5）

如何区分多端

在界面设计器设计页面的时候，可以通过顶部的多端设备的图标切换在各端的页面效果。

pc端页面

Oinone移动端快速入门

切换为移动端后的页面

Oinone移动端快速入门

注意：大部分情况下，pc端和移动端可以共享一个设计的页面，然后通过上面的方法区分两端，如果移动端的页面交互差异很大，那更推荐独立新建一个页面专门给移动端使用。

模块

模块在定义的时候可以通过注解@Module.clientTypes决定当前模块在哪些端展示

package pro.shushi.pamirs.demo.api;

import org.springframework.stereotype.Component;
import pro.shushi.pamirs.business.api.BusinessModule;
import pro.shushi.pamirs.core.common.CommonModule;
import pro.shushi.pamirs.file.api.FileModule;
import pro.shushi.pamirs.meta.annotation.Module;
import pro.shushi.pamirs.meta.base.PamirsModule;
import pro.shushi.pamirs.meta.common.constants.ModuleConstants;
import pro.shushi.pamirs.meta.enmu.ClientTypeEnum;
import pro.shushi.pamirs.user.api.UserModule;

@Component
@Module(
        name = DemoModule.MODULE_NAME,
        displayName = "oinoneDemo工程",
        version = "1.0.0",
        // 客户端类型，默认是PC和MOBILE端都展示
        clientTypes =  {ClientTypeEnum.PC, ClientTypeEnum.MOBILE},
        // 登录后默认访问 priority 值最小的模块
        priority = 1,
        dependencies = {ModuleConstants.MODULE_BASE,
                CommonModule.MODULE_MODULE,
                UserModule.MODULE_MODULE,
                BusinessModule.MODULE_MODULE,
                FileModule.MODULE_MODULE
        }
)
@Module.module(DemoModule.MODULE_MODULE)
@Module.Advanced(selfBuilt = true, application = true)
public class DemoModule implements PamirsModule {

    public static final String MODULE_MODULE = "demo_core";

    public static final String MODULE_NAME = "DemoCore";

    @Override
    public String[] packagePrefix() {
        return new String[]{
                "pro.shushi.pamirs.demo"
        };
    }
}

菜单

界面设计器设置方式

在菜单设置的时候可以选择“显示设备”
Oinone移动端快速入门
Oinone移动端快速入门

低代码设置方式

通过注解@UxMenu.clientTypes设置显示设备

package pro.shushi.pamirs.demo.core.init.menu;

import pro.shushi.pamirs.boot.base.constants.ViewActionConstants;
import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute;
import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenu;
import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenus;
import pro.shushi.pamirs.demo.api.model.DemoItem;
import pro.shushi.pamirs.demo.api.model.DemoItemCategory;
import pro.shushi.pamirs.meta.enmu.ClientTypeEnum;

@UxMenus()
public class DemoMenus implements ViewActionConstants {

    // 同时在pc端和移动端显示
    @UxMenu(value = "商品中心", clientTypes = {ClientTypeEnum.PC, ClientTypeEnum.MOBILE})
    class ItemPMenu{
        @UxMenu("商品类目") class DemoItemAndCateMenu {
            // 只在pc端显示
            @UxMenu(value = "商品管理", clientTypes = {ClientTypeEnum.PC})
            @UxRoute(DemoItem.MODEL_MODEL)
            class DemoItemMenu {
            }

            // 只在移动端显示
            @UxMenu(value = "类目管理", clientTypes = {ClientTypeEnum.MOBILE})
            @UxRoute(DemoItemCategory.MODEL_MODEL)
            class DemoItemCategoryMenu {
            }
        }

    }
}

组件

界面设计器选中组件后，可以在右边属性面板看到“显示设备”的配置，默认为空，为空则表示在pc端和移动端都显示
Oinone移动端快速入门

Oinone社区 作者：nation原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/17458.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Like (0)
nation's avatarnation数式员工
0 0
Previous 2024年9月18日 pm12:56
Next 2024年9月19日 pm10:13

相关推荐

  • oio-grid 栅格 组件

    oio-grid 栅格

    24 栅格系统。 <oio-row :gutter="24"> <oio-col :span="12"></oio-col> <oio-col :span="12"></oio-col> </oio-row> 概述 布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理： 通过\row\在水平方向建立一组\column\（简写 col） 你的内容应当放置于\col\内，并且，只有\col\可以作为\row\的直接元素 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 \<a-col :span="8" />\ 来创建 如果一个\row\中的\col\总和超过 24，那么多余的\col\会作为一个整体另起一行排列 Flex 布局 我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 – 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。 Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。 API Row 成员 说明 类型 默认值 align flex 布局下的垂直对齐方式：top middle bottom string top gutter 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]（1.5.0 后支持）。 number/object/array 0 justify flex 布局下的水平排列方式：start end center space-around space-between string start wrap 是否自动换行 boolean false Col 成员 说明 类型 默认值 版本 flex flex 布局填充 string|number – offset 栅格左侧的间隔格数，间隔内不可以有栅格 number 0 order 栅格顺序，flex 布局模式下有效 number 0 pull 栅格向左移动格数 number 0 push 栅格向右移动格数 number 0 span 栅格占位格数，为 0 时相当于 display: none number – xxxl ≥2000px 响应式栅格，可为栅格数或一个包含其他属性的对象 number|object – xs <576px 响应式栅格，可为栅格数或一个包含其他属性的对象 number|object – sm ≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象 number|object – md ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象 number|object – lg ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象 number|object – xl ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 number|object – xxl ≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 number|object –

    汤乾华's avatar 汤乾华
    2023年12月18日
    1.2K00
  • 如何实现页面间的跳转 低无一体

    如何实现页面间的跳转

    介绍 在日常的业务中，我们经常需要在多个模型的页面之间跳转，例如从商品的行可以直接点击链接跳转到类目详情，还有查看该订单发起的售后单列表，这里将给大家展示如何在oinone中如何实现这些功能。 方法一、通过界面设计器的无代码能力配置 表格行跳转到表单页/详情页 拖入一个跳转动作到表格行，保存动作后，在左侧的动作属性面板底部有个请求配置，里面的上下文属性就是配置跳转参数的地方，点击添加按钮可以增加一行参数 点击添加按钮后，可以看到新增了一行，行内有2个输入框，左侧输入框为目标视图模型的字段，右侧输入框为当前视图模型的表达式 注意 表达式中activeRecord关键字代表当前行的数据对象 “上下文”相关知识点 当前页面的模型和跳转后的页面模型相同的情况下，会字段带上当前行数据的id作为路由参数 上下文是从当前页面跳转到下个页面带的自定义参数 上下文会作为跳转后的页面数据加载函数的入参，后端的该函数需要根据该条件查询到数据返回给前端，典型的例子就是编辑页，根据id查询对象的其他字段信息返回 跳转后页面的数据加载函数可以在动作场景的时候选择加载函数，也可以在页面的加载函数处设置 方法二、通过低代码方式在自定义代码中调用 oinone提供了内置函数executeViewAction实现该功能 import { DefaultComparisonOperator, executeViewAction, QueryExpression, RuntimeViewAction, ViewActionTarget, ViewType } from '@kunlun/dependencies'; export class JumpActionWidget { protected goToObjectView() { executeViewAction( { viewType: ViewType.Form, moduleName: 'resource', model: 'resource.ResourceCountry', name: 'redirectUpdatePage', target: ViewActionTarget.Router } as RuntimeViewAction, undefined, undefined, { // 此处为id参数，目前只有表单和详情页需要 id: '12223', // 此处为上下文参数，context内对象的key是目标页面需要传递的默认值 context: JSON.stringify({code: 'xxx'}), // 此处为跳转后左侧菜单展开选中的配置 menu: JSON.stringify({"selectedKeys":["国家"],"openKeys":["地址库","地区"]}) } ); } protected goToListView() { const searchConditions: QueryExpression[] = []; searchConditions.push({ leftValue: ['countryCode'], // 查询条件的字段 operator: DefaultComparisonOperator.EQUAL, right: 'CN' // 字段的值 }); executeViewAction( { viewType: ViewType.Table, moduleName: 'resource', model: 'resource.ResourceCity', name: 'resource#市', target: ViewActionTarget.OpenWindow } as RuntimeViewAction, undefined, undefined, { // searchConditions相当于domain，不会随页面搜索项重置动作一起被清空 searchConditions: encodeURIComponent(JSON.stringify(searchConditions)), // searchBody的字段会填充搜索区域的字段组件，会随页面搜索项重置动作一起被清空 searchBody: JSON.stringify({code: 'CN'}), menu: JSON.stringify({"selectedKeys":["国家"],"openKeys":["地址库","地区"]}) } ); } } 扩展知识点 为什么executeViewAction跳转到的新页面不是入参的moduleName属性对应的模块? 答：跳转后所在的模块优先级为： 第一个入参的resModuleName属性对应的模块 执行executeViewAction时所在的模块 第一个入参的moduleName属性对应的模块 如何快速获取选中菜单的值？ 答：先通过页面菜单手动打开页面，然后在浏览器自带调试工具的控制台执行decodeURIComponent(location.href),其中的menu参数就是我们需要的值

    nation's avatar nation
    2024年5月13日
    4.1K00
  • 如何自定义点击导出动作绑定指定模板 低无一体

    如何自定义点击导出动作绑定指定模板

    介绍 平台默认的导出会打开弹窗，然后在弹窗内的视图选择是用模板方式导出还是选字段导出，但是有时候有部分场景希望点击导出动作后直接进入导出流程，导出指定的某个模板，我们可以通过覆写打开弹窗的动作来实现该功能。 本文档参考了 表格页自定义按钮如何获取搜索区域的查询条件 代码示例 以下代码大部分场景只需要修改其中excelTplName更换模板即可，另外如何想增加复用性，还可以将该属性改为从元数据的配置中获取。 import { ActionType, BaseActionWidget, BaseElementListViewWidget, BooleanHelper, ClickResult, Condition, ExcelExportTask, FILE_MODULE_NAME, getSessionPath, GraphqlHelper, http, IQueryPageResult, ISort, queryDslWidget, ReturnPromise, RuntimeServerAction, ServerActionWidget, SPI, SubmitValue, SYSTEM_MODULE_NAME, translateValueByKey, UrlHelper, ViewActionTarget, Widget } from '@kunlun/dependencies'; import { OioNotification } from '@kunlun/vue-ui-antd'; @SPI.ClassFactory( BaseActionWidget.Token({ actionType: [ActionType.View], target: [ViewActionTarget.Dialog], model: 'ys0328.k2.Model0000000453', name: 'internalGotoListExportDialog' }) ) export class DemoExportActionWidget extends ServerActionWidget { /** * excel导出模板名称 * @protected */ protected excelTplName = '演示抽屉跳转链接导出'; /** * 导出任务的模型编码 * @protected */ protected exportTaskModel = 'excelExportTask'; /** * 导出任务的方法 * @protected */ protected exportTaskFun = 'createExportTask'; /** * * 是否是同步导出 */ @Widget.Reactive() protected get syncExport() { return BooleanHelper.isTrue(this.getDsl().sync) || !true; } protected async executeAction(action: RuntimeServerAction, parameters: SubmitValue): Promise<ClickResult> { const workbookId = await this.getWorkbookId(); if (!workbookId) { return false; } let task = { workbookDefinition: { id: workbookId } } as ExcelExportTask; // 从平台内置的方法获取搜索区域的条件 const { condition } = this.getSearchRsqlAndQueryParams(); // 排序规则 let sortList = [] as ISort[]; const baseViewWidget = Widget.select(this.rootHandle); const listViewWidget = queryDslWidget(baseViewWidget?.getChildrenInstance(), BaseElementListViewWidget); if (listViewWidget) { sortList = listViewWidget.sortList; } return this.export(task, condition, sortList); } protected getUploadBodyGql(id: string, condition: string | Condition, sortList:…

    nation's avatar nation
    2024年10月9日
    2.4K00
  • 「前端」关闭源码依赖 前端

    「前端」关闭源码依赖

    问题背景 在 5.x 版本的 oinone 前端架构中，我们开放了部分源码，但是导致以下性能问题： 1.构建耗时增加​​：Webpack 需要编译源码文件 2.​​加载性能下降​​：页面需加载全部编译产物 3.​​冷启动缓慢​​：开发服务器启动时间延长 以下方案通过关闭源码依赖。 操作步骤 1. 添加路径修正脚本 1: 在当前项目工程根目录中的scripts目录添加patch-package-entry.js脚本，内容如下： const fs = require('fs'); const path = require('path'); const targetPackages = [ '@kunlun+vue-admin-base', '@kunlun+vue-admin-layout', '@kunlun+vue-router', '@kunlun+vue-ui', '@kunlun+vue-ui-antd', '@kunlun+vue-ui-common', '@kunlun+vue-ui-el', '@kunlun+vue-widget' ]; // 递归查找目标包的 package.json function findPackageJson(rootDir, pkgName) { const entries = fs.readdirSync(rootDir); for (const entry of entries) { const entryPath = path.join(rootDir, entry); const stat = fs.statSync(entryPath); if (stat.isDirectory()) { if (entry.startsWith(pkgName)) { const [pkGroupName, name] = pkgName.split('+'); const pkgDir = path.join(entryPath, 'node_modules', pkGroupName, name); const pkgJsonPath = path.join(pkgDir, 'package.json'); if (fs.existsSync(pkgJsonPath)) { return pkgJsonPath; } } // 递归查找子目录 const found = findPackageJson(entryPath, pkgName); if (found) return found; } } return null; } // 从 node_modules/.pnpm 开始查找 const pnpmDir = path.join(__dirname, '../', 'node_modules', '.pnpm'); for (const pkgName of targetPackages) { const packageJsonPath = findPackageJson(pnpmDir, pkgName); if (packageJsonPath) { try { const packageJSON = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8')); if (packageJSON.main === 'index.ts') { const libName = packageJSON.name.replace('@', '').replace('/', '-'); packageJSON.main = `dist/${libName}.esm.js`; packageJSON.module = `dist/${libName}.esm.js`; const typings = 'dist/types/index.d.ts'; packageJSON.typings = typings; const [pwd] = packageJsonPath.split('package.json'); const typingsUrl = path.resolve(pwd, typings); const dir = fs.existsSync(typingsUrl); if (!dir)…

    汤乾华's avatar 汤乾华
    2025年4月17日
    81900
  • oio-checkbox 对选框 组件

    oio-checkbox 对选框

    API 属性 Checkbox 参数 说明 类型 默认值 版本 autofocus 自动获取焦点 boolean false checked(v-model:checked) 指定当前是否选中 boolean false disabled 失效状态 boolean false indeterminate 设置 indeterminate 状态，只负责样式控制 boolean false value 与 CheckboxGroup 组合使用时的值 boolean | string | number – 事件 事件名称 说明 回调参数 版本 change 变化时回调函数 Function(e:Event) –

    汤乾华's avatar 汤乾华
    2023年12月18日
    1.2K00

Leave a Reply

Please Login to Comment