本文轉(zhuǎn)自微信公眾號(hào)："算法與編程之美"
1、問題描述
使用HBuilder做一個(gè)簡(jiǎn)單的社區(qū)瀏覽界面。
2、解決方案
這是對(duì)HBuilder學(xué)習(xí)后想做的一些關(guān)于這個(gè)軟件的一些心得，有了這個(gè)接觸，想分享一些初學(xué)者可以用到的一些使用方法，讓更多初學(xué)者可以早一些熟悉HBuilder，可以熟練的運(yùn)用它做出自己想要的一個(gè)界面。首先對(duì)于HBuilder的安裝，安裝好后新建一個(gè)移動(dòng)APP的包，在里面再創(chuàng)建一個(gè)HTML的文件，選擇函mui的HTML，然后因?yàn)槭巧鐓^(qū)，就要有頭部和尾部，在這里，是有head，body構(gòu)成，頭部在head的區(qū)域內(nèi)附上代碼，在body中附上底部代碼，就有一個(gè)最基本的頁(yè)面。然后是加入社區(qū)分享部分，我們可以加入頁(yè)眉和頁(yè)腳，頁(yè)眉里面可以“img src”插入圖片使用“class”和“style”調(diào)整格式；使用“button”在頁(yè)腳插入我想要的跳轉(zhuǎn)按鈕，同時(shí)也可以使用“class”和“style”調(diào)整格式。
相應(yīng)代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
<!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>社區(qū)</h1></header> <div><!--頁(yè)眉，放置標(biāo)題--><div></div><div class="mui-card-header mui-card-media"><img src="06.jpg" /><div>小M<p>發(fā)表于 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><!--頁(yè)腳，放置交互按鈕--><button type="button" class="mui-btn mui-btn-outlined" style="color: #007AFF;">點(diǎn)贊</button><button type="button" class="mui-btn mui-btn-outlined" style="color: #007AFF;">評(píng)論</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>首頁(yè)</span> </a> <a> <span class="mui-icon mui-icon-pengyouquan"></span> <span>社區(qū)</span> </a> <a> <span class="mui-icon mui-icon-list"></span> <span>購(gòu)物</span> </a> <a> <span class="mui-icon mui-icon-contact"></span> <span>我的</span> </a></nav></html> |
3、結(jié)語(yǔ)
這次是學(xué)習(xí)并使用HBuilder后的一個(gè)心得總結(jié)，還是有很多不懂不熟練的地方，會(huì)繼續(xù)學(xué)習(xí)，將他做好。
到此這篇關(guān)于Python用HBuilder創(chuàng)建交流社區(qū)APP的文章就介紹到這了,更多相關(guān)Python用HBuilder建立APP交流社區(qū)內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
