加入收藏 | 设为首页 | 会员中心 | 我要投稿 汽车网 (https://www.0577qiche.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 教程 > 正文

uni-app 的打包发布

发布时间:2023-04-24 14:26:48 所属栏目:教程 来源:
导读:uni-app 项目与普通的 web 项目不同,uni-app 项目的打包文件需要在不同的平台上面发布。虽然责任更大了,但是打包的步骤并没有成倍的增加,反而相比普通的 web 项目繁琐复杂的打包发布步骤,uni-app 项目打包发布步
uni-app 项目与普通的 web 项目不同,uni-app 项目的打包文件需要在不同的平台上面发布。虽然责任更大了,但是打包的步骤并没有成倍的增加,反而相比普通的 web 项目繁琐复杂的打包发布步骤,uni-app 项目打包发布步骤更加简便了。

我们可以直接在 HBuilderX 工具中将项目进行打包了,操作可视化,很容易上手。在 HBuilderX 工具中可以将我们开发的项目打包成能够发布在多个平台上面的文件。

本小节来带领大家实操如何在 HBuilderX 中将项目打包,并演示如何将项目发布在各个平台上。

打包为原生App
我们平时开发的时候,没有在 HBuilderX 工具中注册登录,不应写我们平时的开发和测试,但是如果想在 HBuilderX 工具中打包 uni-app 项目的话,是需要先注册登录到 HBuilderX 工具中的,不然没有办法操作。

还可以选择原生app-本地打包,这是在我们本地配置中生成安装包 apk/ipa,本地打包比较麻烦,一般当 HBuilderX 中提供的能力无法满足 App 功能需求时才使用,通过 App 离线 SDK 开发原生插件来扩展原生能力,大多数情况下我们都用不到。

继续进行我们的云打包,点击原生app-云打包后,会出现如下界面,将 Android 包名填上,自己测试的话,选择「使用公共测试证书」,最后选择打包就可以了~

点击打包之后,打包成功后会返回一个 url 地址,我们点击这个地址就可以下载 App 了,后面也可以通过在线生成二维码的工具将 App 下载地址生成二维码,后面用户通过链接或者二维码就可以访问你的项目了,是不是非常简单。

可能出现的错误
Android 包名错误
Android 包名要用 . 至少分为两段,并且每段开头必须是小写字母,比如 imooc.project 是对的,但是 imooc.123.project 是错的。

出现红色警告错误
出现下面的红色警告标志就说明当前页面有错误,这时点击打包按钮没有反应,要先解决掉错误才能点击打包按钮。

出现打包校验错误
出现下面的警告,我们需要点击截图中的第一个链接,补充绑定自己的手机号等信息。

appid 为空
打包时报下面的错误,是因为 Manifest.json 文件中没有填写 appid。

HBuilderX 会自动帮我们打开 Manifest.json 文件,在 appid 那一行的后面点击重新获取就可以了。

打包为 H5 手机版
在 HBuilderX 工具栏,单击发行,选择网站-H5手机版。

出现下面弹框,我们填写网站标题和网站域名之后,点击发行就可以了。

编译成功后,会显示打包文件的保存地址。

uni-app 在打包成 h5 项目时,如果根据默认的配置,项目一般是打不开的,需要在打包之前,将 vue.config 配置文件中的 publicPath 选项配置成(./),这样编译出来的html文件还有引用js、css文件的路径会自动变成cdn上的地址。不然打包出来是 (/xxx/xxx)这种格式,编译出来的html文件找不到正确的路径,是打不开的。

(编辑:汽车网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章