Python用HBuilder创建交流社区APP
本文转自微信公众号："算法与编程之美"
1、问题描述
使用HBuilder做一个简单的社区浏览界面。
2、解决方案
这是对HBuilder学习后想做的一些关于这个软件的一些心得，有了这个接触，想分享一些初学者可以用到的一些使用方法，让更多初学者可以早一些熟悉HBuilder，可以熟练的运用它做出自己想要的一个界面。首先对于HBuilder的安装，安装好后新建一个移动APP的包，在里面再创建一个HTML的文件，选择函mui的HTML，然后因为是社区，就要有头部和尾部，在这里，是有head，body构成，头部在head的区域内附上代码，在body中附上底部代码，就有一个最基本的页面。然后是加入社区分享部分，我们可以加入页眉和页脚，页眉里面可以“img class="lazy" data-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 class="lazy" data-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 class="lazy" data-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交流社区内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
