最近有朋友问我，怎样开发一款能在多平台发布上线的小程序。今天就跟大伙儿聊聊，如何用 Uni-app 实现一套代码，同时打包生成微信小程序和抖音小程序，省心又高效。一、uni-app 到底是个啥？
这是 DCloud 搞出来的一套跨端框架，底层用的是 Vue 语法。说白了就一句话：写一遍代码，能编译出 7 个平台，包括微信小程序、抖音/头条小程序、支付宝小程序、百度小程序、H5、安卓 App、iOS App。以前你得给每个平台单独写一套，现在不用了，一套搞定，多爽。
二、必要条件（前置准备）
打开微信公众号平台：https://mp.weixin.qq.com，点击立即注册->选择小程序->填写注册信息，注册个账号，个人或者企业都行。
注册完拿到AppID，这个后面配置项目的时候要用到。还有，备案必须做，不备案上不了线，这是硬规定，别想着绕过去。去 https://developer.open-douyin.com 注册抖音开放平台的账号，然后创建小程序，把AppID拿到手，同样，备案别忘了做，跟微信小程序一样，没备案发布不了。
三、开工之前，工具得备齐
1. HBuilderX
- 下载地址：https://www.dcloud.io/hbuilderx.html
2. 微信开发者工具
3. 抖音开发者工具
- 跟微信那个一个道理，跑抖音小程序、预览、发布，同样三步走。
四、创建 uni-app 项目
打开 HBuilderX，点新建项目，然后推荐这么选：项目类型：选 uni-app
模板：默认模板就行，别整那些花里胡哨的
Vue 版本：推荐 Vue 3，现在主流都用这个
云服务：新手建议先关掉，别给自己找麻烦
- 点创建，完事儿！你现在手里就有一套能跨端的代码了。
五、怎么同时跑微信和抖音？
uni-app 最爽的就是这个——改一个地方，两边都能看。1. 跑微信小程序
2. 跑抖音小程序
- 一样的套路：运行 → 运行到小程序模拟器 →抖音开发者工具
填抖音开发者工具的路径
去抖音开发者工具里开服务端口
- 搞定之后点运行，抖音开发者工具自动弹出来，小程序效果直接看。
六、重点：一套代码如何适配两端？
微信和抖音的 API 完全不一样，登录、支付、拿用户信息，各玩各的。uni-app 搞了个条件编译，说白了就是：编译的时候自动挑对应的代码塞进去，其他平台的代码直接无视。HTML页面里区分：
<!-- #ifdef MP-WEIXIN --><view>这段只在微信里显示</view><!-- #endif --><!-- #ifdef MP-TOUTIAO --><view>这段只在抖音里显示</view><!-- #endif -->
JS 里区分登录：
// #ifdef MP-WEIXINwx.login({ success: res => {}})// #endif// #ifdef MP-TOUTIAOtt.login({ success: res => {}})// #endif
样式也能区分：
/* #ifdef MP-WEIXIN */.text { color: red; }/* #endif */
条件编译就是跨端的核心武器，不会这个等于白学 uni-app。
七、如何发布上线？
- 编译代码：HBuilderX 顶部菜单 →「发行」→「小程序 - 抖音」，生成抖音小程序包（路径：
unpackage/dist/build/mp-toutiao）
八、两端最常见的差异
九、最后总结
- 工具：HBuilderX + 微信开发者工具 + 抖音开发者工具
十、最后说两句
好了今天就聊到这里，最后祝大伙儿，用Uni-app少走弯路，一套代码搞定两个小程序，省时间、省精力，尽快把小程序做起来。有啥不懂的，也可以在评论区留言，在下知无不言、言无不尽～
