# 简介

MogoH5+ 是一个 vue 多页面脚手架工具,结合 H5+可以快速开发安卓与苹果 APP.

即使不适用 Hbuilder 打包成 APP,本脚手架同样可以作为多页面网页生成的参考项目.

#APP 演示下载地址

# 特性

• 支持 Npm 生态
• 支持 vue 语法,以及 vue 生态,比如 mint,vant
• 支持 ES6/ES7 语法
• 使用 VConsole 调试
• VSCode 友好
• 局域网便捷调试,不插数据线也可以调试
• 支持mui

# 快速上手

# 下载脚手架

首先下载脚手架 脚手架项目地址MogoH5+

# Git clone

git clone https://github.com/tyaqing/mogo-h5plus.git

# 直接下载

下载地址

下载后把目录直接导入到 Hbuilder.

# 运行脚手架

// 1 进入项目主目录
cd mogo-h5plus
// 2 安装npm依赖
npm i  // 或者 yarn
// 3 调试运行
npm start

// 运行结果如下
ℹ ｢wds｣: Project is running at http://192.168.199.155:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wdm｣: Hash: e597725cca065f694fbd
Version: webpack 4.10.2
Time: 4959ms

直接下载项目然后根据需求定制打包,最后通过 Hbuilder 云打包即可生成 APP.

本文自带一个案例是使用 VantUI 开发的几个界面,如果你喜欢其他 UI 同样可以替换成其他的 UI.

# 真机调试

将打印出来的 ip 地址,我们打印出来的是http://192.168.199.155:8080/,将这个填入页面入口.

然后使用 Hbuilder 基座进行调试测试.

# 使用

主要怎么使用 MogoH5+做正式的开发,在开发过程中一定要遵守目录规则,否则会有意想不到的错误.

# 目录结构

.
├── assets  // 静态资源
├── 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,脚手架自带了几个页面可供参考.

# 新建页面/删除页面[0.3.0]

0.3.0 的新建页面和 0.2.0 是兼容的,但是建议您使用 0.3.0 的page.json,这样会减少很多因为新建,删除页面产生的错误 如果您需要更自由的页面结构,比如三级目录.可以按照page.json格式添加即可.

{
  "goods/detail": "./src/page/goods/detail.js",
  "map/map": "./src/page/map/map.js",
  "mui/index": "./src/page/mui/index.js",
  "user/index": "./src/page/user/index.js"
}

比如您需要一个添加一个三级级页面,可以按照下面的方法添加,

{
  ...
  "user/index/point": "./src/page/user/point/index.js"
}

如果删除页面了页面,也需要删除page.json相应的页面描述代码

实现原理是监听了page.json,一旦page.json发生改变,会重启webpack

# 新建组件

组件放入./src/components目录下,如果组件较多,可自行建立目录.比如 demo 中使用的 Logo 组件可以作为参考.

# 新建工具库

工具库./src/utils主要放一些公用函数,比如请求,打开 webview,支付,分享等执行函数. demo 中封装了部分来自 mui 的函数比如自定义事件,webview.这些函数可以作为参考.

# 发送请求

# 请求库

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添加.

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

# 调试

在 Hbuilder 中调试会有诸多问题,比如:

• 不能直接打印数组,对象,需要转成字符串.
• 即使使用webview调试,仍然不能打印出数组,在 mac 上使用也非常不方便.

使用VConsole,调试的问题基本就脱离 Hbuilder 了,使用VConsole主要优点如下

• 可以打印数组,对象
• 可以查看请求,cookie,Localstorage
• 在System栏目中可以看到页面加载速度
• 可以查看元素

基本上就是一个简化的开发者工具栏,对于调试来说非常简便了.

# 打包

npm run build

运行命令后会有一个dist目录,里面的经过压缩的静态文件.

# Hbuilder 发行打包

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

# 如何使用 mui

mui 默认未加载,但是相对应的 js 和 css 放在了 assets 目录下.如果需要使用,请按下面步骤操作

# 1.去掉加载注释

在根目录下去掉下面两段标签的注释

<!-- 如果有使用mui,就不要注释下面两个标签 -->
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.muiSourcePath %>assets/css/mui.min.css">
<script src="<%= htmlWebpackPlugin.options.muiSourcePath %>assets/js/mui.min.js"></script>

# 2.使用npm run build:mui打包

这个命令会复制assets中的文件到打包目录.

# 常见问题

常见问题一般来说就是白屏问题,或者页面不存在,可能有以下几种情况

Q1:删除一些页面后控制台报错

这是由于HtmlWebpackPlugin没有找到模板的问题,只需要重新npm start即可.

Q2:npm start控制台报语法错误

请升级你的 node 到最新版本

Q3:npm start后出现空白页面无法显示

1. 电脑和调试的手机需要在同一个局域网下面
2. npm start后如果局域网 ip 地址有变,请同时在 manifest.json 中修改页面入口