Of Stack

Python Create Communication Community APP with HBuilder

  • 2021-12-13 08:38:52
  • OfStack
Catalog 1, Problem Description 2, Solution 3, Conclusion

This article is transferred from WeChat official account: "Beauty of Algorithm and Programming"

1. Problem description

Use HBuilder Make a simple community browsing interface.

2. Solutions

This is right HBuilder After learning, I want to do 1 some experience about this software. With this contact, I want to share 1 some usage methods that beginners can use, so that more beginners can be familiar with it earlier. HBuilder , you can skillfully use it to make your own desired interface. First of all, for HBuilder Installation, after installation, create a new mobile APP package, and then create a file of HTML in it, and select the letter mui Adj. HTML And then because it is a community, it has to have a head and a tail. Here, it has a head and a tail head , body Composition, head in head Enter the code in the area of body Attached with the bottom code, there is a most basic page. Then we join the community sharing part. We can add headers and footers, and the headers can " HBuilder0 "Insert picture for use" class "And" style "Format; Use" button "Insert the jump button I want in the footer, and you can also use the" class "And" style "Adjust the format.

Corresponding code: 


<!DOCTYPE html>

<html>

 

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<title></title>

<script src="js/mui.min.js"></script>

<link href="css/mui.min.css" rel="external nofollow"  rel="stylesheet" />

<script type="text/javascript" charset="utf-8">

mui.init();

mui.plusReady(function() {

var subPages = ['home.html', 'shopping.html', 'community.html', 'personal.html'];

var subPageStyle = {

top: "20px",

bottom: "50px"

}

var mainViwe = plus.webview.currentWebview();

for(var i = 0; i < subPages.length(); i++) {

var url = subPages[i];

var subViwe = plus.webview.create(url, url, subPageStyle);

subViwe.hide();

mainViwe.append(subViwe);

}

plus.webview.show(subPages[0]);

})

</script>

</head>

<br />

<br />

 

<body>

<header class="mui-bar mui-bar-nav">

<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

<h1> Community </h1>

</header>

 

<div>

<!-- Header, place title -->

<div></div>

<div class="mui-card-header mui-card-media">

<img src="06.jpg" />

<div>

 Small M

<p> Published in  2016-06-30 15:30</p>

</div>

</div>

<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(01.png)"></div>

<div>





</div>

 

<div>

<!-- Footer, place interactive buttons -->

<button type="button" class="mui-btn mui-btn-outlined" style="color: #007AFF;"> Praise </button>

<button type="button" class="mui-btn mui-btn-outlined" style="color: #007AFF;"> Comments </button>

<button type="button" class="mui-btn mui-btn-outlined" style="color: #007AFF;"> Browse more </button>

</div>

</div>

<br />

<br />

</body>

<nav class="mui-bar mui-bar-tab">

    <a class="mui-tab-item mui-active">

        <span class="mui-icon mui-icon-home"></span>

        <span> Home page </span>

    </a>

    <a>

        <span class="mui-icon mui-icon-pengyouquan"></span>

        <span> Community </span>

    </a>

    <a>

        <span class="mui-icon mui-icon-list"></span>

        <span> Shopping </span>

    </a>

    <a>

        <span class="mui-icon mui-icon-contact"></span>

        <span> Mine </span>

    </a>

</nav>

</html>

3. Conclusion

This time it's learning and using HBuilder After a summary of my experience, there are still many unskilled places, so I will continue to study and do him well.

Related articles: