首页 前端知识 创建自己的 app: html网页直接打包成app;在线网页打包app工具fusionapp、桌面应用工具pake

创建自己的 app: html网页直接打包成app;在线网页打包app工具fusionapp、桌面应用工具pake

2024-09-12 23:09:49 前端知识 前端哥 358 906 我要收藏

1、html网页直接打包成app

主要通过hbuilderx框架工具来进行打包
https://www.dcloud.io/hbuilderx.html

参考:
https://www.bilibili.com/video/BV1XG411r7QZ/
https://www.bilibili.com/video/BV1ZJ411W7Na

1)网页制作
这里做的工具是TodoList 页面,找chatgpt、Claude或者其他大模型工具既可以生成页面
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ldOxmwGn-1721573811659)

生成的代码可以放到菜鸟工具的HTML/CSS/JS 在线工具
https://www.jyshare.com/front-end/61/
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wPG6FSWe-1721573811661)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TodoList</title>
    <style>
        /* CSS 样式保持不变 */
        body {
            font-family: Arial, sans-serif;
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            text-align: center;
        }
        #todo-form {
            display: flex;
            margin-bottom: 20px;
        }
        #todo-input {
            flex-grow: 1;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
        }
        #add-button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }
        #todo-list {
            list-style-type: none;
            padding: 0;
        }
        .todo-item {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            margin-bottom: 10px;
            border-radius: 4px;
        }
        .todo-item.completed {
            text-decoration: line-through;
            opacity: 0.6;
        }
        .todo-item input[type="checkbox"] {
            margin-right: 10px;
        }
        .delete-button {
            margin-left: auto;
            background-color: #f44336;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>TodoList</h1>
    <form id="todo-form">
        <input type="text" id="todo-input" placeholder="Enter a new task" required>
        <button type="submit" id="add-button">Add</button>
    </form>
    <ul id="todo-list"></ul>

    <script>
        const todoForm = document.getElementById('todo-form');
        const todoInput = document.getElementById('todo-input');
        const todoList = document.getElementById('todo-list');

        function loadTodos() {
            const todos = JSON.parse(localStorage.getItem('todos')) || [];
            todos.forEach(todo => {
                addTodoToDOM(todo.text, todo.completed);
            });
        }

        function saveTodos() {
            const todos = Array.from(todoList.children).map(li => ({
                text: li.querySelector('span').textContent,
                completed: li.classList.contains('completed')
            }));
            localStorage.setItem('todos', JSON.stringify(todos));
        }

        function addTodoToDOM(text, completed = false) {
            const li = document.createElement('li');
            li.className = 'todo-item' + (completed ? ' completed' : '');
            li.innerHTML = `
                <input type="checkbox" ${completed ? 'checked' : ''}>
                <span>${text}</span>
                <button class="delete-button">Delete</button>
            `;

            li.querySelector('input[type="checkbox"]').addEventListener('change', function() {
                li.classList.toggle('completed');
                if (li.classList.contains('completed')) {
                    todoList.appendChild(li);
                } else {
                    todoList.insertBefore(li, todoList.firstChild);
                }
                saveTodos();
            });

            li.querySelector('.delete-button').addEventListener('click', function() {
                li.remove();
                saveTodos();
            });

            if (completed) {
                todoList.appendChild(li);
            } else {
                todoList.insertBefore(li, todoList.firstChild);
            }
        }

        todoForm.addEventListener('submit', function(e) {
            e.preventDefault();
            if (todoInput.value.trim() === '') return;

            addTodoToDOM(todoInput.value);
            saveTodos();
            todoInput.value = '';
        });

        loadTodos();
    </script>
</body>
</html>

2)hbuilderx下载使用
https://www.dcloud.io/hbuilderx.html
直接下载zip解压既可以
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XhZv25If-1721573811662)
3)打包app
首先创建项目,选择5+app选择创建
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Fl3icaq-1721573811663)
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uxIt2Uaj-1721573811663)
项目创建后,把原项目的css js等不用的文件删除,只保留mainfest.json;然后把自己页面的html、css、js复制过来
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3t9VOESX-1721573811664)
点击mainfest.json去构建项目配置
首先需要应用标识获取,需要先注册hbuilderx账号
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5XzIr4Rf-1721573811664)
设置图标上传1024*1024px,并点击生成所有图标并替换
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q7XQxArK-1721573811665)
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A53b7FDo-1721573811665)

模块设置里把没有的都不用选择,轻量化app
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sC5PNe0M-1721573811666)
权限配置这里,把android.permission.READ_CONTACTS那行删除,不然后面真正打包报错
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9zt4ySyo-1721573811667)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-amiz2Oua-1721573811667)
然后点击发行生成本地app资源,运行完成会下面显示导出完成,会在unpackage\resources\H5F919204\www下
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jw6fuI2p-1721573811668)
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-02ehOXsb-1721573811668)

最终运行打包,点击云打包,打包会下载东西等一会,下载完成再次进行打包需要3-5分钟,最终apk放在unpackage\release\apk下
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bkkxbcma-1721573811669)
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xC4NBHQq-1721573811669)
点击继续打包
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BnGQXNrj-1721573811670)
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wnc90xv2-1721573811670)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iRuSkGl7-1721573811671)
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5QwyG8fa-1721573811671)

手机安装使用:
使用没有问题
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Eloef8iT-1721573811672)
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UC3vqdeF-1721573811672)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uQBJLvC0-1721573811673)

2、在线网页打包app工具fusionapp

fusionapp
https://github.com/wherewhere/FusionApps
参考:https://www.cnblogs.com/bushrose/p/17103766.html
https://www.32r.com/app/48698.html

3、在线网页打包多终端桌面应用工具pake

支持linux、windows、mac

pake
https://github.com/tw93/Pake?tab=readme-ov-file
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18153.html
评论
发布的文章

3.1 requests与JSON基础

2024-10-15 23:10:08

React 安装(NPM)

2024-10-15 23:10:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!