uni-app项目打包步骤和踩过的坑(一)

        最近接了一个前同事留下的uni-app的项目,之前没有接触过,好在以前的工作中用到过vue做过前台开发,虽然时间不长,但是有些方面还是可以借鉴的。经过前几篇文章的介绍,我已经补完了后台服务代码,打算发布到设备上试试。

        下面的步骤,不要跳步,一步步看,肯定是可以成功的。   

1. 本次用到的工具:
        1. 代码开发工具:HBuilder X

        2. apk打包工具:Android Studio

        3. apk打包SDK:Android离线SDK  (下载地址:Android离线SDK)

        3. 生成签名证书的工具:jdk1.8(网上说只要装jre就行,但jdk里包含jre,所以直接装jdk吧,jdk装完要配置环境变量,jdk环境变量的配置可以看这个:jdk环境变量配置)

        4. 生成appkey的网站:DCLOUD的开发者中心(网址:开发者中心) 

2. 导出前的配置
        在 HBuilder X 中打开uni-app项目中的 mainifest.json 文件,会弹出来一些可配置的内容,这次我们简单一点,只配置基础配置。其中 uni-app应用标识(AppID) 如果默认没有的话,点后面的 重新获取 即可,它会警告你,不过点了没事,且会为你生成一个AppID。然后就是选择开发使用的vue版本,按实际选择即可,其它的貌似可以随便填(如果只是做打包测试的话)。

 在生成本地打包过程中由于没有相应的账号需要先注册账户号,有账号的可以忽略本部分内容:

 点击上面链接,进入账号注册页面,

注册完账号需要安装APP打包云,出现下面的弹窗即表示插件安装成功:

由于是新账号需要在云上创建一个应用,将原有应用ID更新为新创将的应用ID:

3. 导出uni-app项目供打包使用
        项目代码在自己手机上测试运行成功后,我们需要把uni-app的项目导出。点击 HBuilder X上方的 发行-->原生App-本地打包-->生成本地打包App资源 即可。如果是第一次点击,可能会提示你装什么东西,按提示的来,同意安装就可以了

导出成功后,HBuilder X 下方的控制台会告诉你导出路径。至此,HBuilder X 的任务完成。

 4. 下载Android离线SDK

          下载地址:Android离线SDK 

         这个sdk可能有其他功能,目前只知道可以打包。

 5. 将HBuilder X导出的文件夹移动到离线SDK中
        将刚才 HBuilder X 导出的以AppID命名的文件夹(www文件夹的上一级)整个移动到离线SDK的 HBuilder-Integrate-AS\simpleDemo\src\main\assets\apps 路径下,该路径下默认会有一个叫 __UNI__A 的文件夹,这个直接删除,我们用不到

说明:我的生成路径下有两个APPID命名的文件夹是因为原有项目不是我自己创建的,在自己创建DCLOUDE 账号后,我更改了APPID 

 6. Android Studio 导入SDK中的示例项目

        如果第一次安装 Android Studio,安装过程中会提示你缺啥好像,记不太清了,直接cancel那个提示,然后跟着引导一步步安装就行了,安装结束后,好像也没什么问题。

下载路径:Download Android Studio & App Tools - Android Developers (google.cn)

安装过程截图: 

 

接着导入离线SDK中的 HBuilder-Integrate-AS 文件夹到 Android Studio 

a.选第一个时出现错误

在我导入的时候出现了这个错误:

 b.更换选择第二个选项出现下面弹窗时提示提高服务,需要发送信息;一般都不发送

点击next,出现下面窗体

 好像时提示代理的窗体,我直接关闭了,出现下面窗体,选择custom

点击next 

 点击next,下面是设置相关的,一般不改

 点击next

点击next

 点击next出现协议条款,只能同意

 

 导入HBuilder-Integrate-AS到

 提示有个问题,暂时忽略试试

7. 修改dcloud_control.xml 中的 appid

       找到 assets/data 下的 dcloud_control.xml 文件,点开它,将文件中appid的值,改成 HBuilder X 中生成的appid。appid记不住没关系,还记得第5步中让你移动的那个文件夹吗,它的文件名就是appid

 

