前端MUI+H5+HBuilderX开发APP(IOS,android),后台Springboot,java学习与实践文章,更新中(二)

前端MUI+H5+HBuilderX开发APP(IOS,android),后台Springboot,项目搭建,图标设置等,更新中(二)


开发工具:HBuilderX

新建我的第一个APP

在这里插入图片描述
我选择5+App,mui项目。如果你像我一样第一次接触HBuilder,你还可以再创建一个项目demo,边学习边模仿,如果想偷懒,copy一下下也是可以的。
在这里插入图片描述
demo项目的创建:上图中Hello mui mui前端框架各种UI控件。里面有官网文档里所有组件的梨子以及源代码。可以用于学习用于参考。
链接: http://dcloud.io/hellomui/.
在这里插入图片描述
这样项目就建立成功了,感觉简单不少,下面是文件夹的样子,css,js,images这些大家写过前端应该很熟悉,我一开始想先试试发布app,但是他的图标发布出去就是一个大写的H,我还纳闷了,发布的时候这也没有提醒我设置啊。后来才知道,manifest.json。下面了解它。
在这里插入图片描述

manifest.json:

就是要打包的原生应用,其各种配置均在此处,一个配置文件。可能是我第一次开发APP,没有管过这个,导致APP没有图标:
在这里插入图片描述

图标设置:

在这里插入图片描述
修改图标:
在这里插入图片描述

项目运行

写好项目代码,点击 运行->手机/浏览器运行
下图是浏览器运行,手机运行用usb接口连接,手机设置为开发者模式。也可以用夜神模拟器等。需要将端口号设置一致。
在这里插入图片描述
打开 工具-设置-运行设置,可以配置模拟器端口以及小程序等等
在这里插入图片描述

运行结果如图:
在这里插入图片描述

项目打包

(1).点击发行->发行为原生APP
在这里插入图片描述

(2).填入自己的证书,证书如果没有可以使用DCloud公用证书的
在这里插入图片描述
不想使用公共的,可以自己申请
生成上图中需要的证书秘钥
Android端:
打开cmd窗口在里面输入:
keytool -genkey -alias domekey -keyalg RSA -keysize 1024 -keypass pwd123456 -validity 3500 -keystore c:\key\dome.keystore

参数解析如下:
-alias 后面的 domekey 是密钥别名/证书别名,可自己修改
-keypass 后面的 pwd123456 ,可自己修改
会生成密钥文件dome.keystore,存在 c:\key\dome.keystore ,如果你C盘没有key文件夹,要新建一个,不然会报错。
-validity 后面的 3500 ,是有效期,3500天,按天数算

ios端:
参考:https://www.jianshu.com/p/e6b86bef7a90

(3).上传到DCloud进行打包。
(4).打包成功!

手机上成果图:比较简陋,因为只是想试一试能不能发布成功。既然成功了,下一步就要开始设计接口,数据库等等,我的毕业论文不能再拖了,老师已经开始催我了,如果觉得有帮助,不要吝啬自己的手指给我点个赞哦,谢谢。
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43390321/article/details/113782848