移动端多页面应用（MPA）的开发（三）

最新推荐文章于 2023-06-05 11:02:55 发布
最新推荐文章于 2023-06-05 11:02:55 发布
阅读量314 收藏
点赞数
分类专栏： 前端 vue javascript mint-ui 文章标签： 前端 移动端 vue mint-ui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/serdonty/article/details/99762560
版权
vue 同时被 3 个专栏收录
8 篇文章 2 订阅
订阅专栏
前端
6 篇文章 1 订阅
订阅专栏
javascript
6 篇文章 0 订阅
订阅专栏

移动端多页面应用（MPA）的开发（三）

开发主页

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>宜染在线</title>
    <link rel="stylesheet" href="../../mint-ui/style.min.css">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <style type="text/css">
        html {
            font-size: 100px;
            /*设置长度单位rem标准。 注：rem与px都是长度宽度单位，px指一个像素是绝对单位，rem是相对单位，以html字体大小为1rem */
            height: 100%;
        }

        body {
            font-size: 0.16rem;
            /*恢复浏览器默认字体大小设置*/
            height: 100%;
            padding: 0;
            margin: 0;
            background-color: #F5F5F5;
            /*浅灰色背景*/
        }

        .my-container {
            box-sizing: border-box;
            height: 100%;
            width: 100%;
            position: relative;


        }

        .my-menu {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            width: 49%;
            height: 1rem;
            background-color: white;
        }
    </style>
</head>

<body>
    <div id="app" class="my-container">

        <mt-header title="宜染在线">
            <mt-button icon="back" slot="left" @click="backToLogin">返回</mt-button>
            <template slot="right">{{currUser.userName}}</template>
        </mt-header>

        <div style="position:absolute;top:0.4rem;bottom:0.55rem;left:0;width:100%;overflow: auto;">

            <mt-tab-container v-model="active">

                <mt-tab-container-item id="home">

                    <mt-cell v-for="menu in menuList" :title="menu.menuName" :to="'../..'+menu.menuUrl" is-link>
                    </mt-cell>

                </mt-tab-container-item>

                <mt-tab-container-item id="mine">

                    <div
                        style="width:96%;margin: 0.1rem auto 0.1rem;display:flex;flex-direction: row;justify-content:space-between; ">
                        <div class="my-menu">
                            <i class="fa fa-key fa-lg"></i>
                            密码修改
                        </div>

                        <div class="my-menu" @click="logout">
                            <i class="fa fa-sign-out fa-lg"></i>
                            退出
                        </div>
                    </div>
                </mt-tab-container-item>

            </mt-tab-container>

        </div>

        <mt-tabbar v-model="active">
            <mt-tab-item id="home">
                <i slot="icon" class="fa fa-home fa-lg"></i>
                主页
            </mt-tab-item>

            <mt-tab-item id="mine">
                <i slot="icon" class="fa fa-user fa-lg"></i>
                我的
            </mt-tab-item>
        </mt-tabbar>


    </div>

    <script src="../../js/vue.min.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../mint-ui/index.js"></script>
    <script src="../../layer_mobile/layer.js"></script>
    <script src="../../js/my-mobile.js"></script>


    <script>
        const vm = new Vue({
            el: '#app',
            data: {

                currUser: {},
                active: 'home',
                menuList: [],

            },
            methods: {

                backToLogin() {
                    location.href = '../../safty/login/index.html';
                },
                logout() {
                    this.$myDelete('/safty/logout/exit')
                        .then(() => {
                            setTimeout(() => {
                                top.location.href = '../../safty/login/index.html';
                            }, 1000);
                        });
                },

            },
            mounted() {

                this.$myGet('/safty/home/currUser')
                    .then(curruser => {
                        this.currUser = curruser;
                    });

                this.$myGet('/safty/home/m-menu')
                    .then(menuList => {
                        this.menuList = menuList;
                    });
            }
        });
    </script>


</body>

</html>

