小编给大家分享一下Python怎么用HBuilder创建交流社区APP,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
使用HBuilder
做一个简单的社区浏览界面。
这是对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>
<h2>社区</h2>
</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" ></div>
<div>
</div>
<div>
<!--页脚,放置交互按钮-->
<button type="button" class="mui-btn mui-btn-outlined" >点赞</button>
<button type="button" class="mui-btn mui-btn-outlined" >评论</button>
<button type="button" class="mui-btn mui-btn-outlined" >浏览更多</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>
看完了这篇文章,相信你对“Python怎么用HBuilder创建交流社区APP”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。