基于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开发抖音小程序的同学,可以节约点时间。

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

相关推荐
耶啵奶膘3 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡5 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼9 小时前
微信小程序-prettier 格式化
微信小程序·小程序
我开心就好o10 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index10 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
qq_174482857511 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027711 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
初遇你时动了情17 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
licy__17 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
小小黑00720 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue