Python用HBuilder创建交流社区APP
作者:王晓姣 发布时间:2023-08-27 13:22:19
标签: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
后的一个心得总结,还是有很多不懂不熟练的地方,会继续学习,将他做好。
0
投稿
猜你喜欢
- 1.DNS查询过程:以查询 www.baidu.com为例(1)电脑向本地域名服务器发送解析www.baidu.com的请求(2)本地域名服
- 本文实例讲述了PHP实现更改hosts文件的方法。分享给大家供大家参考,具体如下:有这样一个需求,我有多个网址希望在不同的时候对应不同的 i
- 前言有时候我们需要把图片填充成某个数字的整数倍才能送进模型。例如,有些模型下采样倍率是8倍,或者16倍,那么输入的长和高就分别应该是8或16
- 前言最近在B站上看到一个漂亮的仙女姐姐跳舞视频,循环看了亿遍又亿遍,久久不能离开!看着仙紫小姐姐的蹦迪视频,除了一键三连还能做什么?突发奇想
- 我就废话不多说了,还是直接看代码吧!import pandas as pd# 伪造一些数据fake_data = {'subject
- 在PHP中,我们不能用const直接定义数组常量,但是const可以定义字符串常量,结合eval()函数使字符串常量能执行。所以,我们可以用
- 本文实例讲述了Python面向对象程序设计之继承、多态原理与用法。分享给大家供大家参考,具体如下:相关内容:继承:多继承、super、__i
- 前言Python 这门语言最大的优点之一就是语法简洁,好的代码就像伪代码一样,干净、整洁、一目了然。但有时候我们写代码,特别是 Python
- 在调试爬虫的时候,新手都会遇到关于ip的错误,好好的程序突然报错了,怎么解决,关于ip访问的错误其实很好解决,但是怎么知道解决好了呢?怎么确
- 本文实例讲述了Python脚本实现虾米网签到功能的方法。分享给大家供大家参考,具体如下:概述这个脚本完成了自动登录虾米网、签到的功能。大致要
- 1、程序执行代码:#Author by Andy#_*_ coding:utf-8 _*_import os,sys,timeBase_di
- 一、报错: 「Can't swap PDO instance while within transaction」通过查询 Larav
- 1.什么是pandas2.查看pandas版本信息print(pd.__version__)输出:0.24.13.常见数据类型常见的数据类型
- 前言在pandas模块中,通常我们都需要对类型为DataFrame的数据进行操作,其中最为常见的操作便是拼接了。比如我们将两个Excel表格
- numpy对数组求平均时忽略nan值在对numpy数组求平均np.mean()或者求数组中最大最小值np.max()/np.min()时,如
- 一、图像缩略图的编辑图像的缩略图是指把图像按原比例缩小,可作为原图的预览,这在网络速度比较慢时可快速地显示图片的概图。当你的网页上有大型图片
- 为庆祝jQuery的四周年生日,jQuery官方团队正式发布了jQuery 1.4版本。在这个版本中,jQuery官方团队做了大量的编码、测
- OUTLINE 常见的时间字符串与timestamp之间的转换日期与timestamp之间的转换常见的时间字符串与timesta
- PERCONA PERFORMANCE CONFERENCE 2009上,来自雅虎的几位工程师带来了一篇”Efficient Paginat
- 第一次使用csdn写一个文章,如果有什么写的不对的地方,欢迎在下面评论指正,谢谢各位。1.明确要使用的包首先就是opencv的函数库,还有p