1. 项目概述为什么要在Unity里集成Web界面如果你是一个Unity开发者最近可能被一个想法困扰过游戏或应用里那些复杂的设置菜单、实时更新的排行榜、或者需要频繁调整的参数面板如果不用Unity的UI系统重做而是直接嵌入一个网页会不会更高效这个想法就是“在Unity应用中集成Web界面”的核心。它远不止是把一个浏览器窗口塞进游戏那么简单而是一种架构思路的转变旨在融合Unity强大的实时渲染、物理模拟能力与Web技术生态的快速迭代、动态部署和丰富交互特性。我最初接触这个需求是在开发一个面向企业的模拟培训项目。客户要求后台管理员能实时调整训练场景的参数如天气、NPC行为逻辑并且这些调整界面要能由他们的Web前端团队独立开发和更新无需每次改动都让我们重新打包、发布整个Unity应用。传统做法是用Unity的UIUGUI或UI Toolkit重做一套后台但沟通成本高、迭代慢。而集成一个Web界面让Unity应用变成一个“浏览器”去加载并显示一个由HTML/CSS/JavaScript构建的独立页面问题就迎刃而解了。Web页面可以独立部署在服务器上更新即生效Unity则专注于核心的3D模拟渲染两者通过定义好的接口进行通信。这种模式的应用场景非常广泛。除了企业工具在游戏领域你可以用它来做实时更新的活动公告、社区论坛入口、基于WebGL的小游戏合集平台、甚至是用Three.js等库制作的、但需要与Unity场景联动的特殊效果展示。对于应用开发者它可以用来构建复杂的仪表盘、数据可视化图表或者集成第三方Web服务如支付、地图、直播。其核心价值在于“解耦”和“复用”将频繁变化、需要专业前端技能或已有现成方案的部分交给Web让Unity回归其最擅长的领域。2. 核心方案选型与决策逻辑当你决定要走这条路摆在面前的有几条主流技术路径。选择哪一条不取决于哪个听起来最酷而完全取决于你的项目类型、目标平台和具体需求。这里我结合自己的踩坑经验帮你分析一下。2.1 方案一Unity WebGL iframe / 前端路由这是最“原生”的Web集成方式但前提是你的整个Unity应用本身就是以WebGL形式发布的。在这种模式下Unity应用运行在浏览器中它和Web页面的界限本身就非常模糊。实现思路你的Unity WebGL构建物通常是一个包含index.html、.js和.data等文件的包。你可以直接修改这个index.html在Unity的Canvas元素之外用HTML/CSS/JS构建你的控制界面。更常见的做法是将Unity WebGL构建物作为一个组件嵌入到一个更大的前端应用如Vue、React项目中。通过iframe嵌入或者使用Unity提供的UnityLoader或较新的UnityInstanceAPI进行更精细的集成。为什么选择它平台锁定你的目标平台就是浏览器。这通常是HTML5游戏、在线演示、教育模拟等项目的必然选择。通信直接Unity与JavaScript的互调SendMessage,JSLib是官方原生支持成熟稳定。你可以轻松地从JS调用C#方法或从C#调用JS函数实现双向通信。生态融合可以无缝利用整个现代Web前端生态npm包、UI框架、图表库等都能直接使用。需要避开的坑性能与尺寸WebGL的性能瓶颈和初始加载体积是老大难问题。如果你的Web界面非常复杂与Unity内容大量同屏交互需要仔细管理内存和渲染负载。输入冲突Web页面上的输入如文本框和Unity Canvas的输入如鼠标点击3D物体可能会冲突需要妥善处理事件冒泡和焦点管理。移动端适配在移动端浏览器上性能限制更严触摸交互的处理也需要额外小心。提示如果你主要做WebGL项目这几乎是必选项。重点学习UnityEngine.WebGL命名空间下的API和如何编写.jslib插件文件。2.2 方案二桌面/移动端原生应用集成浏览器组件这是更普遍意义上的“在Unity应用中集成Web界面”适用于发布为Windows、macOS、Android、iOS原生应用的情况。核心思路是在Unity运行时中内嵌一个浏览器渲染引擎。2.2.1 桌面平台Windows/macOS对于桌面端有几个久经考验的解决方案Unity官方实验性包Unity WebView这是一个由Unity维护的插件在Windows和macOS上使用系统原生WebViewWindows是Edge WebView2macOS是WKWebView在Android和iOS上使用系统WebView。它的优点是官方背景与系统集成较好但标记为“实验性”API可能变动且功能相对基础。第三方插件如Vuplex 3D WebView这是目前功能最强大、最专业的商业插件。它支持在3D空间中的任意Mesh上显示网页而不仅仅是2D UI层支持复杂的交互如键盘输入、文件上传、视频播放、自定义JavaScript注入和回调。如果你的需求复杂比如需要在3D场景中的一块屏幕、一本书或一个平板电脑模型上显示网页Vuplex几乎是唯一选择。系统浏览器组件在Windows上你可以通过编写原生插件调用CefSharp或WebView2的API在macOS上可以使用WKWebView。但这需要较强的原生开发能力不推荐大多数团队从头开始。为什么选择Vuplex这类第三方插件因为它解决了核心痛点在3D空间渲染Web内容。官方WebView通常只提供一个2D的矩形覆盖层而Vuplex可以将网页内容渲染到一个Render Texture上然后你可以像使用普通贴图一样把它赋给任何材质球贴在任意3D物体表面。这为游戏内的电脑、电视、手机等设备显示真实网页提供了可能。此外它的通信接口设计得非常友好双向调用都很方便。2.2.2 移动平台Android/iOS移动端的情况略有不同Android系统提供了Android WebView组件。Unity可以通过编写Android Java插件启动一个原生的Activity来承载这个WebView或者使用像Unity WebView或Vuplex这样的插件它们封装了这部分逻辑。iOS系统提供了WKWebView。同样需要通过Objective-C/Swift插件来创建和通信。第三方插件同样封装了这些细节。选型决策逻辑需求复杂度如果只是弹出一个简单的2D帮助页面或公告Unity WebView实验性可能够用。如果需要在3D物体上显示或者有复杂的表单交互、文件操作商业插件如Vuplex的投资回报率很高。平台范围确认你选择的插件支持所有目标平台。有些免费方案可能只支持部分平台。长期维护查看插件的更新频率、社区支持和文档质量。一个不再维护的插件会在新Unity版本或系统更新时带来巨大风险。预算商业插件需要付费但节省的开发时间和带来的稳定性往往是值得的。对于原型或内部工具可以先用免费方案验证核心可行性。2.3 方案三基于通信桥接的混合架构还有一种思路不追求在Unity视图内渲染网页而是将Unity应用和Web应用视为两个独立的进程或服务通过网络或本地进程间通信IPC进行数据同步。实现方式Unity应用作为客户端连接到一个本地运行的轻量级Web服务器如用Node.js、Python Flask搭建。这个服务器同时托管你的Web界面。用户操作Web界面服务器收到请求后通过WebSocket或TCP/UDP套接字将指令发送给Unity客户端。Unity执行操作后再将状态数据发回服务器由Web界面更新显示。为什么选择它极致解耦Web界面和Unity应用完全独立可以用任何技术栈开发Web端部署和更新极其灵活。适用于复杂后台适合需要非常复杂、动态的管理后台且这个后台可能同时管理多个Unity客户端实例如教室里的多台培训模拟器。调试方便Web端和Unity端可以分别独立调试通信协议清晰。需要避开的坑架构复杂引入了网络通信层增加了延迟、连接稳定性等需要考虑的问题。安全性需要设计认证和授权机制防止未授权的访问和控制。不适合实时性要求极高的交互网络通信必然带来延迟对于需要即时反馈的操作如拖拽旋转物体体验可能不佳。3. 实战使用Unity WebView实验性集成2D控制面板我们以一个具体的、相对简单的场景为例在Windows平台的Unity桌面应用中集成一个2D的Web控制面板用于调整场景中一个立方体的颜色和旋转速度。我们将使用Unity官方的Unity WebView实验性包因为它无需额外付费且适合基础的2D覆盖需求。3.1 环境准备与插件导入首先你需要一个Unity项目这里以2022.3 LTS为例。Unity WebView包需要通过Package Manager的“Add package by name”方式安装。打开Package ManagerWindow Package Manager。切换到“Unity Registry”。搜索“WebView”找到名为“Web View (Experimental)”的包点击安装。或者点击左上角“”号选择“Add package by name”输入com.unity.webview进行安装。安装后你可以在菜单栏看到“Window Web View”的选项。这个包的核心是WebView类它提供了创建、加载网页和基本交互的能力。需要注意的是在编辑器中它可能无法完美模拟原生行为很多功能需要在真机或打包后的应用中才能完全生效。3.2 创建Web界面与Unity通信脚本Web端HTML/JS 我们创建一个简单的panel.html文件它将是我们的控制面板。!DOCTYPE html html head meta charsetutf-8 titleUnity Control Panel/title style body { font-family: sans-serif; padding: 20px; background: #f0f0f0; } .control-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } input, button { padding: 8px; margin-top: 5px; } #status { margin-top: 20px; padding: 10px; background: #e0e0e0; border-radius: 4px; } /style /head body h2Unity Cube Controller/h2 div classcontrol-group label forcolorPickerCube Color:/label input typecolor idcolorPicker value#ff0000 /div div classcontrol-group label forspeedSliderRotation Speed: span idspeedValue1.0/span/label input typerange idspeedSlider min0 max5 step0.1 value1.0 /div button idresetBtnReset Cube/button div idstatusStatus: Ready/div script // 定义与Unity通信的函数。这些函数会被Unity的WebView调用。 // Unity会尝试在页面全局作用域下寻找名为unityGame的对象。 window.unityGame { // Unity调用此方法来更新Web界面上的状态显示 updateStatus: function(message) { document.getElementById(status).innerText Status: message; }, // Unity调用此方法来同步立方体的当前颜色到Web界面 syncCubeColor: function(hexColor) { document.getElementById(colorPicker).value hexColor; } }; // 页面元素的事件监听 document.getElementById(colorPicker).addEventListener(input, function(e) { // 当颜色改变时调用Unity中定义的方法 // 这里假设Unity WebView注册了一个名为callUnity的全局函数来转发消息 // 实际中更通用的方式是通过window.unityWebView或window.chrome.webview取决于平台通信 // 我们使用一个更通用的postMessage方式需要在Unity端设置允许 sendMessageToUnity(ColorChanged, e.target.value); }); document.getElementById(speedSlider).addEventListener(input, function(e) { document.getElementById(speedValue).textContent e.target.value; sendMessageToUnity(SpeedChanged, e.target.value); }); document.getElementById(resetBtn).addEventListener(click, function() { sendMessageToUnity(ResetCube); }); // 发送消息给Unity的辅助函数 function sendMessageToUnity(action, data) { // 方法1如果Unity WebView环境提供了unityWebView对象常见于移动端封装 if (window.unityWebView window.unityWebView.postMessage) { const message JSON.stringify({ action: action, data: data }); window.unityWebView.postMessage(message); } // 方法2使用更标准的window.parent.postMessage适用于iframe嵌入或某些桌面WebView else if (window.parent window.parent ! window) { window.parent.postMessage({ action: action, data: data }, *); } // 方法3直接尝试调用一个可能由Unity注入的全局函数较旧的方式 else if (typeof callUnity ! undefined) { callUnity(action | (data || )); } else { console.log(WebView - Unity:, action, data); // 实际开发中这里需要与Unity端的通信方案保持一致 // 为了示例我们假设消息能通过某种机制被Unity捕获 } } // 页面加载完成后通知Unity window.addEventListener(load, () { if (window.unityGame window.unityGame.updateStatus) { window.unityGame.updateStatus(Web Panel Loaded); } }); /script /body /html这个HTML页面包含一个颜色选择器、一个速度滑块和一个重置按钮。它定义了window.unityGame对象包含Unity可以调用的方法。同时它监听用户操作并尝试通过几种可能的方式将消息发送回Unity。Unity端C#脚本 我们需要一个脚本来管理WebView并处理通信。创建一个WebViewManager.cs脚本。using UnityEngine; using UnityEngine.UI; using System; using System.Runtime.InteropServices; #if UNITY_WEBVIEW using Unity.WebView; #endif public class WebViewManager : MonoBehaviour { public string initialUrl file:///; // 初始URL本地文件需用file协议 public RectTransform webViewContainer; // 用于定位和缩放WebView的UI容器 private GameObject targetCube; private Renderer cubeRenderer; private float rotationSpeed 1.0f; private Color targetColor Color.red; #if UNITY_WEBVIEW private WebView webView; #endif void Start() { // 找到场景中的立方体 targetCube GameObject.Find(TargetCube); // 假设场景中有一个名为TargetCube的物体 if (targetCube ! null) { cubeRenderer targetCube.GetComponentRenderer(); if (cubeRenderer ! null) { cubeRenderer.material.color targetColor; } } InitializeWebView(); } void InitializeWebView() { #if UNITY_WEBVIEW !UNITY_EDITOR // 注意WebView在编辑器中可能无法正常工作通常只在打包后运行 if (webViewContainer null) { Debug.LogError(WebView Container is not assigned!); return; } // 1. 创建WebView实例 webView new WebView(); // 2. 设置WebView的初始位置和大小基于UI容器的屏幕空间矩形 Rect containerRect GetScreenRect(webViewContainer); webView.Init( x: (int)containerRect.x, y: (int)containerRect.y, width: (int)containerRect.width, height: (int)containerRect.height ); // 3. 注册JavaScript回调函数 // 当Web页面调用window.unityWebView.postMessage时会触发此事件 webView.MessageReceived OnWebMessageReceived; // 4. 加载本地HTML文件 // 需要将panel.html放在项目的StreamingAssets文件夹下 string htmlPath System.IO.Path.Combine(Application.streamingAssetsPath, panel.html); // 构建正确的file:// URL string fileUrl file:// htmlPath.Replace(\\, /); Debug.Log(Loading WebView from: fileUrl); webView.LoadUrl(fileUrl); // 5. 设置WebView可见并获取焦点 webView.SetVisible(true); webView.Focus(); #else Debug.LogWarning(Unity WebView is not supported in this platform or build. Please ensure you are on a supported platform (Desktop, Android, iOS).); #endif } // 将UI RectTransform转换为屏幕空间的像素矩形 private Rect GetScreenRect(RectTransform rectTransform) { Vector3[] corners new Vector3[4]; rectTransform.GetWorldCorners(corners); Vector2 min RectTransformUtility.WorldToScreenPoint(null, corners[0]); Vector2 max RectTransformUtility.WorldToScreenPoint(null, corners[2]); return new Rect(min.x, Screen.height - max.y, max.x - min.x, max.y - min.y); // 注意Y轴转换 } // 处理从WebView接收到的消息 private void OnWebMessageReceived(string message) { Debug.Log(Received from WebView: message); // 简单解析消息实际项目建议使用JSON try { // 假设消息格式为 Action|Data var parts message.Split(|); string action parts[0]; string data parts.Length 1 ? parts[1] : null; switch (action) { case ColorChanged: if (ColorUtility.TryParseHtmlString(data, out Color newColor)) { targetColor newColor; if (cubeRenderer ! null) cubeRenderer.material.color newColor; // 可以回调Web页面确认 ExecuteJavaScript($unityGame.updateStatus(Color changed to {data})); } break; case SpeedChanged: if (float.TryParse(data, out float speed)) { rotationSpeed speed; ExecuteJavaScript($unityGame.updateStatus(Speed set to {speed})); } break; case ResetCube: rotationSpeed 1.0f; targetColor Color.red; if (cubeRenderer ! null) cubeRenderer.material.color targetColor; // 同步状态回Web页面 ExecuteJavaScript($unityGame.syncCubeColor({ColorUtility.ToHtmlStringRGB(targetColor)})); ExecuteJavaScript($unityGame.updateStatus(Cube reset)); break; } } catch (Exception e) { Debug.LogError(Failed to parse WebView message: e.Message); } } // 在WebView中执行JavaScript代码 private void ExecuteJavaScript(string jsCode) { #if UNITY_WEBVIEW !UNITY_EDITOR if (webView ! null) { webView.ExecuteJavaScript(jsCode); } #endif } void Update() { // 旋转立方体 if (targetCube ! null) { targetCube.transform.Rotate(Vector3.up, rotationSpeed * Time.deltaTime * 50f); } // 示例每5秒从Unity主动发送一次消息到Web页面 // if (Time.frameCount % 300 0) // 约5秒一次假设60FPS // { // ExecuteJavaScript($unityGame.updateStatus(Unity is running: {Time.time:F1}s)); // } } void OnDestroy() { #if UNITY_WEBVIEW !UNITY_EDITOR if (webView ! null) { webView.MessageReceived - OnWebMessageReceived; webView.Dispose(); webView null; } #endif } // 提供一个公有方法供其他Unity脚本调用以更新Web界面 public void UpdateWebPanelStatus(string status) { ExecuteJavaScript($unityGame.updateStatus({status})); } }这个脚本做了以下几件事初始化WebView在Start中根据一个UI容器如一个全屏或半屏的Panel的屏幕坐标来创建和定位WebView。加载本地HTML从StreamingAssets文件夹加载我们之前写的panel.html。StreamingAssets是Unity中存放不需要编译的原始资源如HTML、视频的文件夹打包后路径可访问。处理通信订阅MessageReceived事件来接收来自Web页面的消息。在OnWebMessageReceived中解析消息并执行相应的操作改变立方体颜色、速度等。调用JavaScript通过ExecuteJavaScript方法可以主动在WebView中执行JS代码例如调用我们定义在window.unityGame中的函数来更新Web界面状态。生命周期管理在OnDestroy中清理事件订阅和WebView资源防止内存泄漏。3.3 场景搭建与配置在Unity场景中创建一个立方体命名为“TargetCube”。在UI Canvas下创建一个空的GameObject作为WebView的容器比如一个Panel并调整其大小和位置到你希望Web界面显示的区域例如屏幕右侧一半。将这个Panel的RectTransform组件拖拽到WebViewManager脚本的webViewContainer字段上。将WebViewManager脚本挂载到一个场景中常驻的GameObject上如一个空的“Manager”对象。在项目根目录创建Assets/StreamingAssets文件夹如果不存在。将之前写好的panel.html文件复制到这个文件夹内。关键一步由于我们要加载本地文件file://协议并且需要允许Web页面与Unity通信在Player Settings中可能需要配置额外的权限。对于桌面平台如Windows这通常涉及允许“本地文件访问”。具体设置因Unity版本和平台而异如果遇到加载失败或通信问题需要查阅对应平台和WebView插件的文档。3.4 打包测试与真机调试完成上述步骤后将项目打包为Windows桌面应用例如.exe。在打包后的应用中你应该能看到Web界面成功加载并且与Unity场景中的立方体实现交互。真机调试技巧日志充分利用Debug.Log。在WebView的回调函数和通信逻辑中多打日志便于追踪执行流程。远程调试一些高级的WebView组件如Windows的WebView2支持远程调试。你可以在Unity应用运行时用本地的Microsoft Edge或Chrome浏览器打开特定的调试端口如localhost:9222来检查和调试其中加载的网页内容就像调试普通网页一样。这对于排查Web端JavaScript错误和CSS样式问题至关重要。备用通信方案示例中使用了相对简单的字符串管道通信。对于复杂数据强烈建议使用JSON格式。在Web端用JSON.stringify封装数据在Unity端用JsonUtility或第三方库如Newtonsoft.Json解析这样更健壮、更易扩展。4. 进阶使用Vuplex 3D WebView实现空间UI如果你的需求是在3D场景中的物体表面比如游戏里的一台电脑屏幕、一个平板设备显示网页那么Unity WebView就力不从心了。这时就需要像Vuplex 3D WebView这样的专业插件。它的工作流程有所不同但核心思想一致将网页渲染到一个Render Texture上。基本步骤导入插件从Asset Store购买并导入Vuplex。创建3D WebView预制体Vuplex提供了CanvasWebViewPrefab用于UI Canvas和WebViewPrefab用于3D世界空间。我们将后者拖入场景调整其Transform使其附着在目标物体表面如一个Quad面片。配置Render TextureWebViewPrefab会自动创建或让你指定一个Render Texture。这个纹理就是网页内容的实时渲染结果。创建材质创建一个新的材质球使用Unlit/Texture或类似的Shader并将上一步的Render Texture赋给它的主纹理。应用材质将这个材质球赋给你希望显示网页的3D物体如那个Quad面片。脚本控制通过Vuplex提供的API如webViewPrefab.WebView.LoadUrl()加载网页并通过webViewPrefab.WebView.MessageEmitted事件和webViewPrefab.WebView.ExecuteJavaScript()方法进行双向通信。其API设计通常更现代支持基于Promise的异步操作和直接的对象传递。Vuplex的优势真正的3D集成网页成为3D世界的一部分可以接受3D射线交互如鼠标点击、VR控制器指点。性能更佳由于直接渲染到纹理并由GPU处理性能通常优于2D覆盖层方案。功能全面支持视频播放、文件下载、Cookie管理、自定义字体等高级浏览器特性。5. 常见问题、性能优化与安全考量在实际集成过程中你会遇到各种各样的问题。这里我整理了一份“避坑指南”。5.1 通信失败与调试问题Web页面加载了但点击按钮Unity没反应。排查检查控制台首先看Unity Editor的Console和浏览器的开发者工具控制台如果支持是否有JS错误。确认通信协议确保Web端发送消息的方式和Unity端监听的方式匹配。是使用postMessage、调用全局函数还是其他插件特定的API如Vuplex的window.vuplex路径与协议加载本地HTML时file://路径是否正确跨域限制CORS是否会导致某些资源如图片、外部API加载失败考虑使用一个简单的本地HTTP服务器如Python的http.server模块来托管HTML文件使用http://localhost访问可以避免很多file://协议的限制。平台差异WebView在Editor下的行为可能与真机不同。务必在目标平台进行最终测试。5.2 性能优化要点WebView是一个相对重量级的组件不当使用会严重影响应用性能。按需加载与卸载不要一开始就创建所有WebView。只在需要显示的时候初始化它并在关闭后及时调用Dispose()释放资源。对于3D WebView可以在物体移出摄像机视锥体时暂停或卸载网页内容。限制复杂页面避免在WebView中加载含有大量动画、复杂CSS效果或频繁执行JavaScript的页面。一个只用于显示静态信息或简单表单的页面是理想的。纹理尺寸对于3D WebViewRender Texture的分辨率不要设置得过高。根据物体在屏幕上的实际显示大小来设定一个合理的分辨率如1024x768过高的分辨率会浪费GPU内存和带宽。输入处理确保WebView的输入事件不会与Unity场景的输入事件冲突。你可能需要根据情况暂时禁用Unity的某些输入检测或者处理输入事件的传递顺序。5.3 安全与隐私将WebView引入客户端应用也带来了新的安全考量。加载远程内容的风险如果你的WebView加载的是互联网上的URL那么你就要信任该网站的内容。恶意的网站可能试图通过JavaScript攻击你的Unity应用或者窃取用户数据。永远不要加载不可信的第三方网址。本地数据隔离WebView通常有自己的Cookie、LocalStorage等存储空间。要清楚这些数据存储在哪里以及是否会在应用卸载时被清理。JavaScript注入虽然ExecuteJavaScript功能强大但也要谨慎使用。避免执行来自不可信源的JS代码。同时确保从Web端接收到的消息MessageReceived都经过严格的验证和解析防止注入攻击。用户权限如果Web页面需要访问摄像头、麦克风、地理位置等需要确保你的应用已经获得了相应的系统权限并且WebView配置允许这些访问。5.4 移动端特殊处理在Android和iOS上集成WebView会有一些平台特有的问题。键盘弹出在移动端当WebView中的输入框获得焦点时系统键盘会弹出。这可能会遮挡WebView或Unity界面。你需要监听键盘事件并可能调整UI布局或相机视角。滚动冲突在WebView内部滚动页面时要防止手势事件穿透到Unity的相机控制或其他UI元素上。这通常需要在插件层面进行配置或者通过脚本处理手势事件的拦截。内存管理移动设备内存有限。要更加严格地管理WebView的生命周期及时释放不用的实例。在iOS上WebView尤其是WKWebView是独立进程内存管理相对较好但仍需注意。启动速度首次初始化系统WebView组件可能会有短暂延迟。可以考虑在应用启动时预初始化一个隐藏的WebView或者设计加载动画来改善用户体验。集成Web界面到Unity中就像在坚固的城堡旁边搭建了一个灵活多变的前哨站。城堡Unity负责核心的图形渲染和游戏逻辑坚不可摧前哨站Web则负责与外界快速交互和信息展示易于改造。掌握这项技术能让你在应对复杂UI、动态内容、多平台管理需求时拥有一个非常强大的工具。关键在于明确你的核心需求选择最适合的技术路径并在性能、安全和用户体验之间找到平衡点。从我自己的项目经验来看一旦跑通第一个可交互的Demo后面很多看似复杂的功能都会变得有迹可循。