一、uni-app 到底是个啥？

二、必要条件（前置准备）

• 微信小程序

打开微信公众号平台：https://mp.weixin.qq.com，点击立即注册->选择小程序->填写注册信息，注册个账号，个人或者企业都行。

• 抖音小程序

三、开工之前，工具得备齐

1. HBuilderX

• 这是 Uni-app 自家的编辑器，
• 下载地址：https://www.dcloud.io/hbuilderx.html
• 干啥用的？写代码、一键编译到各个平台，简单粗暴。

2. 微信开发者工具

• 去微信公众平台 → 文档 → 工具 进行下载。
• 用来跑微信小程序、预览效果、最后发布上线。

3. 抖音开发者工具

• 上抖音开放平台 → 开发者工具 下载。
• 跟微信那个一个道理，跑抖音小程序、预览、发布，同样三步走。

四、创建 uni-app 项目

• 项目类型：选 uni-app

• 模板：默认模板就行，别整那些花里胡哨的

• Vue 版本：推荐 Vue 3，现在主流都用这个

• 云服务：新手建议先关掉，别给自己找麻烦

• 点创建，完事儿！你现在手里就有一套能跨端的代码了。

五、怎么同时跑微信和抖音？

1. 跑微信小程序

• HBuilderX 顶部菜单：运行 → 运行到小程序模拟器 →微信开发者工具
• 第一次用要配置一下：

• 把微信开发者工具的安装路径填进去

• 去微信开发者工具里把服务端口打开（设置 → 安全 → 服务端口）

• 配置好以后，点一下，自动就打开微信开发者工具，小程序直接跑起来了。

2. 跑抖音小程序

• 一样的套路：运行 → 运行到小程序模拟器 →抖音开发者工具
• 也是第一次要配置：

• 填抖音开发者工具的路径

• 去抖音开发者工具里开服务端口

• 搞定之后点运行，抖音开发者工具自动弹出来，小程序效果直接看。
• 自动打开抖音开发者工具，显示小程序。

六、重点：一套代码如何适配两端？

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 */

七、如何发布上线？

• 微信小程序

• 编译代码：HBuilderX顶部菜单 →「发行」→「小程序-微信」，生成微信小程序包（路径：unpackage/dist/build/mp-weixin）

• 自动打包出微信小程序的代码
• 去微信开发者工具里点上传
• 登录微信公众平台提交审核，等着过

• 抖音小程序

• 编译代码：HBuilderX 顶部菜单 →「发行」→「小程序 - 抖音」，生成抖音小程序包（路径：unpackage/dist/build/mp-toutiao）
• 自动打包出抖音小程序的代码
• 去抖音开发者工具里点上传
• 登录抖音开放平台提交审核

八、两端最常见的差异

• 微信：wx.login
• 抖音：tt.login

• 微信：微信支付
• 抖音：抖音支付 / 微信支付

九、最后总结

• 工具：HBuilderX + 微信开发者工具 + 抖音开发者工具
• 账号：微信小程序账号 + 抖音小程序账号
• 开发：一套 uni-app 代码
• 运行：一键分别运行到两个开发者工具
• 适配：条件编译区分两端 API
• 发布：分别编译 → 分别上传 → 分别审核

十、最后说两句