2016 - 2024

感恩一路有你

javascript打开文件选择对话框 HTML窗口弹出代码?

浏览量:1134 时间:2023-04-02 07:51:59 作者:采采

HTML窗口弹出代码?

lt/titlegtltscriptgtfunctionwelcom

前端开发的网页如何打包为手机APP和桌面exe文件?

这里 这是一个简单的介绍。你可以用HBuilder打包一个手机App,用Electron打包一个桌面exe。我来详细介绍一下包装流程。主要内容如下:

正在打包移动应用程序1。首先你需要下载HBuilder,可以直接从官网下载。如下,选择适合自己的平台。这里我们选择 "应用开发版 ",它有更多的功能:

2.下载后直接解压这个文件就行了,如下,不用单独安装就可以直接使用了:

3.接下来我们打开这个软件,在菜单栏点击文件-gt新建-gt项目,选择5 APP(A)作为项目类型,Hello H5作为模板,如下:

为了便于演示,我在这里创建了一个新文件。测试代码如下。这很简单。这是一个登录页面。输入用户名和密码,提交后打印出欢迎对话框:

浏览器打开后,效果如下,简单明了:

4.最后,打包程序,主要步骤和截图如下:

首先双击项目的mainfest.json配置文件,在基本配置页面,点击获取唯一应用ID,设置应用门户页面,就是上面测试的那个:

配置好mainfest.json后,右键点击项目,在弹出列表中选择Publish-gt Native APP-Cloud Packaging(P)。在App云打包页面,选择需要打包的手机平台,确认包名,也就是刚才的应用logo,如下图:

最后,单击 "打包 "按钮开始云打包。打包完成后,会自动生成一个下载链接。在这里,我们可以直接点击下载本地打包的apk,如下:

手机安装的效果如下:

打包桌面exe1。首先,你需要下载并安装节点环境。直接在官网下载安装这个就行了,如下,选择适合你平台的版本:

2.安装完成后,您需要安装两个打包工具,电子和电子打包器。只要输入安装命令 "NPM安装电子包装机 "直接在cmd窗口中,如下:

3.最后,打包程序,主要步骤和截图如下:

首先,创建一个新文件夹,拖放刚才的文件,创建两个新的包配置文件——package . JSON和main.js,如下所示:

package.json文件简单配置如下,主要说明应用名称、版本号和打包配置文件。,很简单:

main.js文件的简单配置如下,主要表示包的详细配置信息。这个可以在网上查,资料非常丰富详细。这里,指明打包的html文件很重要:

最后用cmd封装。首先切换到这个文件夹,然后输入打包命令 "app-win-out appdir-arch x64-Electron-version 3 . 0 . 10-overwrite "。如下,打包过程会自动开始,非常快。这里的打包参数主要表示打包应用的名称和位数。

然后你可以在刚才的输出目录AppDir中找到打包的应用程序APP.exe,双击它就可以正常运行了。效果如下,其实是嵌套了一个浏览器外壳:

至此,我们已经完成了将前端网页打包成手机APP和桌面exe文件。总的来说,整个过程并不难,只是步骤有点复杂,只要熟悉就能很快掌握。当然,你也可以用apicloud来打包,但是这些工具打包出来的app还不如原来开发的好,需要改进和优化。至于桌面打包,也可以用NW.js打包,效果差不多。网上有相关教程可供参考。希望上面分享的内容能帮到你,不客气。

文件 手机 桌面 效果

版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。