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

本系列文章适合三类同学:1.希望学习小程序开发;2.希望无代码、低代码拥有自己的小程序;3.快速搭建小程序交作业、交毕设的大学生
本系列文章将推出配套桌面端软件,配合软件,可实现傻瓜式开发小程序,请有需求的同学关注专栏,以免错过。

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

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

二维码知乎地址www.zhihu.com/question/53...

二维码csdn地址bbs.csdn.net/topics/6181...

二维码头条地址www.toutiao.com/w/179041298...

等入口进入,扫码关注。

本专栏总纲文章地址:[快速制作小程序,专栏总纲] (blog.csdn.net/zjsj_lize/a...)

@TOC


前言

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

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

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


1、抖音开发者工具

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

抖音开发者工具,需要上抖音开放平台下载:developer.open-douyin.com/docs/resour... 微信开发者工具,则需要上微信官方文档下载:developers.weixin.qq.com/miniprogram...

下载后,为了避免权限问题,选择为所有用户安装: 后续步骤全部默认即可。

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

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

打开hbuilderx,随意打开一个项目,点击运行,选择运行到小程序模拟器------抖音开发者工具,如图: 因为我们没有配置过抖音开发者工具,所以第一次点击,会进入配置页面,如图:

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

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

关联完成后,再次点击运行到抖音小程序,会打开页面: 第三方(uniapp)开发运行到抖音开发者工具,会默认打开lite模式,我们手动退出,进入正常模式:

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

3.排查错误

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

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

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

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

c 复制代码
import * as _ from 'lodash'

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

果然,有其他人遇到过:developer.open-douyin.com/forum/quest...

下面是社区管理的回复:

我们先简单采取第二种方式解决问题,运行后,正常显示页面: 但是我点击后,发现功能还是有问题,所以我向抖音屈服了,先把防抖这块去掉,可以正常显示页面:

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

4.上传代码

点击上传后,会提示我们输入appid: 我们先登录抖音开发者工具,点击右上角的工程管理,然后登录账号:

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

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

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

上传时,又遇到两个问题,命途多舛啊!

一个是上传抖音开放平台时提示尚未登录: 这个好解决,注销账号,重新登录即可。

另一个是提示自定义导航栏的权限问题,为了尽快先上传代码,我按照开发者工具提示的,先改成了使用系统默认导航栏。终于上传成功: 在抖音开放平台的控制台,可以看到已经有我们上传的代码了:


总结

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

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

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

相关推荐
2401_845937538 小时前
PHP一键约课高效健身智能健身管理系统小程序源码
微信·微信小程序·小程序·微信公众平台·微信开放平台
程序员入门进阶10 小时前
基于微信小程序的科创微应用平台设计与实现+ssm(lw+演示+源码+运行)
微信小程序·小程序
鸭子嘎鹅子呱13 小时前
uniapp使用高德地图设置marker标记点,后续根据接口数据改变某个marker标记点,动态更新
uni-app·map·高德地图
计算机源码社18 小时前
分享一个基于微信小程序的居家养老服务小程序 养老服务预约安卓app uniapp(源码、调试、LW、开题、PPT)
android·微信小程序·uni-app·毕业设计项目·毕业设计源码·计算机课程设计·计算机毕业设计开题
双普拉斯21 小时前
微信小程序点赞动画特效实现
nginx·微信小程序·notepad++
程序员阿龙21 小时前
【2025】基于微信小程序的网上点餐系统设计与实现、基于微信小程序的智能网上点餐系统、微信小程序点餐系统设计、智能点餐系统开发、微信小程序网上点餐平台设计
微信小程序·小程序·毕业设计·订单管理·在线点餐·订单跟踪·在线支付
Angus-zoe21 小时前
uniapp+vue+微信小程序实现侧边导航
vue.js·微信小程序·uni-app
Pluto & Ethereal21 小时前
uni-app尺寸单位、flex布局于背景图片
uni-app
天空下sky1 天前
uniapp+若依 开发租房小程序源码分享
uni-app
帅过二硕ฅ1 天前
uniapp点击跳转到对应位置
前端·javascript·uni-app