8. 生成Android证书签名
        这一步我参考了别人的文章,所以不多讲了,按他的步骤做(jdk环境变量的配置虽然他文章里写了,小白最好还是看这个:jdk环境变量配置),

下载JAVA jdk链接:Java Downloads | Oracle

 

记下生成证书的文件路径、证书的SHA1安全码、证书的alias(别名)以及设置的两个密码(怕忘记,两个密码设一样的),后续步骤会用得到。参考网址(生成Android证书签名)。

9. 生成appkey

        前往 DCLOUD 的开发者中心(网址:开发者中心),如果按照我的步骤做,那在第2步 HBuilder X 中生成appid后,就能在开发者中心我的应用中看到这条应用,点击应用名称会跳转到该条应用的管理页面。

在安卓云中没有证书,可以点击创建证书。记录证书密码

       点击上方的 离线打包Key管理 按钮,进入生成appkey的菜单。我的这个菜单是已经生成appkey的,所以会和你第一次点进来有所不同,不用担心。

     选择平台:我们选择Android,因为我们这次是打包apk。

        Android包名:包名不能随便写,否则安装apk打开后会报错!它的值在离线SDK的 \HBuilder-Integrate-AS\simpleDemo\src\main\AndroidManifest.xml 中,没改过的话应该跟我一样,是 com.android.simple

 目前我是执行到这一步了,不知道问题出在哪里?我先把网上成功的案例步骤贴到后面;以供大家参考:后续找到问题在更新。不知道步骤10中应填写什么???????????????????????????????????????????????????????????????????????

10. 在 AndroidManifest.xml 中配置appKey

        回到 Android Studio ,在 AndroidManifest.xml 中配置appKey,下图是我自己写的不知道对不对,暂且先记下。后续在进行更新...

 11. 打包apk

现在万事俱备,只剩打包了,点击 Android Studio 上方的 Build-->Generate Signed Bundle / APK...

         弹出打包窗口,选择 APK,然后点击 Next

        点击 Choose existing...,选择第8步让你记下的证书存放路径,Key store path 就会自动填充,Key store password、Key alias、key password,这三项也在第8步中设置。如果两个password记不住了,那就按第8步的教程重新生成一个证书吧。Remember passwords 根据自己需要吧(小白还是勾吧,记住密码)。全部填完后点击下方 Next 

         最后就是选择导出路径,然后选择 release,然后点击下方 Finish。

         导出成功后,Android Studio 下方的 Build 控制台会提示 BUILD SUCCESSFUL 。

        然后就可以在导出路劲的release文件夹里找到打包好的apk文件了,截图里的是默认导出路径,你可以在release的时候选择你的导出路径。

         然后在手机上安装刚才的apk并打开,如果正常打开,那基本就成功了。

码字不易,如果您觉的我的文章对您有帮助的话,建议您在经济能力之内慷慨打赏一元给我买瓶水, 这将是我下一步继续书写本题目的动力;如果您囊肿羞涩也没有关系,希望您点个关注,写点评论;您的支持将是我创作之路上的无线动力;青山依旧绿水长流,希望我们下期来能再见。  

  • 38
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
根据引用内容,uni-app项目可以通过HBuilderX可视化界面或vue-cli命令行两种方式创建。在HBuilderX中,选择项目->发行->原生App-本地打包,然后进行编译和导出步骤,最终生成本地打包App资源。 在实名认证后,可以进行项目打包。通过云打包或本地生成安装包的方式进行打包,具体时间取决于打包队列和项目的复杂性。 另外,也可以使用HBuilderX的离线打包功能。具体的打包步骤可以参考uni-app的文档或使用HBuilderX的App cli自动化打包功能。 总结起来,uni-app项目打包可以通过HBuilderX的可视化界面或命令行方式进行,打包过程涉及编译、导出和生成安装包等步骤,具体时间取决于打包队列和项目的复杂性。此外,也可以使用HBuilderX的离线打包功能或App cli自动化打包功能进行打包。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [用uniapp开发打包多端应用完整指南](https://blog.csdn.net/xjbx/article/details/128114077)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [【uni-app系列】uni-appApp打包](https://blog.csdn.net/u012069313/article/details/126544128)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

A_nanda

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值