APP demo download address

preface

Multiple pages are used for simpler pages, because simple pages are too cumbersome to use the Router. This scaffold was developed for such a scenario.

Scaffolding with Hbuilder can also be used to quickly develop Android and IOS apps using VUE.

The main features of this paper:

  • webpack4
  • Multiple page
  • Cross-domain Proxy Proxy
  • VConsole mobile debugging, mobile developer tools
  • Es6 / es7 Babel translation

The project addressGitHub

The manual

MogoH5+ is a vue multi-page scaffolding tool, combining with H5+ can quickly develop Android and Apple apps.

This scaffold can be used as a reference project for multi-page web generation even if it is not suitable for Hbuilder packaging as an APP.

features

  • Support Npm ecology
  • Support for VUE syntax, as well as vUE ecology, such as Vux, Mint,vant
  • ES6/ES7 syntax is supported
  • Debug using VConsole
  • VSCode friendly
  • LAN easy debugging
  • Compatible with partial MUI syntax

These features are not really new, they just don’t work in Hbuilder alone.

Quick learning

Download the project directly and customize the package according to the demand, and finally generate APP through Hbuilder cloud package.

This article includes an example of several interfaces developed using VantUI, which can be replaced with other UI if you prefer.

Install the module NPM I // or YARN // 2. NPM start // change manifest.json's 'page entry' to http://your_ip:8082/ // 3. Package the NPM run buildCopy the code

use

How to use MogoH5+ to do formal development, in the development process must follow the directory rules, otherwise there will be unexpected errors.

The directory structure

.├ ─ docs // Document ├─ index.html // Import Template ├─ manifest.json // hBuilder Import File ├─ SRC │ ├─.html Components / / component folder │ │ └ ─ ─ the List. The vue / / component │ ├ ─ ─ index. The js / / home page entry documents │ ├ ─ ─ index. The vue / / homepage vue file │ ├ ─ ─ page / / page │ └ ─ ─ utils / / tools ├ ─ ─ unpackage / / hbuilder build directory │ └ ─ ─ res └ ─ ─ webpack. Config. Js / / webpack configuration directoryCopy the code

A new page

/ SRC /page/goods create list.js and list.vue. List. js is a multi-page entry, and list.vue comes with several pages for reference.

Following the relative path rule, this is./goods/list.html if you visit this page from SRC!! The suffix must be.html

The new component

/ SRC/Components. If there are many components, create their own directories. For example, the Logo component used in the demo can be used as a reference.

Creating a Tool Library

/ SRC /utils mainly contains some common functions, such as request, open webview, pay, share, etc. Demo encapsulates some functions from MUI, such as custom events, webView. These functions serve as a reference.

'common.js' is the single JS that needs to be loaded on every page, with' fastclick 'and' vconsole 'in it. / SRC /utils' does this./ SRC /utils' does thisaliasThe 'import common from' alias can be loaded directly like this"Utils/common"`.
Copy the code

Send the request

Request library

Demo requests use AXIos, and again you can wrap whatever library you like.

The common request libraries have the fetch, request, SuperAgent, jquery – ajax.

Cross domain

Because after NPM start, the debug web page is hung on the LAN and serves as the page entry to the Hbuilder, cross-domain can occur when requested.

Use the local proxy in./build.js and change the following https://api.douban.com to your own business domain name.

proxy: {
    "/api": {
      name:"DOUBANAPI".// Use your own name
      target: "https://api.douban.com".pathRewrite: { "^/api": "" },
      changeOrigin: true.secure: false
    },
     "/baidu_api": {
      name:"BAIDUAPI".// Use your own name
      target: "https://api.baidu.com".pathRewrite: { "^/api": "" },
      changeOrigin: true.secure: false},... }Copy the code

You can add more service domain names to proxy.

Cross-domain problems only occur during development, the url of the packaged file will be replaced by the propped URL, so make sure to send requests with the name DOUBANAPI

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

debugging

There are many problems with debugging in Hbuilder, such as:

  • You can’t print it directlyAn array of.object, needs to be converted to a string.
  • Even usingThe webview debugging, still can’t print out arrays and is very inconvenient to use on a MAC.

With VConsole, the problem of debugging is basically taken away from Hbuilder. The main advantages of using VConsole are as follows

  • You can print arrays, objects
  • You can view requests, cookies,Localstorage
  • inSystemYou can see the page loading speed in the column
  • You can view elements

Basically a simplified developer toolbar, very easy to debug.

packaging

npm run build
Copy the code

Running the command brings up a dist directory with compressed static files.

Hbuilder release package

Before creating the installation package using Hbuilder, change the entry file to dist/index.html. Then you can pack in peace.

Compatible with mui. Js

For the issue of compatibility with some muI functions, some functions have been ported to Utils and will be ported slowly in future updates.

Q&A