基于uniapp开发小程序，代码上线发布教程【抖音、微信】

本系列文章适合三类同学：1.希望学习小程序开发；2.希望无代码、低代码拥有自己的小程序；3.快速搭建小程序交作业、交毕设的大学生

本系列文章将推出配套桌面端软件，配合软件，可实现傻瓜式开发小程序，请有需求的同学关注专栏，以免错过。

由于各平台对专栏文章的支持度不同，所以如果您看到这篇文章的平台，系统学习专栏文章的操作不够丝滑，可以先关注小程序，后续小程序会开发专栏博客功能。

可以直接搜索【中二少年工具箱】，也可通过

二维码知乎地址：https://www.zhihu.com/question/53230344/answer/3180004527

二维码csdn地址：https://bbs.csdn.net/topics/618134623

二维码头条地址：https://www.toutiao.com/w/1790412984859652/

等入口进入，扫码关注。

本专栏总纲文章地址：[快速制作小程序，专栏总纲]
(https://blog.csdn.net/zjsj_lize/article/details/131002608)

---

前言

本文介绍基于uniapp开发的小程序，在hbuilderx中开发后，如何把代码上传到抖音，发布小程序。

虽然最近才开始真正开发自己的微信小程序，但是微信小程序的代码发布很久之前就做过了，也没留下什么记录，所以微信小程序的代码发布过程就没办法详细介绍。

最近正好想把代码同步发布到抖音平台，所以就以抖音为例，帮大家踩踩坑，写一篇uniapp开发的小程序如何发布到抖音的教程。微信小程序发布过程，可以以此参考。

---

1、抖音开发者工具

虽然hbuilderx有一键发布代码到平台的方式，但是我们开发过程中，总要在实机或者模拟器中看一下小程序的效果，这就需要借助对应的开发者工具，所以最好还是下载一个官方提供的开发者工具。

抖音开发者工具，需要上抖音开放平台下载:https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/developer-instrument/download/developer-instrument-update-and-download
微信开发者工具，则需要上微信官方文档下载：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下载后，为了避免权限问题，选择为所有用户安装：

后续步骤全部默认即可。

注意记录一下开发者工具下载地址，后面会用到：

2.hbuilderx关联抖音开发者工具

打开hbuilderx，随意打开一个项目，点击运行，选择运行到小程序模拟器——抖音开发者工具，如图：

因为我们没有配置过抖音开发者工具，所以第一次点击，会进入配置页面，如图：

在这里维护刚才我们下载的抖音开发者工具，需要用到上面下载的地址，我的在：C:/Program Files/xxxx。如果这个忘了，那就找到抖音开发者工具的安装文件，再走一遍，走到选择安装地址那步，记下自己的地址，然后退出。
维护后，如下：

这里需要注意：微信开发者工具维护的安装路径，而抖音开发者工具维护的是可执行程序

关联完成后，再次点击运行到抖音小程序，会打开页面：

第三方（uniapp）开发运行到抖音开发者工具，会默认打开lite模式，我们手动退出，进入正常模式：

这个模式有利于查找一些兼容上的错误。比如说我们现在遇到了不知名错误，因为我们的小程序在微信上是正常运行的，所以一般遇到这种错误，都是兼容问题。

3.排查错误

下面提供遇到一些无法debugger的问题时，定位问题、解决问题的思路。

既然是兼容问题，肯定是某个相对特殊的代码有问题。那些简单的首页、tab页等，一般是没有问题的。所以我们在page.json中，把分包里的复杂页面都删掉，只留下pages里的页面和tabBar里的页面，发现运行正常。

这就能确定，肯定是小程序里某个小功能出问题了。我们继续一点点删页面排查，最终确定是我们的人工智能三个页面有问题。

打开人工智能代码，还是按照上面的思路，一点点删代码，因为我们是基于vue3，代码都是按功能模块设计，所以删起来也比较方便，最终定位到出问题的代码是：

import * as _ from 'lodash'

lodash在微信小程序中是没有任何问题的，运行到抖音开发者工具有问题，那只能是抖音兼容这块做的不好。所以我们上抖音开放平台自己的社区提问：“lodash报错”

果然，有其他人遇到过：https://developer.open-douyin.com/forum/question/post/65093a474de0e665f67afcf5

下面是社区管理的回复：

我们先简单采取第二种方式解决问题，运行后，正常显示页面：

但是我点击后，发现功能还是有问题，所以我向抖音屈服了，先把防抖这块去掉，可以正常显示页面：

样式还有些兼容问题，不过第一阶段主要目标是上传代码成功，所以先不考虑样式。

4.上传代码

点击上传后，会提示我们输入appid：

我们先登录抖音开发者工具，点击右上角的工程管理，然后登录账号：

抖音开放平台的一些注册和创建工作，都是很简单的根据引导创建即可，篇幅所限，这里不再赘述。

登录后，再维护基本信息，会发现已经有我们的账号信息：

此时重新点击上传，维护我们的更新内容：

上传时，又遇到两个问题，命途多舛啊！

一个是上传抖音开放平台时提示尚未登录：

这个好解决，注销账号，重新登录即可。

另一个是提示自定义导航栏的权限问题，为了尽快先上传代码，我按照开发者工具提示的，先改成了使用系统默认导航栏。终于上传成功：

在抖音开放平台的控制台，可以看到已经有我们上传的代码了：

---

总结

虽然还有一些兼容问题需要解决，但是至此，终于算是从无到有地走通了uniapp代码上传到抖音开放平台。微信开放平台和抖音基本上是差不多的步骤。

本文写作用时1小时，各种尝试和修改问题，用时差不多应该也是1.5小时，这还是在我已经有过微信小程序开发经验的基础上。写这篇文章就是希望初次接触用uniapp开发抖音小程序的同学，可以节约点时间。

原创不易，希望感觉本文有帮助的同学，可以去点点关注，或者帮忙给小程序【中二少年工具箱】给个高评分。目前只有微信小程序。拜谢各位看官了。