uniapp的打包:h5、微信小程序以及APP方式

uniapp的打包:h5、微信小程序以及APP方式


本人用的是HBuilder编译器,学习uniapp时b站某位大大推荐的,我刚开始接触代码时候也用过,那时候并不好用这个编译器,但是现在试了一下挺好用的。

H5打包

这是h5页面的打包配置,新版本的HBuilder用的是web配置(也就是h5配置的意思)
在这里插入图片描述
由于上图是我个人项目练习,没有用到appID,所以后面的图就截取我跟着学习的视频了。

然后我们再看HBuilder的导航栏中的 “发行”发行“——>PC Web或手机H5(仅适用于uni-app)”。

弹框之后只需要写网站标题即可,再点击发行按钮,然后等待就好了,打包好的文件会放在unpackage文件夹里。
在这里插入图片描述

unpackage->dist->build->h5(右键选择在外部打开)

把h5文件夹拉到项目中去,放在服务器中去,给他一个域名,就直接能看了。
在这里插入图片描述

微信小程序打包


微信小程序配置只需要填写微信小程序AppID即可。AppID每个人都不一样,因此我下面打码了

在这里插入图片描述

在 “发行” 选择相对应的微信小程序选项打包即可
在这里插入图片描述
在这里插入图片描述


微信小程序还有另外一种发行方式,就是可以勾选第三个方框,但是需要用到小程序密钥,大家可以试一下,我这里就不展示了。

没有勾选的话,我们就会在微信开发者工具进行展示。
在这里插入图片描述


需要把域名设置成一个安全的域名,不然在微信开发者工具里跑的时候就会报错。
在这里插入图片描述


可以在微信开发者工具的项目配置里设置合法域名,也可以在本地设置里的不校验合法域名取消勾选。
在这里插入图片描述
在这里插入图片描述


如果要用别人接口的话,合法域名一定要放到下面图示所指的位置。

在这里插入图片描述


还可以设置多个域名。
在这里插入图片描述

上传完之后就点击确定
在这里插入图片描述
在这里插入图片描述

App打包

点击基础配置,应用名称、应用描述、版本名称、版本号就可以自己去写了。
在这里插入图片描述
选择App图标配置
在这里插入图片描述
发行选择原生App-云打包,这个比较简单、便捷。
在这里插入图片描述
打包完会弹出这个框,自己看着来设置就好了。如果项目涉及到商店什么的,就比较麻烦了,就需要去使用相关证书了。
在这里插入图片描述
最后点击后下角的 “打包” ,就会自动校验相应的文件。我们就需要点击 “继续打包”。

打包完成后会出现在.apk后缀,我们在外部打开它。
在这里插入图片描述
这个可以用微信、QQ、或者是插上数据线(USB线)发到你的手机上去,直接安装就可以了。
在这里插入图片描述
备注:该学习在b站上学习,以下是学习网址,可点击自行观看:uniapp学习

  • 10
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值