一、多端开发概述：小程序生态现状与跨端方案对比

大家好，我是这门课的主讲。今天咱们聊聊多端开发这件事。

说实话，我刚入行那会儿，小程序还没这么火。微信小程序刚出来时，大家都觉得是个新鲜玩意儿。现在呢？你打开手机看看，微信、支付宝、抖音、快手……每个超级App里都塞满了小程序。我有个朋友开玩笑说，现在手机里装的不是App，是「小程序启动器」。

1.1 小程序生态现状

先看看各个平台的体量。我整理了一张表，你感受一下：

平台	日活用户	小程序数量	开发语言	特色能力
微信	4亿+	300万+	WXML + WXSS + JS	社交裂变、支付闭环
支付宝	2亿+	100万+	AXML + ACSS + JS	信用体系、金融场景
抖音	1.5亿+	50万+	TTML + TTSS + JS	短视频引流、直播带货
快手	1亿+	30万+	KML + KSS + JS	老铁文化、下沉市场

你看，每个平台都有自己的「脾气」。微信强调社交关系链，支付宝看重信用和金融，抖音和快手则围绕内容做文章。这意味着什么？意味着你写一套代码，想在四个平台都跑通，没那么简单。

1.2 多端适配的挑战与价值

为什么要做多端？说白了，用户在哪，你就得到哪。微信有10亿用户，抖音有6亿，你只做一个平台，等于放弃了一半市场。

但多端适配的坑，我踩过不少。给你列几个典型的：

• API差异：微信的wx.request，支付宝叫my.request，抖音叫tt.request。名字不一样，参数也不一样。
• 组件差异：微信的scroll-view支持下拉刷新，支付宝的scroll-view就不支持。你得自己写。
• 样式差异：微信支持rpx，支付宝支持rpx但换算比例不同。抖音干脆不支持rpx。
• 生命周期差异：微信的onShow在支付宝里叫onAppear。你写错一个，页面就崩了。

那多端适配的价值在哪？我算过一笔账：

1. 用户覆盖：多一个平台，多一批用户。微信和抖音的用户重合度其实不高。
2. 运营灵活性：微信适合做私域，抖音适合做公域。两个都占着，运营策略可以互补。
3. 抗风险能力：微信封了你一个接口，你还有支付宝和抖音。别把鸡蛋放一个篮子里。

1.3 跨端开发方案对比

好了，问题来了：怎么解决多端适配？目前主流的方案有三个：Taro、uni-app、kbone。我三个都用过，说说我的感受。

Taro

Taro是京东凹凸实验室出的。它的思路是「编译时」方案——你写React语法，它帮你编译成各个平台的小程序代码。

// Taro 示例
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

export default class Index extends Component {
  componentDidMount () {
    // 自动适配各平台
    Taro.request({
      url: 'https://api.example.com/data',
      success: (res) => {
        console.log(res)
      }
    })
  }

  render () {
    return (
      <View>
        <Text>Hello Taro</Text>
      </View>
    )
  }
}

我个人习惯用Taro，因为我是React开发者。它的生态比较成熟，社区活跃。但有个问题——编译后的代码体积偏大。我做过一个项目，Taro编译出来的包比原生写的大了30%。

uni-app

uni-app是DCloud出的。它用的是Vue语法，支持编译到微信、支付宝、抖音、快手等十几个平台。

<!-- uni-app 示例 -->
<template>
  <view>
    <text>Hello uni-app</text>
  </view>
</template>

<script>
export default {
  onLoad() {
    // 自动适配各平台
    uni.request({
      url: 'https://api.example.com/data',
      success: (res) => {
        console.log(res)
      }
    })
  }
}
</script>

uni-app的优势是「开箱即用」。你装个HBuilderX，新建项目就能跑。而且它内置了很多跨端组件，比如uni-ui，省了你不少事。

但uni-app也有坑。它的「条件编译」机制虽然灵活，但写多了代码会变得很乱。我见过一个项目，一个文件里塞了四套平台的逻辑，读起来像天书。

kbone

kbone是微信官方出的。它的思路比较特别——在微信小程序里跑一个「迷你浏览器」，让你用Web的方式写小程序。

// kbone 示例
// 你直接写 Vue/React 代码，kbone 帮你跑在小程序里
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

kbone的好处是「迁移成本低」。如果你有现成的Vue/React项目，改改就能跑成小程序。但坏处也很明显——性能差。毕竟多了一层「浏览器」的模拟，渲染速度比原生慢不少。

1.4 我的一点经验

最后分享一个我踩过的坑。有一次，我用Taro开发一个电商小程序，微信端跑得好好的，一到支付宝端就白屏。查了半天，发现是Taro的@tarojs/components里有个组件在支付宝端不支持。

怎么办？我用了Taro的「条件编译」功能，给支付宝端单独写了一套组件。虽然代码丑了点，但至少能跑了。

好了，这一章就聊到这。下一章我们开始动手，从零搭建一个跨端项目。到时候我会带着你一步步配置环境、写代码、调试。准备好了吗？