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

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

相关推荐
V+zmm1013429 分钟前
基于微信小程序的乡村政务服务系统springboot+论文源码调试讲解
java·微信小程序·小程序·毕业设计·ssm
还这么多错误?!33 分钟前
uniapp微信小程序,使用fastadmin完成一个一键获取微信手机号的功能
微信小程序·小程序·uni-app
_院长大人_44 分钟前
微信小程序用户信息解密 AES/CBC/NoPadding 解密失败问题
微信小程序·小程序
IT 前端 张1 小时前
Uniapp 手机基座调试App 打包成Apk文件,并上传到应用商店
uni-app
User_undefined1 小时前
uniapp Native.js原生arr插件服务发送广播到uniapp页面中
android·javascript·uni-app
web135085886351 小时前
uniapp小程序使用webview 嵌套 vue 项目
vue.js·小程序·uni-app
麦兜*1 小时前
轮播图带详情插件、uniApp插件
前端·javascript·uni-app·vue
veminhe1 小时前
uni-app使用组件button遇到的问题
uni-app·vue
m0_748240021 小时前
uniapp跨平台开发---webview调用app方法
uni-app
407指导员2 小时前
uniapp 微信小程序 页面部分截图实现
微信小程序·小程序·uni-app