html5+ developing mobile App Tutorials 3-mui development examples

Source: Internet
Author: User

Objective

Have you looked at the previous two articles for a little bit of an itch?

Let's start with an example of a simple answer, as well as MUI-related content


Mui

Official website: http://dcloudio.github.io/mui/

Description: I hope you can read through the official website, this is the basis for future development


Begin
New Project

Click on the new mobile app on the home page, as follows:

or right-click New in the Project manager, or shortcut key Ctrl+n+a

Select Templates

Selecting the MUI project here will automatically introduce the MUI's JS and CSS as follows:

File structure

The following folders are available by default: Css,fonts,js, as follows:


Simple Development Header

After opening the index.html, enter MH in the body and return as follows:

Body

Enter the same MBO after the return

List

Add some lists to Mbody

The final code
<! DOCTYPE html>


Debug (Android for example) connect your phone

First you need to connect your phone

Run

Choose Run-Phone run-run on XX device

Or use the shortcut key Ctrl+r

Effect

Now you can see the effect on your phone.

Attention

Need to open developer mode


Packaging Dcloud Certificate Packaging

Choose release--app Package--Choose android and Dcloud public certificates as follows:

Parameter configuration

May sometimes prompt for parameter configuration errors, which is what you need to open the project under the Manifest.json file, and remove the third-party plugin, as follows:

Wait

Go back to the last step of the release package, click Pack will prompt you to go to the cloud packaging, you just have to wait,

After a little while, you'll be able to copy the APK to your phone and use it.


More

For more articles, visit: http://uikoo9.com/blog/list

html5+ developing mobile App Tutorials 3-mui development examples

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.