Python用HBuilder创建交流社区APP

1、问题描述

使用hbuilder做一个简单的社区浏览界面。

2、解决方案

这是对hbuilder学习后想做的一些关于这个软件的一些心得，有了这个接触，想分享一些初学者可以用到的一些使用方法，让更多初学者可以早一些熟悉hbuilder，可以熟练的运用它做出自己想要的一个界面。首先对于hbuilder的安装，安装好后新建一个移动app的包，在里面再创建一个html的文件，选择函mui的html，然后因为是社区，就要有头部和尾部，在这里，是有head，body构成，头部在head的区域内附上代码，在body中附上底部代码，就有一个最基本的页面。然后是加入社区分享部分，我们可以加入页眉和页脚，页眉里面可以“img src”插入图片使用“class”和“style”调整格式；使用“button”在页脚插入我想要的跳转按钮，同时也可以使用“class”和“style”调整格式。

相应代码：

<!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>社区</h1>

</header>

 

<div>

<!--页眉，放置标题-->

<div></div>

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

<img src="06.jpg" />

<div>

小m

<p>发表于 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>

<!--页脚，放置交互按钮-->

<button type="button" class="mui-btn mui-btn-outlined" style="color: #007aff;">点赞</button>

<button type="button" class="mui-btn mui-btn-outlined" style="color: #007aff;">评论</button>

<button type="button" class="mui-btn mui-btn-outlined" style="color: #007aff;">浏览更多</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>首页</span>

    </a>

    <a>

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

        <span>社区</span>

    </a>

    <a>

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

        <span>购物</span>

    </a>

    <a>

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

        <span>我的</span>

    </a>

</nav>

</html>

3、结语

这次是学习并使用hbuilder后的一个心得总结，还是有很多不懂不熟练的地方，会继续学习，将他做好。

到此这篇关于python用hbuilder创建交流社区app的文章就介绍到这了,更多相关python用hbuilder建立app交流社区内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！

黄山市民网：https://www.huangshanshimin.com/

目录

1、问题描述

2、解决方案

3、结语

相关文章