染色功能界面代码示例

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>宜染在线</title>
    <link rel="stylesheet" href="../../mint-ui/style.min.css">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <style type="text/css">
        html {
            font-size: 100px;
            /*设置长度单位rem标准。 注：rem与px都是长度宽度单位，px指一个像素是绝对单位，rem是相对单位，以html字体大小为1rem */
            height: 100%;
        }

        body {
            font-size: 0.16rem;
            /*恢复浏览器默认字体大小设置*/
            height: 100%;
            padding: 0;
            margin: 0;
            background-color: #F5F5F5;
            /*浅灰色背景*/
        }

        .my-container {
            box-sizing: border-box;
            height: 100%;
            width: 100%;
        }

        .dye {

            font-size: 0.15rem;
            margin:0.1rem 0;
            border:1px solid #DDEEFF;
            border-top-left-radius: 0.05rem;
            border-top-right-radius: 0.05rem;

        }

        .dye-header {
            border-top-left-radius: 0.05rem;
            border-top-right-radius: 0.05rem;
            line-height: 0.3rem;
            height: 0.3rem;
            padding: 0 0.05rem 0 0.05rem;
            background-color: #DDEEFF;
            color: #888888;

            display: flex;
            flex-direction: row;
            justify-content:space-between;
            align-items: center;
        }

        .dye-body {

            padding: 0 0.05rem 0 0.05rem;
            background-color: white;
            color: #888888;


            display: flex;
            flex-direction: column;
            justify-content: center;

            flex: 1 1 auto;


        }

        .dye-body>div {
            display: flex;
            flex-direction: row;
            flex: auto;

            height: 0.26rem;
            line-height: 0.26rem;
            border-bottom:1px #F2F2F2 dashed;

        }

        .dye-body>div>label {
            width: 30%;
            min-width: 0.7rem;

        }

        .dye-opr {
            background-color: white;         
           
            text-align: right;
            padding:0.05rem;

        }
    </style>
</head>

<body>
    <div id="app" class="my-container">

        <mt-header title="宜染在线">
            <mt-button icon="back" slot="left" @click="backToHome">返回</mt-button>
            <template slot="right">{{currUser.userName}}</template>
        </mt-header>

        <mt-navbar v-model="active">
            <mt-tab-item id="1">待染色</mt-tab-item>
            <mt-tab-item id="2">已染色</mt-tab-item>
            <mt-tab-item id="3">后工序</mt-tab-item>
        </mt-navbar>

        <div
            style="position:absolute;top:0.88rem;bottom:0;left:0;padding:0.05rem 0 0.05rem 0;width:100%;overflow: auto;">

            <mt-tab-container v-model="active" style="width:96%;margin:0 auto;">
                <mt-tab-container-item id="1">
                    <div v-for="n in 20" class="dye">
                        <div class="dye-header">
                            <span>组号：123456{{n}}</span>
                            <span>已前处理</span>
                        </div>
                        <div class="dye-body">
                            <div>
                                <label>客户：</label>
                                <span>常州飞龙纺织品公司</span>
                            </div>
                            <div>
                                <label>规格：</label>
                                <span>C/C60*60 110*80 166'</span>
                            </div>
                            <div>
                                <label>花色号：</label>
                                <span>3567#玫红</span>
                            </div>
                            <div>
                                <label>前处理产量：</label>
                                <span>3566.8米</span>
                            </div>
                        </div>
                        <div class="dye-opr">
                            <mt-button  size="small" type="primary">详情</mt-button>
                            <mt-button  size="small" type="primary">完成</mt-button>
                        </div>

                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="2">

                </mt-tab-container-item>
                <mt-tab-container-item id="3">

                </mt-tab-container-item>
            </mt-tab-container>

        </div>



    </div>

    <script src="../../js/vue.min.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../mint-ui/index.js"></script>
    <script src="../../layer_mobile/layer.js"></script>
    <script src="../../js/my-mobile.js"></script>


    <script>
        const vm = new Vue({
            el: '#app',
            data: {

                active: '1',

                currUser: {},



            },
            methods: {

                backToHome() {
                    location.href = '../../safty/home/index.html';
                },


            },
            mounted() {

                this.$myGet('/safty/home/currUser')
                    .then(curruser => {
                        this.currUser = curruser;
                    });


            }
        });
    </script>


