移动端多页面APP（MPA）开发体验

最新推荐文章于 2020-12-13 14:30:01 发布

夏冬琦

最新推荐文章于 2020-12-13 14:30:01 发布

阅读量783

点赞数

分类专栏：前端 HTML5 文章标签：移动端前端 MPA HTML5

本文链接：https://blog.csdn.net/serdonty/article/details/99999942

版权

前端同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

HTML5

3 篇文章 0 订阅

订阅专栏

移动端多页面APP（MPA）开发体验

什么是移动端应用
多页面应用和单页面应用
开发环境准备
- 安装和配置Git
- VsCode中配置简体中文语言环境和git（windows环境）
建立MPA项目
开发示例
- 移动端开发的页面模板
- 首页：index.html
利用APICloud在线打包
附录：使用git命令切换和合并分支示例

什么是移动端应用

移动端应用是指运行于手机、平板电脑等移动端设备的应用软件。

多页面应用和单页面应用

多页面应用（MPA）是由多个html页面组成的应用，界面切换主要有不同页面的跳转完成，无切换动画效果。
单页面应用（SPA）是仅有一个页面构成的应用，界面切换由dom动态生成和销毁完成，可实现切换动画效果。

开发环境准备

安装和配置Git

安装Git客户端工具（上官网下载即可）
配置Git的环境变量：path=Git安装目录\cmd
运行Git Bash, 出现命令行界面

在Git Bash命令界面，设置全局配置，创建一个全球用户名、全球邮箱：

$ git config --global user.name "你的名字或昵称"
$ git config --global user.email "你的邮箱"

VsCode中配置简体中文语言环境和git（windows环境）

下载并安装vscode
配置简体中文语言环境

打开VS code,按组合键Ctrl+Shift+P,搜索language,选择Configure Display Language,设置locale为zh-CN
下载简体中文插件，并启用
配置git
(1) 找到Git的安装目录，进入cmd文件夹，拷贝git.exe路径；
(2) 打开VS code 进入设置，搜索“git.path”，复制到用户设置，示例如下：
```
{
 	"git.path": "C:/Program Files/Git/cmd/git.exe"            
}
```

建立MPA项目

在git服务器（如：码云）上创建资源仓库，假设仓库名为：MpaDemoGit。

进入Git Bush命令窗口将仓库克隆到本地

#切换到本地仓库存放位置（假设本地仓库上级目录：f:\front）
$ cd /f/front 

#将远程资源克隆到本地，则本地仓库目录：f:\front\MpaDemoGit
$ git clone “https://gitee.com/xxx/MpaDemoGit.git”

在vscode中，将本地仓库目录（如：MpaDemoGit）放入工作空间
在vscode中，在本地仓库目录（如：MpaDemoGit）下建立项目目录（如：MpaDemo）
接下来，在项目目录（如：MpaDemo）中就可以开发了。
.

开发示例

本应用本质上就是一个HTML5应用，由一系列HTML5静态页面组成。

移动端开发的页面模板

采用HTML5标准
viewport设置

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

html和body端样式

html{
    /*设置长度单位rem标准。 注：rem与px都是长度宽度单位，px指一个像素是绝对单位，rem是相对单位，以html字体大小为1rem */
    font-size:100px;
    height:100%;
}
body{
    
    font-size:0.16rem; /*恢复浏览器默认字体大小设置*/
    
    height:100%;
    padidng:0;
    margin:0;
    background-color: #F5F5F5;/*浅灰色背景*/
}

首页：index.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>

  <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;
          /*浅灰色背景*/
      }

      #app {
          box-sizing: border-box;
          height: 100%;
          padding: 0.1rem;
      }

      .mystyle{
          display: flex;
          flex-direction:column;
          justify-content:center;
          align-items: center;
          font-weight: bold;
          font-size:0.4rem;
      }

      .bounce-enter-active {
          animation: bounce-in 1s;
      }

     

      @keyframes bounce-in {
          0% {
              font-size:0rem;
              border-radius:0rem;
              width:0rem;
              height:0rem;
              
          }

          100% {
              font-size:0.4rem;
              border-radius:1.5rem;
              width:3rem;
              height:3rem;
          }
      }
  </style>
</head>

<body>
  <div id="app" class="mystyle">

      <transition name="bounce">
          <div v-if="show" style="display:flex;flex-direction: column ;justify-content:center;
          align-items: center;background-color:#FF5522;color:yellow;overflow: hidden;border-radius:1.5rem;
          width:3rem;
          height:3rem;"  >APP示例</div>
      </transition>
      
  </div>

</body>

</html>

利用APICloud在线打包

在APICloud 官网控制台新建一个应用，应用名称与前述git服务器上建立的项目资源库名称（MpaDemoGit）一致；

在项目目录（如上述MpaDemo目录）中建立config.xml文件，该文件内容示例如下：

config.xml文件注意：id值要和您在APICloud网站创建的应用id保持一致。

<widget id="A12345678901"  version="0.0.1">
    <name>API Example</name>
    <description>
        API Example App.
    </description>
    <author email="developer@apicloud.com" href="//www.apicloud.com">
        APICloud.SIR
    </author>
    <content src="index.html" />
    <access origin="*" />
    <preference name="windowBackground" value="#FFF" />
    <permission name="call" />
    <feature name="weiXin">
        <param name="urlScheme" value="wx7779c7c063a9d4d9" />
    </feature>
</widget>

在APICloud 官网生成认证证书。
在APICloud 官网上设置应用的代码管理使用git平台。
将最新项目提交推送至git管理平台
在API使用云编译在线打包，下载安装到手机上运行。

附录：使用git命令切换和合并分支示例

进入本地资源库，命令示例如下：
```
cd /f/front-end-prj/scgcxxGit
```
将当前目录（本地资源库）加入待提交内容
```
$ git add .
```

提交修改代码到本地仓库

$ git commit -m "修改的东西的描述"

将本地的 xia_dev 分支推送至远端的 xia_dev 分支，如果没有就新建一个
```
$ git push origin xia_dev
```
切换到开发主分支上master_dev
```
$ git checkout master_dev
```
拉取主分支上面的代码
```
$ git pull origin master_dev
```
切换到自己的分支
```
$ git checkout xia_dev
```
将master_dev分支上的代码合并到当前分支
```
$ git merge master_dev
```
将本地的 xia_dev 分支推送至远端的 xia_dev 分支，如果没有就新建一个
```
$ git push origin xia_dev
```

夏冬琦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端多页面APP（MPA）开发体验

移动端多页面APP（MPA）开发体验什么是移动端应用多页面应用和单页面应用开发环境准备安装和配置GitVsCode中配置简体中文语言环境和git（windows环境）建立MPA项目开发示例移动端开发的页面模板首页：index.html利用APICloud在线打包附录：使用git命令切换和合并分支示例什么是移动端应用移动端应用是指运行于手机、平板电脑等移动端设备的应用软件。多页面应用和单页面应...
复制链接

扫一扫

专栏目录