前言

多頁面應(yīng)用于結(jié)構(gòu)較于簡單的頁面,因為簡答的頁面使用router又過于麻煩.本腳手架出于這樣的場景被開發(fā)出來.

使用腳手架搭配Hbuilder也同樣可以快速使用vue開發(fā)安卓和IOS APP.

本文最大特點(diǎn):

1. webpack4
2. 多頁面
3. 跨域Proxy代理
4. VConsole移動端調(diào)試,手機(jī)上的開發(fā)者工具
5. es6/es7 babel 轉(zhuǎn)換

項目地址 GitHub

使用手冊

MogoH5+ 是一個 vue 多頁面 腳手架工具 ,結(jié)合 H5+可以快速開發(fā)安卓與蘋果 APP.

即使不適用 Hbuilder 打包成 APP,本腳手架同樣可以作為多頁面網(wǎng)頁生成的參考項目.

特性

1. 支持 Npm 生態(tài)
2. 支持 vue 語法,以及 vue 生態(tài),比如 vux,mint,vant
3. 支持 ES6/ES7 語法
4. 使用 VConsole 調(diào)試
5. VSCode 友好
6. 局域網(wǎng)便捷調(diào)試
7. 兼容部分 mui 語法

這些特性其實不是什么新鮮特性,只是單獨(dú)在 Hbuilder 無法使用.

快速上手

直接下載項目然后根據(jù)需求定制打包,最后通過 Hbuilder 云打包即可生成 APP.

本文自帶一個案例是使用 VantUI 開發(fā)的幾個界面,如果你喜歡其他 UI 同樣可以替換成其他的 UI.

// 1.安裝模塊
npm i // or yarn
// 2.調(diào)試
npm start  // 將manifest.json 的`頁面入口` 修改成 http://your_ip:8082/
// 3.打包
npm run build

使用

主要怎么使用 MogoH5+做正式的開發(fā),在開發(fā)過程中一定要遵守 目錄規(guī)則 ,否則會有意想不到的錯誤.

目錄結(jié)構(gòu)

.
├── docs // 文檔
├── index.html // 入口模板
├── jsconfig.json //js配置
├── manifest.json //hbuilder 入口文件
├── src 
│  ├── components //組件文件夾
│  │  └── List.vue //組件
│  ├── index.js //主頁入口文件
│  ├── index.vue // 主頁vue文件
│  ├── page // 頁面
│  └── utils // 工具
├── unpackage // hbuilder 構(gòu)建目錄
│  └── 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 主要放一些公用函數(shù),比如請求,打開 webview,支付,分享等執(zhí)行函數(shù). demo 中封裝了部分來自 mui 的函數(shù)比如 自定義事件 , webview .這些函數(shù)可以作為參考.

common.js` 是每個頁面都需要加載的一個 js,里面加載了`fastclick`和`vconsole`.如果全局需要加統(tǒng)計,全局執(zhí)行的函數(shù),可以放在這個文件里面.

`./src/utils` 做了 `alias`別名,可以 直接這樣加載 `import common from "Utils/common"`.

發(fā)送請求

請求庫

demo 的請求使用的是 axios ,同樣你喜歡什么庫都可以自己去封裝.

常見的請求庫有 fetch , request , SuperAgent , jquery-ajax .

跨域

由于 npm start 后,調(diào)試網(wǎng)頁是掛在局域網(wǎng)上,并且作為 Hbuilder 的 頁面入口 ,因此,在請求時會出現(xiàn) 跨域 .

在 ./build.js 中使用本地代理,將下面的 https://api.douban.com 修改成自己使用的業(yè)務(wù)域名即可.

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
  },
  ...
 }

如果有更多業(yè)務(wù)域名可以繼續(xù)在 proxy 添加.

只有開發(fā)的時候才會有跨域問題,打包后的文件網(wǎng)址會被替換成被代理的網(wǎng)址,因此發(fā)送請求一定要加上名稱 DOUBANAPI

request({
 url: DOUBANAPI + "/bookList"
});

調(diào)試

在 Hbuilder 中調(diào)試會有諸多問題,比如:

1. 不能直接打印 數(shù)組 , 對象 ,需要轉(zhuǎn)成字符串.
2. 即使使用 webview調(diào)試 ,仍然不能打印出數(shù)組,在 mac 上使用也非常不方便.

使用 VConsole ,調(diào)試的問題基本就脫離 Hbuilder 了,使用 VConsole 主要優(yōu)點(diǎn)如下

1. 可以打印數(shù)組,對象
2. 可以查看請求,cookie,Localstorage
3. 在System欄目中可以看到頁面加載速度
4. 可以查看元素
   

基本上就是一個簡化的 開發(fā)者工具欄 ,對于調(diào)試來說非常簡便了.

打包

npm run build

運(yùn)行命令后會有一個 dist 目錄,里面的經(jīng)過壓縮的靜態(tài)文件.

Hbuilder 發(fā)行打包

在使用 Hbuilder 制作安裝包前,請將 入口文件 修改成 dist/index.html . 然后可以安心的打包了.

兼容 mui.js

對于兼容 mui 部分函數(shù)的問題,已經(jīng)在移植部分函數(shù)到Utils中,在未來的更新中會慢慢移植.

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。