uniapp 将网站打包成app教程/网页打包Android和IOS

uniapp打包 网站打包app 网页打包成app

夏天

2023-08-19

在打包之前需要先下载Hbuilder  下载地址地址：https://www.dcloud.io/hbuilderx.html

第1步：在uniapp里边新建一个默认的项目

第2步：项目创建完成后，找到根目录，打开page.json 将如下代码

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {}
}

替换为

{
    "pages": [ 
    {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "uni-app",
            "navigationStyle":"custom"
        }
    }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationStyle":"custom",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }}

第3步：找到pages/index/index.vue文件，删除所有内容，替换成

<template>
    <web-view  src="这里要换成你自己的网站地址"></web-view>
</template>

第4步：打开mainfest.json文件，配置好应用名称，应用描述，应用图标，启动页等信息

第5步：点击发行->选择原生app云打包

打包时选择公共测试证书或者使用云端证书，就可以打包安卓包了，苹果打包需要有签名证书。

最后点击打包就可以把网页打包成app了