2、开发环境搭建:注册抖音开放平台账号、创建小程序应用、获取AppID、下载并安装抖音开发者工具
好,咱们正式开始动手了。
这一章,说白了就是「把家伙事儿备齐」。我见过不少新手,一上来就急着写代码,结果卡在账号注册或者工具安装上,折腾半天。别急,咱们一步步来,把地基打牢。
2.1 注册抖音开放平台账号
首先,你得有个「抖音开放平台」的账号。这不是你刷抖音的那个账号,是给开发者用的。
打开浏览器,访问 抖音开放平台官网(别搜错了,是 open.douyin.com 那个)。
点击右上角的「注册」按钮。我个人习惯用手机号注册,验证码一收,快得很。当然,你也可以用邮箱。
注册时注意几点:
- 主体类型:个人还是企业?如果你只是学习、做个小工具,选「个人」就行。要是打算上架赚钱,得用企业资质。我一开始图省事选了个人,后来想接入支付功能,发现不行,又去重新认证企业,折腾了一周。嗯,这里提前想清楚。
- 实名认证:必须做。上传身份证正反面,人脸识别一下,几分钟就过。
- 开发者角色:选「小程序开发者」。
2.2 创建小程序应用
账号搞定了,接下来创建应用。
登录开放平台后台,在左侧菜单找到「小程序」->「小程序管理」,点击「创建小程序」。
这里要填几个关键信息:
- 小程序名称:想个好名字,2-20个字符。注意,不能跟别人重名。我当初想了个「每日天气」,结果被占了,只好改成「天气小助手Pro」。你想想看,名字还是挺重要的。
- 小程序简介:简单描述你的小程序是干嘛的。比如「提供实时天气查询和一周预报」。
- 小程序图标:上传一个 144x144 像素的 PNG 图片。没有设计能力?没关系,先用个占位图,后面再换。
- 服务类目:选一个最接近你业务的类目。比如做工具类的,就选「工具」。
填完点「提交审核」。别担心,这个审核很快,一般几分钟就通过了。审核通过后,你的小程序就创建成功了。
2.3 获取 AppID
AppID 是什么?说白了,就是你的小程序在抖音平台上的「身份证」。每个小程序都有一个唯一的 AppID。
在哪里找?
- 进入「小程序管理」页面。
- 找到你刚创建的小程序,点击「详情」。
- 在「基本设置」里,就能看到 AppID 了。
复制它,保存好。后面写代码、配置项目,处处都要用到它。
2.4 下载并安装抖音开发者工具
工具来了。抖音开发者工具,就是我们写代码、调试、预览、上传的「主战场」。
下载地址在开放平台官网的「资源」->「开发者工具」里。支持 Windows 和 macOS。
安装过程很简单,一路「下一步」就行。不过有几点我提醒一下:
- 安装路径:别装到 C 盘,尤其是 Windows 用户。我习惯装到 D 盘或者 E 盘,省得系统盘爆了。
- 版本选择:下载稳定版就行。Beta 版虽然功能新,但偶尔有坑。我一般等稳定版出来再用。
- 登录:安装完成后,打开工具,用你注册的开放平台账号扫码登录。
登录成功后,你会看到这样的界面:
抖音开发者工具 v3.x.x
├── 新建项目
├── 导入项目
├── 最近打开
└── 帮助文档
嗯,到这里,环境就搭好了。
2.5 创建第一个小程序项目
工具装好了,咱们来创建第一个项目,验证一下环境是否正常。
- 点击「新建项目」。
- 填写项目名称,比如
my-first-app。 - 选择项目目录(找个好找的地方,比如桌面)。
- 填入刚才获取的 AppID。
- 选择「抖音小程序」模板(别选成「头条小程序」了,这两个虽然像,但有些 API 不一样)。
- 点击「确定」。
等待几秒钟,工具会自动生成一个初始项目结构。你会看到类似这样的文件:
my-first-app/
├── app.js
├── app.json
├── app.css
├── pages/
│ └── index/
│ ├── index.js
│ ├── index.json
│ ├── index.css
│ └── index.ttml
└── project.config.json
看到这个结构,说明环境搭建成功了。你可以点击工具栏上的「预览」,用抖音 App 扫码看看效果。
2.6 避坑指南
最后,分享几个我踩过的坑:
- 网络问题:下载工具时,如果速度很慢,试试换个网络或者用手机热点。我遇到过公司网络屏蔽了下载链接的情况。
- 登录失败:扫码登录后一直转圈?检查一下你的开放平台账号是不是已经实名认证了。没认证的话,登录会失败。
- 项目创建失败:如果提示「AppID 无效」,去后台确认一下 AppID 是否复制完整,有没有多余的空格。
好了,环境搭建就到这里。下一章,咱们开始写真正的代码——小程序的项目结构和基础配置。到时候你会看到,抖音小程序和微信小程序其实有不少相似之处,但也有自己的特色。
公众号:蓝海资料掘金营,微信deep3321