Oinone移动端快速入门

介绍

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低代码应用平台体验

(0)
nation的头像nation数式员工
上一篇 2024年9月18日 下午12:56
下一篇 2024年9月19日 下午10:13

相关推荐

  • oio-input 输入框

    代码演示 <oio-input v-model:value="value"></oio-input> API Input 参数 说明 类型 默认值 版本 addonAfter 带标签的 input,设置后置标签 string|slot addonBefore 带标签的 input,设置前置标签 string|slo…

    2023年12月18日
    20500
  • 前端环境和启动前端工程

    本节核心是带大家直观的感受下我们上节构建的demo模块,并搭建前端环境为后续学习打下基础 环境准备 配置NPM源 npm config set registry http://nexus.shushi.pro/repository/kunlun/ 登录NPM源账号 npm login –registry "http://nexus.shushi.…

    2024年5月28日
    1.2K00
  • 自定义字段组件如何处理vue组件内的表单校验

    介绍 本示例以字符串字段为业务场景,将输入框用element-plus的组件实现了一遍,vue组件内在onMounted生命周期内将ElForm表单实例通过ts组件内提供到props的setFormInstance方法设置到了ts组件的属性formInstance上,这样就可以在ts组件校验方法validator()触发的时候直接调用表单组件实例formIn…

    2024年9月6日
    61400
  • 自定义组件之手动渲染弹出层(v4)

    阅读之前 你应该: 了解自定义组件相关内容。 自定义组件之手动渲染基础(v4) 弹出层组件 我们内置了两个弹出层组件,弹窗(Dialog)和抽屉(Drawer),以下所有内容全部围绕弹窗(Dialog)进行描述,抽屉相关内容与弹窗完全一致。 下面这个对照表格可以帮助你区分两个弹出层组件的异同: 弹出层相关功能 弹窗(Dialog) 抽屉(Drawer) AP…

    前端 2023年11月1日
    44300
  • 如何通过浏览器开发者工具提高调试效率

    1.通过vue devtool查看vue组件和oinone组件的信息 安装vue devtool插件 chrome安装最新版的vue devtool插件 谷歌应用商店插件地址,隐藏窗口需要在扩展程序的详情页额外设置才能使用该插件 安装好插件后,可以通过插件选中html页面中的元素查看相关信息 相关特性了解 组件自动创建的vue组件以组件的class类名命名,…

    2024年9月9日
    45700

发表回复

登录后才能评论