MogoH5+

开发

下载脚手架

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

Git clone

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

直接下载

下载地址

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

运行脚手架

// 1 进入项目主目录
cd mogo-h5plus
// 2 安装npm依赖
npm i  // 或者 yarn  请不要使用cnpm
// 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 基座进行调试测试.

新建页面

假如我们要新建一个名称为list的页面作为商品列表,我们就要在./src/page/goods下新建list.js和list.vue两个文件.list.js作为多页面的入口,list.vue,脚手架自带了几个页面可供参考.

{
  "index|plusReady": "./src/main.js",
  "goods.detail": "./src/page/goods/detail.js",
  "goods.cart": "./src/page/goods/cart.js",
  "mui.index|mui|plusReady": "./src/page/mui/index.js"
}

访问页面

openWebview({ url: "./goods.cart.html", id: "goods.cart" });
openWebview({ url: "./mui.index.html", id: "mui.index" });

这里要注意 2 个细节:

  1. 后缀一定是.html
  2. id 要按照页面的规范,不要出现重复 id

删除页面

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

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

新建组件

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

新建工具库

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

common.js 是每个页面都需要加载的一个 js,里面加载了fastclick和vconsole.如果全局需要加统计,全局执行的函数,可以放在这个文件里面.

./src/utils 做了 alias别名,可以 直接这样加载 import common from "Utils/common".

utils 是我们会经常修改的, 如果有自己的工具库,请另建文件夹

请求代理配置 Proxy

首先,只有开发的过程中才会有跨域的情况.App 中不存在跨域.

为什么会有跨域呢?

MogoH5+的调试是使用npm run dev构建了一个局域网服务器的,比如http://192.168.199.155:8080/,这样的好处就是视图修改同步很快,不受 Hbuilder 的限制.

起初考虑过webpack watch来实现,但是发现watch之后的文件变化 HBuilder 无法第一时间反应,也就是说,修改了一个界面,需要等 Hbuilder 发现文件差异才会去更新真机的试图.因此才考虑局域网服务器的.

请求库

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: { "^/baidu_api": "" },
      changeOrigin: true,
      secure: false
    },
    ...
  }

如果有更多业务域名可以继续在proxy添加.

只有开发的时候才会有跨域问题,打包后的文件网址会被替换成被代理的网址,因此发送请求一定要加上名称DOUBANAPI

request({
  url: DOUBANAPI + "/bookList" // 在打包后会变成 https://api.baidu.com/bookList
});

调试

VConsole

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

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

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

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

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

由于 VConsole 并不能解决全部调试问题,比如页面关闭后调试信息消失,增加一个 print 方法,用于在 Hbuilder 上打印对象

print(someObjorArray);

使用 mui

  1. 首先在page.json中给需要使用mui的页面加入|mui,这一步,mui的js将会嵌入到改页面当中.

  2. 使用相对路径加入 mui 的 css,加入方式如下:

<style lang="less">
@import '../../assets/mui/mui.css';
</style>

使用 vux/vant

系统默认安装了vux和vux-loader,vant也是默认添加的,直接 import 使用即可.

import { Group, Calendar, Cell, Badge, CellBox, XButton } from "vux";

如果您不使用 vux,或 vant,可以将其编译器去除来提高您的开发构建效率.具体方式

page.json 配置

这是一份来自demo的页面配置,多页面的主要配置也是来自这里,具体实现细节请参看[多页面的实现]

{
  "index|plusReady": "./src/main.js",
  "goods.detail": "./src/page/goods/detail.js",
  "goods.cart": "./src/page/goods/cart.js",
  "mui.index|mui|plusReady": "./src/page/mui/index.js",
  "user.index": "./src/page/user/index.js",
  "vux.index|plusReady": "./src/page/vux/index.js"
}

在配置的键中发现了|符号,|后面的值表示页面加载参数,这里主要对一些参数作解释

参数解释备注
mui在页面中加载 mui,使用后 mui 会挂在到window上/
plusReady是否使 plus 提前生效 ,提前生效就可以不用监听 plus 是否已经生效仅在安卓上有效

注意:plus 在安卓上提前生效会增加 50-200ms(根据性能)的加载时间,可以通过增加窗口过场动画的时间弥补,或者预加载窗口

← 发布 →