</body>

</html>

参考项目

参阅项目代码

夏冬琦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端多页面APP（MPA）开发体验
serdonty的博客
08-21 780
移动端多页面APP（MPA）开发体验什么是移动端应用多页面应用和单页面应用开发环境准备安装和配置GitVsCode中配置简体中文语言环境和git（windows环境）建立MPA项目开发示例移动端开发的页面模板首页：index.html利用APICloud在线打包附录：使用git命令切换和合并分支示例 什么是移动端应用 移动端应用是指运行于手机、平板电脑等移动端设备的应用软件。 多页面应用和单页面应...
移动端多平台 Taro 跨端开发总结（一）
最新发布
qq_23935353的博客
10-15 436
使用 Taro 这个框架进行跨端开发已经有一段时间了，趁着这个机会就开一个新的系列来对这段时间 Taro 进行跨端开发的一些个人的思考与总结。
vue 使用echart图表 随屏幕放大缩小_使用VUE进行移动端H5页面开发前准备
weixin_39767887的博客
12-13 557
在正式使用Vue进行移动端页面开发前,需要做一些前置工作,以此保证用户在访问页面时看到的东西不会因设备的差异而出现各种不同的效果,比如一个页面在iphone7 plus上显示的很正常,然后切换到了Iphone5上因为屏幕太小部分页面内容被遮挡了,影响用户正常使用和体验,当然还有一些细节需要优化,比如移动端的1像素边框问题,移动端的300毫秒点击延迟等,这些都可以进行一些优化,从而把用户体验做到更好...
移动端多页面应用（MPA）的开发（一）
serdonty的博客
08-17 1870
移动端多页面应用（MPA）的开发移动端应用技术概况什么是移动端应用移动应用开发技术演化原生app（native-app）开发web-app开发 即通过浏览器访问混合式app(Hybrid App)开发多页面应用和单页面应用基于Vue的MPA移动项目的开发（windows环境）建立项目开发示例移动端开发的页面模板首页（index.html）- 进入过度页面登录界面（safty/login/index...
移动跨端框架最全盘点，16 款总有一款适合你
Eqiqi的博客
06-05 4255
进入正式盘点前，还是先科普下概念：跨平台应用开发框架是开发人员可以使用一套相同的代码，一次性地编码便可在多个端侧平台上运行（如：小程序、浏览器、iOS、Andriod、MacOS、Linux、麒麟、UOS…）。它最大的作用是极大降低了开发人员的开发周期，进而实现快速交付。跨平台应用程序开发框架的好处：一套代码适用多个设备、多个平台、多个应用商店中发布、快速成型、快速开发、无缝产品维护。
该demo基于vuecli30可以用于移动端的多页面开发
08-09
这个名为“vue-cli3-multiple-pages-master”的压缩包文件，显然是一个利用 Vue CLI 3.0 创建的项目模板，特别设计用于移动端的多页面应用程序开发。以下将详细介绍使用 Vue CLI 3.0 进行多页面开发的关键知识点。 ...
webpack多页面开发实践
08-28
随着前端技术的发展，单页面应用（SPA）成为了主流，但多页面应用（MPA）依然在很多场景中占据重要地位。尽管网络上的教程多集中在单页面应用的构建，但Webpack 也同样适用于多页面应用的开发。本文将通过一个实际...
单页面和多页面开发及应用
10-13
# 单页面和多页面开发及应用 # 单页面： - 什么是单页面：单页面是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写...
vue将单页面改造成多页面应用的方法
10-17
在Vue.js开发中，单页面应用（SPA）和多页面应用（MPA）各有其应用场景。当项目需求涉及多个独立的、不互相依赖的页面时，将单页面应用改造成多页面应用是一种优化策略，可以减少不必要的代码加载，提高页面性能。本...
浅谈如何使用webpack构建多页面应用
08-27
在某些情况下，单页面应用（SPA）可能无法满足所有需求，这时就需要构建多页面应用（MPA）。下面，我们将按照文件结构、思路和具体配置步骤来详细讲解这一过程。 **文件结构分析：** 在提供的文件结构中，我们看到...
移动端混合开发
Java学习博客
09-28 9573
到现在做移动混合开发一年多了，做了3个项目，也算是个老手了。虽然只干了一年，但花了很多时间研究，所以感觉至少有2年多的经验。 框架选择：综合上手难度、普及率、资料查询难度等选择了ionic（框架自带整合angularjs+cordova）。官方地址：https://ionicframework.com/docs/ 个人觉得ionic做的页面非常美，没图你说个什么？下面先看看效果 花了7天做的...
移动端H5解惑-页面适配（二）
weixin_33725807的博客
08-04 2904
本文原文发表于2016年我的github，但是直到现在为止还有很多童鞋问我相关概念，于是整理下再分享一下。 原文链接：github.com/sunmaobin/s… 一、基础概念 在了解如何做H5页面适配前，大家都应该把移动端涉及的一些概念搞明白，比如：dpr 是什么意思？ 移动端H5解惑-概念术语（一） 二、为什么要做页面适配 2.1 PC端为什么要解决浏览器兼容 因为在PC端，由于浏览器种...
从mainActive跳转到其他界面三部曲
haohaojian的专栏
09-01 659
1、MainAciivety中写跳转饼在Mainfest.xml中使用scrollview 2、实现新的activety的activety.java和activety.xml文件 3、在Mainfest.xml中注册新的activety.xml 这样就可以将主界面和分界面连接
使用Chameleon制作移动端多平台前端开发入门
小龙哒的博客
01-29 1579
文章目录1.概念1.介绍2.背景3.设计理念4.跨端目标5.学习全景图6.开发语言2.安装1.安装环境2.创建项目与启动3.目录与文件结构 1.概念 1.介绍 Chameleon/kəˈmiːlɪən/，简写CML，中文名卡梅龙；中文意思变色龙，意味着就像变色龙一样能适应不同环境的跨端整体解决方案。 2.背景 研发同学在端内既追求h5的灵活性，也要追求性能趋近于原生。 面对入口扩张，主端、独立端、...
跨终端电商平台的实现之移动端详情页多窗口切换（选项卡）效果实现
weixin_34256074的博客
07-15 369
在移动端的商品详情页涉及多个内容切换的问题，这里使用选项卡设计方式，使用选项卡的设计是各大主流电商平台所采用主要形式，例如淘宝和京东。简单的选项卡实现起来比较容易，只要监听选项按钮并控制相应内容的现实与隐藏。如果只是单纯的显示和隐藏的话，对于用户的体验不好。所以改单纯的显示与隐藏为滑动的效果，要实现滑动的效果就需要满足以下几个条件： 1...
移动端多端框架选型
山茶树和葡萄树
02-09 1954
DATE: 2020/02/09 通过下面两篇文章整理： taro：小程序多端框架全面测评 uni-app：跨端开发框架深度横评 摘要 底层级别 提供底层渲染引擎布局引擎、中层 DSL (Domain-specific Language)、上层框架。 性能高，渲染一致，跨系统平台，也能编译运行于浏览器； 需要学开发语言； 不支持小程序； Flutter / 译，Hummingbird Qt...
spring 4.2.3返回视图（jsp/vm）或者json
一言不合吃吃吃的博客
06-28 653
web.xml配置<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocatio
如何区分单页面应用和多页面应用
06-09
单页面应用（Single Page Application，SPA）和多页面应用（Multiple Page Application，MPA）是两种常见的Web应用程序架构。区分它们可以通过以下方式： 1. 页面加载方式：SPA只有在用户首次访问应用程序时加载...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值