[Software combat] Own your own software in 5 minutes (tutorial + finished product display)


foreword

insert image description here

5 minutes, after reading the tutorial, everyone can have a software of their own

insert image description here
This is the software installer logo I designed
insert image description here

Simple example

1.Easy code

Let's first write a simple button to jump to the web page and see if it can achieve a gorgeous turn

<!DOCTYPE html>
<html>
	<head>
		<meta charset="gb2312"> 
		<title>九芒星示例</title> 
		<style>
			.button {
      
      
				background-color: #00FFFF;
				border: none;
				color: black;
				padding: 15px 32px;
				text-align: center;
				text-decoration: none;
				display: inline-block;
				font-size: 16px;
				margin: 4px 2px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<center><br><h2>举一个简单的例子,通过按钮跳转到CSDN首页链接</h2></center>
		<center><h2>功能设置简单,举一反三,程序自行设计</h2></br></center>
		<center><a href="https://blog.csdn.net/" class="button">点我跳转CSDN</a></center>
	</body>
</html>

2. Web page effect

This is the rendering of a normal HTML page
insert image description here

3. Software effects

This is the effect of turning into an exe file.

The following is the download link of the nine-pointed star_ sample software , curious friends can go and see

Baidu network disk link:
https://pan.baidu.com/s/1lUcou_BvIl-qogctjP8qZw?pwd=wbis
Extraction code: wbis
insert image description here

If you want to turn a similar program into computer software, it's very simple, just read the tutorial carefully

Next, I will use a personal website as an example,5 minutes to take you to have your own software

insert image description here

1. HTML to exe

1. Install HtmlCompiler

insert image description here

HtmlCompiler Baidu network disk link:
https://pan.baidu.com/s/1v3vSzXCZYoXNP_5dEBJGNA?pwd=yp72Extraction
code: yp72

2. Import the HTML program

Open the software and create a new project

insert image description here

Select the index file in the program. The website is generally the index.html homepage file. If the program you wrote is relatively simple, you can choose it yourself.

insert image description here

Find the homepage file of the website and confirm

insert image description here

Displays the effect of the index file

insert image description here

3. Project configuration

Select Edit, Project Options

insert image description here

The title of the application is the text displayed in the upper left corner of the software. You can choose the icon yourself. Remember that it must be in ico format (if you change the suffix directly, an error will be reported). You can convert the format on the following website.

Image to ico URL : https://www.bitbug.net/ .

insert image description here

Click Test in the window options to adjust the window size after the software is opened

insert image description here

In the compile options, select the location and name of the output file, save

insert image description here

In the operation options, check all the following flags, save

insert image description here

4. Packaging the HTML project

Go back to the home page, click the button with the gear to pack

insert image description here

Click the compile button and wait a few seconds

insert image description here

Now, the HTML program has been packaged into exe format, double-click to open to see your program

insert image description here

The content involves privacy, and only some pages are displayed

insert image description here

Some people will say, isn't this just an ordinary exe file?

So how to make it go the way of software instead of just limited to exe files? ——package exe

Simply put, it is to make a software installer

insert image description here

2. Package exe

1. Install Inno Setup

Inno Setup Baidu network disk link:
https://pan.baidu.com/s/1vX-s0odlkoOtwwdmMcHKXQ?pwd=twq9 .
Extraction code: twq9

2. Create a new script

Open the software, select New Script, OK

insert image description here

Default, Next

insert image description here

Fill in some basic information of the software (play by yourself), Next

insert image description here

Default, Next

insert image description here

3. Select the main executable file

Select the exe file that was packaged just now. If there are other configuration files or description texts, select them in the place where the files are added below, and package them into the installation package together.

insert image description here

Default, Next
insert image description here

Default, Next

insert image description here

Default, Next (can be skipped directly, if you develop regular software, you need to fill in truthfully)

insert image description here

Default, Next

insert image description here

4. Configure the basic information of the package

Default, Next (installer language setting, free choice)

insert image description here

Fill in the basic information of the software, the file name should be in English as much as possible, the Chinese name may report an error/garbled character, and the file icon should be in ico format, the requirements are the same as above

insert image description here

Default, Next

insert image description here

Default, Next

insert image description here

5. Start compiling

Default, yes

insert image description here

Default, yes

insert image description here

Select the installation package name and save location, the location selection should be consistent with the above file save path (1. 4. Project configuration)

insert image description here

Just wait for a few seconds (due to the large website file, the packaging time is slightly longer)

insert image description here

3. Effect display of finished software

As you can see, the software installer has been packaged, let's take a look at the effect

insert image description here

Double-click the installation package and enter the previously set password

insert image description here

Choose an installation location

insert image description here

continue by default

insert image description here
Install

insert image description here
Wait a few seconds, the installation is successful

insert image description here

It can be seen that the packaged exe is successfully installed on the computer through the installer.
insert image description here

insert image description here

Open the software, the effect is as follows (involving privacy, only some pages are displayed)

insert image description here

4. Personal experience

The operation is very simple, when you see this, you can already make a software!

At the end of the article, let me talk about my experience. Originally, I didn't think about packaging the front-end project. Since the cost of continuing the server is too high, I thought about using the entire flat version first. After I made the website into software, I found that the effect was okay, so I wrote a tutorial and shared it with everyone.

This kind of software production is simple, but it relies too much on the network, which is very bad, and if you look at it from the point of view of software development, it is very bad. At least, none of the software on the market does this. Just like the client apps we usually use, such as WeChat, AutoNavi Map, Taobao, and NetEase Cloud Music, we basically use Java and C++. Even in the aspect of making websites, such as the development of CSDN websites, Java is basically used.

And most of the personal projects we usually do are based on Python, Java, and C++. Therefore, we have to consider the impact of databases, environment variables and other configuration files when packaging projects. Taking the packaging of Python and Java projects as an example, although the process is not complicated, the details are extremely demanding. I believe that many people have been tortured by countless errors in the packaging process, so I won't go into details here.

Having said so much, I actually want to tell everyone, just take it and have a good time. To develop regular software, you still need to learn to package it well. It is not so easy to make software!

insert image description here

Guess you like

Origin blog.csdn.net/weixin_48701521/article/details/124441249