通过前面 4 个章节的课程，你可以基本完成一个小程序转多端 APP 并上架全过程。但多端 APP 的运行环境和微信小程序还是有很多不同之处的，如果你想通过一套代码完成多端同时开发，还是需要掌握一些必要的知识，避免踩坑。

本节课程介绍一些多端开发常见知识点，对文档做一些增强解读指引，帮助你更好理解和使用。

一、条件编译

如果你希望在小程序中展示A内容或者执行A逻辑，但在 APP 中展示B内容或者执行B逻辑。这种情况就属于条件需求：针对不同的设备和运行环境，预期完成不同的逻辑和页面显示。

为了支持跨端项目不同平台有不同呈现/逻辑的需求，多端框架支持条件编译语法。

1. 目前支持 wxml、wxs、js/ts、json，less/sass 等文件类型，资源支持通过配置区分不同平台
2. json 文件支持的标记：mini-wechat（微信小程序）、mini-android（安卓 APP）、mini-ios（苹果 APP）
3. wxml、js、less/wxss 内置的标记： ANDROID、IOS、MP 和 NATIVE（Android 或 iOS）
4. 支持 || 语法表示同时兼容多种条件，如 <!-- #if MP || ANDROID -->（json不支持该写法）
5. 条件编译采用注释语法，通过不同的条件编译不同的内容到不同的平台产物中

接下来我们简单演示一下如何开启条件编译，以及分别演示各个文件如何编写条件规则

1.在小程序开发者工具中「详情-本地设置-启用条件编译」，开启后项目在运行或者编译时会自动根据编写条件区分内容

2.WXML 文件，在这里我们简单做几个实验，后面 js 和 wxss 的原理一样。

a.如果标记没有#if #endif 闭环，则会报错 error:#if without #endif

b.在一个条件组中，编译只会取第一个匹配到的内容

c.NATIVE 与 IOS || ANDROID 等效

<!-- #if MP -->
<view>小程序展示的信息</view>
<!-- #elif IOS || ANDROID -->
<view>APP展示的信息（包含 iOS 和 Android）</view>
<!-- #endif -->


<!-- #elif MP -->
<view>小程序展示的信息</view>
<!-- #elif NATIVE -->
<view>NATIVE和IOS || ANDROID等效，在 iOS 和 Android 中显示</view>
<!-- #endif -->


<!-- #if MP -->
<view>小程序展示的信息</view>
<!-- #elif IOS -->
<view>iOS 匹配到这里就展示，下面 NATIVE 不会展示</view>
<!-- #elif NATIVE -->
<view>因为 iOS 上面匹配了，所以这里只在 Android 中显示</view>
<!-- #endif -->


<!-- #if MP -->
<view>小程序展示的信息</view>
<!-- #elif NATIVE -->
<view>在 iOS 和 Android 中显示</view>
<!-- #elif IOS -->
<view>因为上面 NATIVE 已经匹配了，这里不可能展示出来</view>
<!-- #endif -->


<!-- #if ANDROID --><view>只有安卓展示的信息</view>
<!-- #endif -->

3.WXSS 文件

.test-view{
  /* #if MP */
  color: red; // 只有
  /* #elif IOS */
  color: green;
  /* #elif ANDROID */
  color: yellow;
  /* #endif */


  /* #if MP || ANDROID */
  background-color: black;
  /* #endif */
}

4.JS 文件或 TS 文件

// #if MP
console.log('只在微信小程序执行')
// #elif IOS
console.log('只在 iOS 执行')
// #elif ANDROID
console.log('只在 Android 执行')
// #endif


// #if MP || IOS
console.log('在微信小程序和 iOS 执行')
// #endif

需要注意，js 和 ts 的条件包含需要是完整的执行体，而不可直接拆分代码行，下图这种例子是不支持的，如果你觉得冗余，建议封装为函数。

5.JSON 文件，包含 app.json 和 页面的 json，特定的 mini-wechat 、 mini-ios、mini-android 里的内容将在编译运行时，覆盖原来的。

比如 navigationBarTitleText 在 iOS 运行时，内容为 iOS demo，覆盖了原本的 Weixin，微信小程序和 Andriod 同理。

