From the first day of contact with Android development, I think I have fallen in love with development, hahaha, I hope you and I will stick to it because of love and mutual encouragement! I haven't updated the blog these days because I went to study (the days when I didn't meet, I was working hard hahaha). I have thought of using an emulator to run it, but the emulator takes up too much memory and feels that it does not have a good experience on the real machine, so I went directly to the real machine. In order to write this article well, I have tried it on multiple computers hahaha, hoping to help more friends like me.
table of Contents
1. A brief introduction to hybrid development
HybridApp refers to a hybrid application that uses native and H5 development technologies in order to improve efficiency and save costs when developing an App product. APP shell + H5 webpage = mixed mode APP.
Hybrid development is a development mode that combines native and H5 development technologies to complement each other. The native code part uses WebView plug-ins or other frameworks to provide a container for H5. The main business implementation and interface display of the program use H5 related Web technologies. To be realized.
For example, JD.com, Taobao, Tmall, Toutiao, WeChat, etc. are all used hybrid development models.
2. Prerequisite preparation
2.1 Tool: Hbuilder
2.2 Framework mui
Add knowledge of mui (high-performance front-end framework)
https://dev.dcloud.net.cn/mui/window/
2.3 Connecting to a real
phone The developer mode of each mobile phone is different. Baidu will check how to turn on its own developer mode.
Anyway, there are generally three:
- Keep clicking on your own software version number until it appears that you are already in developer mode
- Open developer options
- Turn on USB debugging
Take Android 6.0 as an example: Click here
to note that
- Use the data cable to connect the computer usb port and the mobile phone. (Some data cables can only charge, but cannot transmit data)
- After the phone is connected to the computer, the default is the charging mode, and the data transmission mode must be selected. (Charge, transfer photos, transfer data).
If you can’t connect, then download a 360 mobile assistant (both computer and mobile phone), the operation is very simple, because my mobile phone is not connected, but generally it can be connected, because I see everyone else is connected Up.
3. New mobile app project
Create a new mobile app project
Click File——"New——"Mobile App
write your own application name, select the template of the mui project, and click OK
. A mobile app project is created!
Fourth, write code (immersive development)
Hahaha, for example, let's take a simple
Enter in the body one by one
1. mh回车 标题
2. mt回车 底部选项卡
3. ms 回车选择第二个 轮播
4. mg 回车 九宫格
Note: Shortcut key: https://dev.dcloud.net.cn/mui/snippet/
index.html
<!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="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">欢迎关注这个超级无敌可爱的人鸭</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
</body>
</html>
(Due to time constraints, only such a page was written)
In HBuilder, we can click on the upper right corner and select the point-and-see mode, so that we can see what we are running on the right.
What I see on the phone is like this
Five, json file configuration
Click on this file
Click on the application information in the lower left corner, let’s see what each item means
The application name is the name under the app.
Appid is the id number. This is the
app version number generated automatically after logging in to HBuilder . This seems to be able to be changed. The
page entry is the first page loaded. The
bottom of the page is automatically horizontal and vertical according to the gravity sensor. This can be literally. understand!
Click on the icon information, you can set your own app logo, the following is to adjust different sizes according to different mobile phone versions.
The startup page is just a flash in the pan. Open the app and it will pop up.
SDK configuration is a third-party tool, such as Baidu map, QQ WeChat login
module permission settings, as the name suggests, is the permission for this app
I will ponder over the next two. . .
Next we can try how to publish in the cloud~
6. Cloud publishing
6.1 Production certificate
Open cmd (note: here should be run by right-click administrator , hahaha to develop good habits, generally run by administrator)
input the command
keytool -genkey -alias swetty -keyalg RSA -validity 10000 -keystore d:/mykey1.keystore
swetty表示证书的别名
keyalg：RSA 表示采用的RSA算法
validity：10000 表示证书的有效期是10000天
(Of course the drive letter can be set by yourself)
Then you can enter your password
as shown in the figure. After the
above operation is completed, such a file will be generated on the D drive
. This file will be used later.
6.2 Choose authentication in HBuilder cloud
Select Help, click Q&A Mutual Assistance
Basic Information Authentication, enter the phone number and
click
Mobile phone number verification (mobile phone number verification is sufficient).
Your HBuilder account must be verified in the community to upload.
6.3 Release
Click Publish-"Click to publish as a native installation package
Click to use your own certificate-"The private key password is the password you just entered in the cmd for the production certificate.
Click Package-"Ignore and continue to package
Continue to package
Click OK
6.4 Download mobile apk file
At this time, you can download it manually. After downloading it, click Manual Download
. Then send the apk file to your QQ, download it with your mobile phone, and click Install again
. ! !
This is how it looks like after the installation (the last app was just downloaded).
Such an app was released successfully and finally finished.
https://blog.csdn.net/hanhanwanghaha Welcome to follow this super invincible and cute duck. If you have any questions, you can leave a private message and you will reply if you see it!
If reproduced, please indicate the source