【UniApp】-uni-app-打包成小程序

2023-12-24 10:02:54 浏览数 (1)

前言

大家好,我是 BNTang, 在上一节文章中,我给大家详细的介绍了如何将我开发好的项目打包为网页。

趁热打铁,在来一篇文章,给大家详细的介绍如何将项目打包为小程序。

正文

  • 打开微信小程序呢,其实还是需要进行一些相关的配置的
  • 首先打开微信小程序的配置页面找到 manifest.json 文件
  • 打开 manifest.json 之后找到 微信小程序配置

配置微信小程序AppID

  • 在微信开发者工具中申请获取
  • 我们的项目打包,上传到微信小程序中,需要告诉微信小程序开发者是谁,所以说需要配置一下AppID
  • 然后将 ES6转换ES5/上传代码时样式自动补全/上传代码时自动压缩 都勾选上

配置完毕之后呢,就可以进行发行了,点击 HBuilderX 工具栏中的 发行 -> 小程序-微信(仅适用于uni-app)

点击了之后再弹出来的弹框中,只要你之前配置好了微信小程序的内容,会自动为你填充,直接点发行:

打包之后会自动给你打开微信小程序开发工具:

当我运行起来之后发现,输入框的样式有问题,我来一张图来对比一下网页VS小程序:

尺寸和网页版的不一样,不对的话这里我需要修复一下,这里就是 UniApp 的一些坑。

UniApp 的坑

  • UniApp 看上去比较方便,其实内部的问题还是比较多的
  • 那么遇到这种问题我们该如何去解决呢?

比较传统的方式就是百度,可以问AI,等等,因为这里我已经百度询问过了,就不用去百度了,已经有经验了,我直接给大家上代码解决方案即可。

解决方式很简单就是将我之前写的 height: 30%;,改为 min-height: 180rpx; 即可:

  • 重新发行,查看效果:

发布小程序

通过如上内容之后就没问题了,都没问题之后,就可以发布了,点击微信小程序工具中,右上角的详情,可以针对自己的项目,进行一些相关的配置,因为我们自己的这个项目没有访问网络,所以我是不需要配置的。

如果需要访问网络就可以进行配置一下相关内容。

都弄完之后只需要点击微信小程序工具中,右上角的 上传:

上传之后在回到小程序的官网:https://mp.weixin.qq.com/,登录自己的账号,选择小程序登录而不是公众号,关于账号的注册等知识这里不介绍:

登录之后,找到管理菜单中的版本管理:

体验版本

首选是设置为体验版本:

点击提交:

提交之后,他会给你一个二维码,这个时候你就可以扫码进行体验你的小程序了:

提交审核

体验完毕之后就可以提交审核了,提交审核前需要设置小程序上线主营类目功能,然后才可以进行提交,小程序上线主营类目功能这里不介绍大家自行了解。

如果审核通过了会跑到审核版本当中:

发布版本

发布之后就变成线上 App 正在使用的版本了:

End

  • 如果你有任何问题或建议,欢迎在下方留言,我会尽快回复
  • 如果你觉得本文对你有帮助,欢迎点赞、收藏,你的支持是我写作的最大动力

我正在参与2023腾讯技术创作特训营第四期有奖征文,快来和我瓜分大奖!

0 人点赞