{
    "window": {
        "navigationBarTitleText": "Weixin",
    },
    "mini-wechat": {
        "window": {
            "navigationBarTitleText": "wechat demo"
        }
    },
    "mini-ios": {
        "window": {
            "navigationBarTitleText": "iOS demo"
        }
    },
    "mini-android": {
        "window": {
            "navigationBarTitleText": "android demo"
        }
    }
}

6.资源差异打包，在 app.json 中配置 static 字段，指定每个目录/文件只能发布到特定的平台。

比如下面例子，表示 miniprogram/pages/logs 目录下的所有文件，只在 iOS APP 编译时被打包，其他平台不会包含。

{
    "static": [
        {
            "pattern": "miniprogram/pages/logs/*", // 支持glob语法
            "platforms": ['mini-ios']
        }
    ]
}

更多内容，请参考官方文档。

二、多端应用配置

多端应用项目有一个统一的配置文件 project.miniapp.json，绝大部分关于多端应用的编译发布的配置都会集中到这里。

你可以在该文件中完成以下配置：

● 应用基础配置：包括应用名称、版本名称、版本号、多语言适配

● Android和 iOS 分开配置，两个端有少许不同，因此在配置上直接是全分开的，主要有：

○ 图标配置、启动界面配置、隐私政策提示框、内置菜单配置、URL 拉起配置

○ 多端 SDK 版本、CPU 类型、调试模式开关、扩展 SDK配置（LBS、Media、Network、Bluetooth等）

○ Android有权限描述许可，iOS 有隐私信息访问许可描述

● 插件配置：实现在多端应用中引入第三方 SDK 或实现原生扩展的一些功能。

更多内容，请参考官方文档。

三、SDK

我们在微信客户端中运行的小程序项目，API 的实现是由小程序基础库完成的，因为所有的微信客户端中都内置了一个版本的基础库，因此我们的小程序代码包不需要包含这一部分。

但小程序升级为多端 APP，运行在用户设备中时，原来用于实现 API 的基础库就需要跟着你的项目代码一起打包进安装包中。我们称此为 SDK。

这里打包的 SDK 和微信客户端内置的基础库 SDK 是完全不同的。多端框架根据 Android 和 iOS 分别提供了专属 SDK，两个 SDK 的版本独立更新，你可以在小程序开发者工具中看到运行时的 SDK 版本，也可以配置指定版本的 SDK。

由于 API 涉及到的功能太多，完全打包会严重占用安装包的体积，因此 SDK 这里做了拆分。由一个基础 SDK 和若干个扩展 SDK 组成。

在打包构建时，多端框架会强制打包基础 SDK，集成丰富的 API 与相关组件，用来保障最基础的应用的正常运行。

基础 SDK 支持的 API 列表，请看官方文档。

另外针对登录、支付、高级网络、LBS、媒体、蓝牙、苹果登录、消息推送、扫码、画布、广告等场景，延伸出多个扩展 SDK，你需要根据自身需要勾选对应的模块。

 比如在「示例项目-小相册」中，因为涉及到了选择图片等媒体接口，这里选择了视频、相册、相机能力。

扩展 SDK 列表，请看官方文档。

在开发者工具中运行时，默认具备所有扩展 SDK，因此需要注意在开发完成后要真机运行看看实际效果，检查扩展 SDK 是否正确勾选。

四、vConsole

我们在前面几个章节课程中，会发现运行的 APP 有绿色的 vConsole 悬浮按钮，这是多端框架内置用于辅助调试的。

升级多端项目后，在 project.miniapp.json 中，调试模式是默认打开的，我们可以自己操作关闭。

主要注意：iOS 和 Andriod 的调试是分开配置的，你需要一一对应。

更多信息，请参考官方文档。

五、更多

至此，你完成了多端应用入门课程的学习！接下来你可以参考官方文档来从实践中学习更多内容，如果遇到问题可前往多端应用交流专区 | 微信开放社区反馈，或者联系多端小助手加入官方技术交流群

我们会在后续推出进阶课程，做一些特定场景下的开发指导，比如文件分享、开屏广告设置、跳转第三方APP、消息推送、订阅消息等等。