移動端多頁面應用（MPA）的開發（一）

多頁面應用和單頁面應用

基於vue的mpa移動專案的開發（windows環境）

建立專案

開發示例

附錄：使用git命令切換和合併分支示例

使用者體驗好

與伺服器端（pc端）開發技術不通用

與伺服器端（pc端）開發技術可通用

與伺服器端（pc端）開發技術可通用

本專案基於vue框架開發，ui採用mint-ui，字型圖示採用font-awesome，ajax訪問使用axios。

獲取資源

安裝和配置git

配置git的環境變數：path=git安裝目錄\cmd

執行git bash, 出現命令列介面

$ git config --global user.email "你的郵箱"

vscode中配置簡體中文語言環境和git（windows環境）

配置簡體中文語言環境

配置git

上述配置完成後即可在vs code上進行git操作。

將master_dev分支上的**合併到當前分支時，需要進入git bush使用命令操作。

$ git merge master_dev

在git伺服器（如：碼雲）上建立資源倉庫，假設倉庫名為：scgcxxgit。

進入git bush命令視窗將倉庫轉殖到本地

#切換到本地倉庫存放位置（假設本地倉庫上級目錄：f:\front-end-prj）

$ cd /f/front-end-prj 
#將遠端資源轉殖到本地，則本地倉庫目錄：f:\front-end-prj\scgcxxgit
$ git clone 「

在vscode中，將本地倉庫目錄（如：scgcxxgit）放入工作空間

在vscode中，在本地倉庫目錄（如：scgcxxgit）下建立專案目錄（如：scgcxx）

接下來，在專案目錄（如：scgcxx）中就可以開發了。

.

本應用本質上就是乙個html5應用，由一系列html5靜態頁面，通過ajax與伺服器端互動。

viewport設定

html和body端樣式

html

body

align-items: center;background-color:#ff5522;color:yellow;overflow: hidden;border-radius:1.5rem;
width:3rem;

} 
登入 
技術支援：***軟體****

在apicloud 官網控制台新建乙個應用，應用名稱與前述git伺服器上建立的專案資源名稱（scgcxxgit）一致；

在專案目錄（如上述scgcxx目錄）中建立config.xml檔案，該檔案內容示例如下：

api example

apicloud.sir

在apicloud 官網生成認證證書。

在apicloud 官網上設定應用的**管理使用git平台。

將最新專案提交推送至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

多頁面應用MPA與單頁面應用SPA的區別

通俗一點說就是指只有乙個主頁面的應用，瀏覽器一開始要載入所有必須的 html,js,css。所有的頁面內容都包含在這個所謂的主頁面中。但在寫的時候，還是會分開寫 頁面片段 然後在互動的時候由路由程式動態載入，單頁面的頁面跳轉，僅重新整理區域性資源。多應用於pc端。多頁面 mpa 就是指乙個應用中有多...

移動端頁面開發流程

移動布局 1，移動裝置 手機和ipad 安卓系統ios系統 安卓系統 內建瀏覽器是谷歌，ios內建safari瀏覽器，他們的核心都是webkit，不考慮相容性，需要考慮的是安卓和ios的區別 2，布局 裝置寬度 裝置的實際大小，裝置的解析度 廠家給的 頁面的大小 設計稿上的大小 瀏覽器的視口 瀏覽器...

19 01 05 移動端頁面開發

視口是移動裝置上用來顯示網頁的區域，一般會比移動裝置可視區域大，寬度可能是980px或者1024px，目的是為了顯示下整個為pc端設計的網頁，這樣帶來的後果是移動端會出現橫向滾動條，為了避免這種情況，移動端會將視口縮放到移動端視窗的大小。這樣會讓網頁不容易 可以用 meta 標籤，name view...