平台:
h5
小程序
app (安卓)
小程序打包上线流程
第一步:登录小程序公众平台
![](https://img-blog.csdnimg.cn/img_convert/ad88e950592947c0b1b72229e30a3b38.png)
第二步:hbuilderx打包小程序
1.在mainfest.json文件中进行相关配置
![](https://img-blog.csdnimg.cn/img_convert/30cc4f41b408462e8b5f81eeda9d41bd.png)
2.需要将项目中的网络请求改为https协议做为生产环境(配置项目的环境变量)
3.需要到微信公众平台配置安全域名
![](https://img-blog.csdnimg.cn/img_convert/985f911bc8de4363b3e18f84161338f9.png)
![](https://img-blog.csdnimg.cn/img_convert/2d036c8b3e97412f98c123dfa7a1c23f.png)
第三步:小程序打包
hbuilder工具栏发行:
![](https://img-blog.csdnimg.cn/img_convert/401ab4999671450a9c01d08a0cc1f942.png)
发行——>微信小程序
![](https://img-blog.csdnimg.cn/img_convert/1220e597a23d490b9a77f2ecc4f2c607.png)
直接打包
![](https://img-blog.csdnimg.cn/img_convert/51bcbf5e443e4df9bb34e650b0028638.png)
打包之后项目产生打包文件
![](https://img-blog.csdnimg.cn/img_convert/870eaaac58e04394bcc598840df9e189.png)
打开打包文件找对应项目文件
![](https://img-blog.csdnimg.cn/img_convert/0319199fbcbb42b49b235202bec9fea9.png)
小程序工具启动打包之后的项目文件。
![](https://img-blog.csdnimg.cn/img_convert/7f8aee8790a24d33bcbb262ba49f3f7d.png)
第四步:小程序项目上线
![](https://img-blog.csdnimg.cn/img_convert/c20e623fad554920a16363d2f1724ec7.png)
上传的式小程序的体验版本。
第五步:公众平台体验
![](https://img-blog.csdnimg.cn/img_convert/e3a9dd73d9724fb29c48bdf37803c2df.png)
到公众平台成员管理中添加体验人员(15人)
![](https://img-blog.csdnimg.cn/img_convert/fcb66a5b28394d4c960750b31f127ce6.png)
到这里体验人员可以体验小程序。
第六步:上线
提交审核,审核完成之后直接上线。
h5打包上线流程
打包的h5应用
服务器
第一步:h5配置
![](https://img-blog.csdnimg.cn/img_convert/7913ce2563964f9d939eac2957eb8b84.png)
![](https://img-blog.csdnimg.cn/img_convert/efe5d75d4d834726a712b5054b1a1a77.png)
![](https://img-blog.csdnimg.cn/img_convert/2ad9ded0a86942a5975dfc544bf17778.png)
第二步:hbuilderx 发行h5
发行—>pc或者web 手机h5
![](https://img-blog.csdnimg.cn/img_convert/f30456e73e7249a09bae358cd5a5b3e3.png)
![](https://img-blog.csdnimg.cn/img_convert/21ab0a57d39f4b18be25ab30e597838b.png)
第三步:运行打包后的h5
![](https://img-blog.csdnimg.cn/img_convert/133f7bb1843a4cfc9e6495404255bf9b.png)
第四步:直接上线
链接远程服务器(打包对应的服务目录—-将hash模式的h5应用拖到服务器对应的目录下)
![](https://img-blog.csdnimg.cn/img_convert/fdcd32d4361149ce862895c9dc50a5a5.png)
第五步:远程打开项目
远程服务器地址+目录 运行出结果。
备注: hash 原理式 利用#锚标跳转 (hash 单页面应用程序可以静态启动)
history 原理式h5 location对象 静态运行白屏 启动不了 服务器
如果项目history模式打包。
打包之后—-程序包发给后端java——nginx反向代理(nginx式代理服务器) 通过nginx服务器跑history路由模式项目。
如果你本地运行你的history项目。
安装插件 http-server 插件
cnpm install http-server -g
进入项目目录
http-server -p 8080 -o
-p 端口 -o 浏览器打开
安卓模拟配置
第一步:先配置manfest.json配置
![](https://img-blog.csdnimg.cn/img_convert/9a2847de9c78446d942e7c2b76ebae88.png)
1.配置app图标配置 自动生成
2.app启动界面
3.app端相关权限 根据mainfest进行勾选
第二步:配置 uniapp 安卓开发模拟器设置
运行——手机或者安卓模拟器
![](https://img-blog.csdnimg.cn/img_convert/7785ee2705eb48928d70c2db6e045a74.png)
1.下载模拟器
mumu 夜神 雷电....
https://mumu.163.com/
2.配置模拟器adb 基座
找到hbuilderx的安装目录下 adb基座目录 设置系统环境变量
找到对应adb文件 复制路径
F:\软件工具\HBuilderX.3.2.3.20210825\HBuilderX\plugins\launcher\tools\adbs
添加到系统环境变量中
![](https://img-blog.csdnimg.cn/img_convert/c58548316a90472aa94748ef3a0e7506.png)
到这为止添加了 系统环境变量。
打开cmd 输入adb命令 查看adb是否正常:
![](https://img-blog.csdnimg.cn/img_convert/12d03270cd1846afaed8e74bb9cbc772.png)
在cmd里面查看链接的模拟器服务:查设备列表
![](https://img-blog.csdnimg.cn/img_convert/773e6a3909634d02b1bed7219261e130.png)
链接模拟器
使用adb命令链接模拟器
![](https://img-blog.csdnimg.cn/img_convert/3084688bd34140d99dcb0f7d39706137.png)
这个位置 在链接模拟器的时候 链接失败(找不到模拟器服务链接失败)
需要提前启动模拟器。
![](https://img-blog.csdnimg.cn/img_convert/c2d750e016c545dd92985d9392604a44.png)
在查链接设备
![](https://img-blog.csdnimg.cn/img_convert/e57402da5a474a0f9c0447a76ff5a084.png)
链接成功之后,到hbuilderx 查看链接设备。
设置hbuilderx的模拟器端口:工具—-设置
![](https://img-blog.csdnimg.cn/img_convert/0823449d8afa4152b2a7c8856bd8c913.png)
![](https://img-blog.csdnimg.cn/img_convert/efddd7968b1641e7b30e1f17e7832a75.png)
点击链接的模拟器运行
![](https://img-blog.csdnimg.cn/img_convert/80b2dbd053b54d2ea89f5d93af9dd793.png)
编译完成之后 安卓模拟器apk文件安装项目启动。
![](https://img-blog.csdnimg.cn/img_convert/b5b326e496c6455c939afe5d8fd2d772.png)
修改页面代码 保存模拟器同步更新(可能存在电脑卡)
![](https://img-blog.csdnimg.cn/img_convert/4428cd869a4343b3a70f46e9685e3466.png)
安卓打包
点发行—-app云打包
![](https://img-blog.csdnimg.cn/img_convert/7d422c82b17d46859ead089ce6b2105b.png)
点击地址下载
![](https://img-blog.csdnimg.cn/img_convert/2ca03da3c0f4455dbf42b3ccd39fd9b8.png)