前言
多頁面應用于結構較于簡單的頁面,因為簡答的頁面使用router又過于麻煩.本腳手架出于這樣的場景被開發出來.
使用腳手架搭配Hbuilder也同樣可以快速使用vue開發安卓和IOS APP.
本文最大特點:
項目地址 GitHub
使用手冊
MogoH5+ 是一個 vue 多頁面 腳手架工具 ,結合 H5+可以快速開發安卓與蘋果 APP.
即使不適用 Hbuilder 打包成 APP,本腳手架同樣可以作為多頁面網頁生成的參考項目.
特性
這些特性其實不是什么新鮮特性,只是單獨在 Hbuilder 無法使用.
快速上手
直接下載項目然后根據需求定制打包,最后通過 Hbuilder 云打包即可生成 APP.
本文自帶一個案例是使用 VantUI 開發的幾個界面,如果你喜歡其他 UI 同樣可以替換成其他的 UI.
// 1.安裝模塊 npm i // or yarn // 2.調試 npm start // 將manifest.json 的`頁面入口` 修改成 http://your_ip:8082/ // 3.打包 npm run build
使用
主要怎么使用 MogoH5+做正式的開發,在開發過程中一定要遵守 目錄規則 ,否則會有意想不到的錯誤.
目錄結構
. ├── docs // 文檔 ├── index.html // 入口模板 ├── jsconfig.json //js配置 ├── manifest.json //hbuilder 入口文件 ├── src │ ├── components //組件文件夾 │ │ └── List.vue //組件 │ ├── index.js //主頁入口文件 │ ├── index.vue // 主頁vue文件 │ ├── page // 頁面 │ └── utils // 工具 ├── unpackage // hbuilder 構建目錄 │ └── res └── webpack.config.js //webpack配置目錄
新建頁面
假如我們要新建一個名稱為 list 的頁面作為商品列表,我們就要在 ./src/page/goods 下新建 list.js 和 list.vue 兩個文件. list.js 作為多頁面的入口, list.vue ,腳手架自帶了幾個頁面可供參考.
遵循相對路徑原則,如果在 src 訪問這個頁面則就是 ./goods/list.html !!! 后綴一定是 .html
新建組件
組件放入 ./src/components 目錄下,如果組件較多,可自行建立目錄.比如 demo 中使用的 Logo 組件可以作為參考.
新建工具庫
工具庫 ./src/utils 主要放一些公用函數,比如請求,打開 webview,支付,分享等執行函數. demo 中封裝了部分來自 mui 的函數比如 自定義事件 , webview .這些函數可以作為參考.
common.js` 是每個頁面都需要加載的一個 js,里面加載了`fastclick`和`vconsole`.如果全局需要加統計,全局執行的函數,可以放在這個文件里面.
`./src/utils` 做了 `alias`別名,可以 直接這樣加載 `import common from "Utils/common"`.
發送請求
請求庫
demo 的請求使用的是 axios ,同樣你喜歡什么庫都可以自己去封裝.
常見的請求庫有 fetch , request , SuperAgent , jquery-ajax .
跨域
由于 npm start 后,調試網頁是掛在局域網上,并且作為 Hbuilder 的 頁面入口 ,因此,在請求時會出現 跨域 .
在 ./build.js 中使用本地代理,將下面的 https://api.douban.com 修改成自己使用的業務域名即可.
proxy: {
"/api": {
name:"DOUBANAPI", // 自己取名
target: "https://api.douban.com",
pathRewrite: { "^/api": "" },
changeOrigin: true,
secure: false
},
"/baidu_api": {
name:"BAIDUAPI", // 自己取名
target: "https://api.baidu.com",
pathRewrite: { "^/api": "" },
changeOrigin: true,
secure: false
},
...
}
如果有更多業務域名可以繼續在 proxy 添加.
只有開發的時候才會有跨域問題,打包后的文件網址會被替換成被代理的網址,因此發送請求一定要加上名稱 DOUBANAPI
request({
url: DOUBANAPI + "/bookList"
});
調試
在 Hbuilder 中調試會有諸多問題,比如:
使用 VConsole ,調試的問題基本就脫離 Hbuilder 了,使用 VConsole 主要優點如下
基本上就是一個簡化的 開發者工具欄 ,對于調試來說非常簡便了.
打包
npm run build
運行命令后會有一個 dist 目錄,里面的經過壓縮的靜態文件.
Hbuilder 發行打包
在使用 Hbuilder 制作安裝包前,請將 入口文件 修改成 dist/index.html . 然后可以安心的打包了.
兼容 mui.js
對于兼容 mui 部分函數的問題,已經在移植部分函數到Utils中,在未來的更新中會慢慢移植.
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
