A few years ago, I often used the Hbuilder development period. At that time, REACT and Vue did not become a trend, and projects generally used MUI UI component library. I know a little about Hbuilder related development

Hybrid development

In recent years, the company adopts Hybrid development and Hybrid + VUE development mode

Staffing:

  • 1 Android
  • 1 ios developer
  • 1-2 bit front-end development,
  • N a background

In terms of personnel allocation, there may be a few less native developers, but the staff still needs a native development engineer. For small and medium-sized companies, the project cost is too heavy, and it is more likely that 1-2 front-end developers can handle App

Hbuilder APP

Hbuilder website

The UI component recommended by Hbuilder official website is Mui. I defined the method by myself and stripped the jquery method. Anyway, I have not used much, and I feel confused.

Here is the Hbuild app packaging process, you can download Hbuilder to experience yourself

I don’t have an ios developer certificate and can only pack android packages

Real machine commissioning

Running. - The real thing is running

For iPhone, please download Xcode (must be on MAC) for Android, please download Android Studio (either MAC or Windows)

Baidu download and install their own

Vue React + Hbuilder

Vue React is popular, I will not say here, look at the recruitment website can be imagined.

Try hand vue + Hbuilder combination

In my opinion, if the vue/ DIST project code directly copy in the Hbuilder new project, and then run – the real machine run, whether it can run?

It turns out it can

Dist /index.html after CNPM run build, copy and paste to muI project as shown below

The key is mainifest. Json. As long as the file exists in the project and is placed in the project file, it can be made into apK package by Hbuilder

This step can generate apK package, download and install!

Android phone installation apK, or some steps! Here I offer a method: dandelion application internal test official website

Go to dandelion register account, and upload your generated APK package, scan code download, simple, easy to operate;

Use Hbuilder to package vUE projects into mobile apps

Plus native method

In the VUE project, we use vue-Router to build the route, which is a single page. However, there is a physical return key in Android phone, and the physical return key cannot perform our this.$router.back() page return, so we have to call the native method

Netizen’s method:

  • Press the back button to return to the previous page.
  • Hbuilder a practical solution to the return key problem when packaging apps
  • Resolve Hbuilder package app return key exit directly

I actually project out, and then attached to the relevant Android physics back key code

HTML5 China Industry Alliance

The API Reference encapsulates many of the native method functions, which are edited directly on the project and then packaged in Hbuilder to run the Plus method

  • plus.nativeUI.alert( “Plus is ready!” ) alert box
  • Plus.nativeui. Toast (message, options) toast pop box
  • plus.nativeUI.pickDate( successCB, errorCB, options ); Date picker
  • plus.key.addEventListener( keyevent, listener, capture ); This return can listen for the material return key

You can go and check it out

How the code is represented is as follows:

Finally introduced

MogoH5+

MogoH5+ framework A framework that leverages the features of Vue and Builder to build your desired UI component library in the form of MUi Vant Vux Plus native Axios

Note:

  • Vue-router is not recommended as a single page and is developed in a multi-page format
  • The node version must be 8 or later. An error occurs when node 6 is running

For small companies, project outsourcing apps are a good choice, leaving out ios developers and Android developers, so you can fly by yourself

If you do not use MogoH5+ Vue multi-page framework and want to directly use Webpack + Vue + VUe-Router to build the project, the most important thing to pay attention to is the physical back button of Android, otherwise clicking the logistics back button will exit the App

I don’t have a real APP project yet, because I can’t think of what needs to be done, so I don’t have a demo to look at. Just create a single page project of MogoH5 and Vue these days, and then add it to this article