基于uniapp开发小程序，代码上线发布教程【抖音、微信】
本系列文章得当三类同学：1.盼望学习小程序开发；2.盼望无代码、低代码拥有自己的小程序；3.快速搭建小程序交作业、交毕设的大门生本系列文章将推出配套桌面端软件，配合软件，可实现傻瓜式开发小程序，请有需求的同学关注专栏，以免错过。
由于各平台对专栏文章的支持度不同，以是如果您看到这篇文章的平台，体系学习专栏文章的操纵不够丝滑，可以先关注小程序，后续小程序会开发专栏博客功能。
可以直接搜刮【中二少年工具箱】，也可通过
二维码csdn地址：https://bbs.csdn.net/topics/618134623
入口进入，扫码关注。
本专栏总纲文章地址：[快速制作小程序，专栏总纲]
(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
下载后，为了避免权限问题，选择为所有用户安装：
https://i-blog.csdnimg.cn/blog_migrate/e057c0aacb062117564280868849357f.png
后续步骤全部默认即可。
注意记录一下开发者工具下载地址，后面会用到：
https://i-blog.csdnimg.cn/blog_migrate/15a8dd8d2b30bc4d3837945a0e5cf10f.png
2.hbuilderx关联抖音开发者工具
打开hbuilderx，随意打开一个项目，点击运行，选择运行到小程序模仿器——抖音开发者工具，如图：
https://i-blog.csdnimg.cn/blog_migrate/ae9f69a16005df668c04c4ac109833ba.png
由于我们没有配置过抖音开发者工具，以是第一次点击，会进入配置页面，如图：
https://i-blog.csdnimg.cn/blog_migrate/820a76adff03fe04cd3c44e4db835120.png
在这里维护刚才我们下载的抖音开发者工具，需要用到上面下载的地址，我的在：C:/Program Files/xxxx。如果这个忘了，那就找到抖音开发者工具的安装文件，再走一遍，走到选择安装地址那步，记下自己的地址，然退却出。
维护后，如下：
https://i-blog.csdnimg.cn/blog_migrate/acde350ee1c9fbebc1dfed15dc9b2c4b.png
这里需要注意：微信开发者工具维护的安装路径，而抖音开发者工具维护的是可实行程序
关联完成后，再次点击运行到抖音小程序，会打开页面：
https://i-blog.csdnimg.cn/blog_migrate/0a53d6683da9715e8003a607c8ad4821.png
第三方（uniapp）开发运行到抖音开发者工具，会默认打开lite模式，我们手动退出，进入正常模式：
https://i-blog.csdnimg.cn/blog_migrate/6be0dfe6d08cbf389043838f053eb49e.png
这个模式有利于查找一些兼容上的错误。比如说我们现在遇到了不知名错误，由于我们的小程序在微信上是正常运行的，以是一般遇到这种错误，都是兼容问题。
3.排查错误
下面提供遇到一些无法debugger的问题时，定位问题、解决问题的思绪。
既然是兼容问题，肯定是某个相对特别的代码有问题。那些简单的首页、tab页等，一般是没有问题的。以是我们在page.json中，把分包里的复杂页面都删掉，只留下pages里的页面和tabBar里的页面，发现运行正常。
这就能确定，肯定是小程序里某个小功能出问题了。我们继续一点点删页面排查，最终确定是我们的人工智能三个页面有问题。
打开人工智能代码，照旧按照上面的思绪，一点点删代码，由于我们是基于vue3，代码都是按功能模块计划，以是删起来也比较方便，最终定位到出问题的代码是：
import * as _ from 'lodash'
lodash在微信小程序中是没有任何问题的，运行到抖音开发者工具有问题，那只能是抖音兼容这块做的不好。以是我们上抖音开放平台自己的社区提问：“lodash报错”
果然，有其他人遇到过：https://developer.open-douyin.com/forum/question/post/65093a474de0e665f67afcf5
下面是社区管理的回复：
https://i-blog.csdnimg.cn/blog_migrate/d06ba1054c24f55998b34d488c6e53ce.png
我们先简单采取第二种方式解决问题，运行后，正常显示页面：
https://i-blog.csdnimg.cn/blog_migrate/8467e80d28ecbce4e8b784c58db07d2d.png
但是我点击后，发现功能照旧有问题，以是我向抖音屈服了，先把防抖这块去掉，可以正常显示页面：
https://i-blog.csdnimg.cn/blog_migrate/e1680c2c326bac0308435b2bed884b56.png
样式还有些兼容问题，不过第一阶段主要目的是上传代码成功，以是先不考虑样式。
4.上传代码
点击上传后，会提示我们输入appid：
https://i-blog.csdnimg.cn/blog_migrate/ae6257f6a2e9784c4cc4ab18246b23e1.png
我们先登录抖音开发者工具，点击右上角的工程管理，然后登录账号：
https://i-blog.csdnimg.cn/blog_migrate/c7ed2c71fc1ae8a6ab2cadcca168cf5b.png
抖音开放平台的一些注册和创建工作，都是很简单的根据引导创建即可，篇幅所限，这里不再赘述。
登录后，再维护基本信息，会发现已经有我们的账号信息：
https://i-blog.csdnimg.cn/blog_migrate/0130e3daec544ff5d6cf14cd30b6f2b4.png
此时重新点击上传，维护我们的更新内容：
https://i-blog.csdnimg.cn/blog_migrate/cade5da39c0122d69aa31aa93a4058bd.png
上传时，又遇到两个问题，生不逢辰啊！
一个是上传抖音开放平台时提示尚未登录：
https://i-blog.csdnimg.cn/blog_migrate/01d96c341831806ec1da40ef21c2dc71.png
这个好解决，注销账号，重新登录即可。
另一个是提示自定义导航栏的权限问题，为了尽快先上传代码，我按照开发者工具提示的，先改成了利用体系默认导航栏。终于上传成功：
https://i-blog.csdnimg.cn/blog_migrate/862ea8f8c74f6b4801e550cf1e7607c0.png
在抖音开放平台的控制台，可以看到已经有我们上传的代码了：
https://i-blog.csdnimg.cn/blog_migrate/ea86c247fa38eee472f50bee23c2646f.png
总结
虽然还有一些兼容问题需要解决，但是至此，终于算是从无到有地走通了uniapp代码上传到抖音开放平台。微信开放平台和抖音基本上是差不多的步骤。
本文写作用时1小时，各种尝试和修改问题，用时差不多应该也是1.5小时，这照旧在我已经有过微信小程序开发履历的基础上。写这篇文章就是盼望初次打仗用uniapp开发抖音小程序的同学，可以节约点时间。
原创不易，盼望感觉本文有资助的同学，可以去点点关注，大概帮忙给小程序【中二少年工具箱】给个高评分。目前只有微信小程序。拜谢各位看官了。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]