前言

uniapp是现在应用很广泛的一种开发方式,他就像是vue和小程序的结合,小程序的结构,vue的语法。使用方便,开发便捷,可以适配不同的平台(app,h5,小程序。。。),是程序猿的好朋友~


下面我们来简单讲一下uniapp的开发流程和如何打包到不同的平台并运行

一、从uniapp使用的开发软件,到创建,到运行流程

1.配置环境

uniapp和HBuilder是一个公司的,所以要使用HBuilderX才能编写uniapp并运行。我们可以直接去官网下载HBuilderX

2. 创建项目

点击文件–>新建–>项目
选择uni-app项目
在这里插入图片描述
填写文件名称:
在这里插入图片描述
选择文件路径:
在这里插入图片描述
选择模板这里使用默认模板(只有基本文件,啥也没有):
ps:你也可以选择其他模板,就是已经写好的基本项目了,再改页面效果啥的比较麻烦,但能快速完成一个项目
在这里插入图片描述
有这些文件:
在这里插入图片描述

3. 运行项目

当要运行时:点击运行你就可以选择各种运行方式,小程序,浏览器等等(这里以浏览器为例,可以选择不同浏览器)
ps:关于小程序运行和浏览器运行上多少会有一些出入,比如请求接口时,h5会有跨域问题需要代理,而小程序不需要,此时你只能选一种运行方式(最好是小程序,兼容性更好),
这时候就要根据你的项目要求选一种方式运行

在这里插入图片描述

此时会在控制台显示正在编译这个项目:
在这里插入图片描述

然后会自动打开浏览器,即可显示初始内容(一个完整的流程就结束啦)
在这里插入图片描述

二、打包不同平台

1、云打包

1.在项目目录下的manifest.json文件中设置各种相关配置(基础的,小程序,微信。。。)
2.在发行中打开云打包:(ps:选中才可打包哦!)
在这里插入图片描述
3.选择需要打包的类型:
在这里插入图片描述

4.选择证书:(如果自行练习的话,可以使用公共测试证书,就不用填写下面三条信息了😁)
在这里插入图片描述

5.是否需要安装渠道:
在这里插入图片描述

6.原生混淆、广告联盟和换辆联盟:
在这里插入图片描述

完成后点击打包,即可开始打包,最后会在打包结束后给以换个网址,用手机访问那个网址,即可生成apk下载安装。
原路径:https://blog.csdn.net/weixin_47597012/article/details/107482476.

总结

(今天内容是用的朋友的图😅,也不算纯原创,见谅!太懒了,哈哈哈)以上就是今天的全部内容,我们下次再见哦,拜了个拜~😛

Logo

前往低代码交流专区

更多推荐