说到 mpx 宣传片我先给结论它通常不是指一个泛泛的宣传视频而是围绕 Mpx 这个开源小程序跨端框架做一段让开发者快速理解“这是什么、解决什么问题、怎么上手”的技术传播物料。如果你正在给项目做宣传片或者准备按 mpx 教程复现一个演示项目这篇可以当成一份从脚本、拍摄、剪辑到落地页的完整操作记录。最值得先看的部分不是剪辑技巧而是“先想清楚给谁看、讲哪条主线、录哪些素材”这三件事决定了成片是技术宣传片还是项目自嗨片。Mpx 在小程序开发圈里通常指一个增强型跨端框架核心思路是让开发者用一套写小程序的方式做开发并兼顾多端输出。实际体验中它最常被讨论的点是状态管理、组件复用和跨端编译。我不打算在这里堆功能清单因为宣传片录制时真正需要的是“能演示、能验证、能讲清楚为什么”的东西。下面按实际落地顺序拆一遍。1. 先搞清楚 mpx 宣传片到底指什么1.1 先确认你要做的宣传片属于哪一类如果你是在团队内部接到“mpx宣传片”这个任务第一步不是打开剪辑软件而是找需求方确认三件事目标观众是谁、宣传片用在哪里、希望观众看完后做什么。不同答案指向完全不同的成片。给内部团队看的重点讲架构和复用可以接受出现更多代码画面。给开发者社区看的重点讲上手成本和实际效果画面要具体到能看出“这个项目不是 PPT”。给招聘用的则要突出团队技术氛围、项目复杂度和成长空间。这三类片子的素材比重差别很大混在一起拍最容易翻车。我见过不少这类片子最后变成“公司介绍加功能罗列”前半段讲企业愿景后半段贴代码截图。观众看完只记得“好像是个框架”但说不清它解决了什么真实问题。所以第一个要纠正的认知是宣传片也必须回答一个问题而不是展示一堆功能。Mpx 宣传片最适合回答的问题通常是当你要同时维护微信小程序、H5 等多端页面时怎么减少重复开发成本。1.2 宣传片里应该讲到什么程度Mpx 是开源项目常见的定位是增强型小程序跨端框架。它并不要求你放弃小程序原生开发流程而是提供更接近 Web 开发体验的写法。对于宣传片来说不需要把框架所有特性都讲完只需要讲三层一套代码怎么写、怎么编译到多端、跑起来之后页面和状态怎么管理。这里有一个实用的判断标准宣传片播完后观众能不能说出“这个框架至少有三个能力”。如果能说明信息密度可以如果观众只说“画面挺好看”那就失败了。所以我做技术宣传片时会先在脚本里把三个必须被记住的信息写死镜头再花哨也不绕过这三个信息。Mpx 项目里这三个信息我一般选多端复用、响应式数据、组件化。这三个点既不冷门也能在 60 秒内用画面讲清楚。1.3 宣传片、教程、录屏不是一回事经常有人把宣传片做成“录屏合集”这里放一段终端安装命令那里放一段页面点击没有解说也没有主线。这类内容严格说属于操作录像不是宣传片。宣传片需要在一个短时间里建立认知教程需要让观众能照着操作录屏则更多是过程存档。三者可以互补但不能互相替代。类型目标合适时长核心内容宣传片建立认知1 到 3 分钟问题、方案、演示、行动入口教程支持复现10 到 30 分钟环境、命令、代码、排查录屏过程存档不限操作流水记录如果你已经录了足够多的操作素材也不要直接把它们串起来当宣传片。先把素材按“问题、方案、演示、结果”四个位置归类放不进去的素材单独留在教程里。更具体的参考是宣传片里的代码画面不要超过总时长的 40%其余要给到真实运行页面、结果对比、文字说明和必要的旁白。2. 定主线、定受众、定素材动手录制之前做的三件事2.1 先确定观众再确定镜头给开发者看的宣传片镜头可以拍到终端、代码和报错观众会觉得真实给非技术决策者看的就要避免长时间展示代码把重点放到成本、效率和产出上。你很难用同一套素材同时满足两类人。我一般会在脚本第一行写清楚观众画像比如“5 年以上小程序开发经验的团队负责人”。有了这个定位每个画面要传达的信息就清楚了。团队负责人关心的不是某个 API 怎么写而是接入成本有多高、现有项目能不能平滑迁移、团队学习周期多长。对这类观众宣传片里应该出现“从原项目到 Mpx 项目如何迁移”的过程而不是大量组件定义。受众最关心的点画面建议开发者写法、编译、上手成本编辑器、终端、开发工具技术负责人迁移成本、稳定性、团队效率对比图、项目结构、数据非技术决策者人力节省、交付周期、风险页面效果、时间轴、结论2.2 一条主线三个能力一个行动入口技术宣传片最容易贪多。今天想讲跨端明天想讲性能后天又想把周边生态放进去结果每条线都只有一句旁白观众什么也没记住。更稳妥的结构是一条主线三个能力一个行动入口。主线可以这样定“前端团队在维护多个小程序端时重复工作太多Mpx 用一套代码统一开发流程。”三个能力围绕主线展开第一组件和页面可以跨端复用第二状态管理让复杂页面更可维护第三编译工具链负责多端输出。最后的行动入口就是“打开文档、跑通 demo”全片最后一个画面必须带出仓库地址或文档链接。这套结构的好处是方便验证。你可以在剪辑完后随便找个人看一遍问他三个问题这段视频在解决什么问题这个框架解决了哪三个点看完想去哪里了解更多如果三个问题都答得上说明主线成立。2.3 素材盘点宁可多录不要漏录素材不足是宣传片后期最头疼的事。录完主体内容才发现没有“最终效果展示”的画面只能从演示视频里截屏观感会很差。我建议按下面这个清单准备素材录制顺序可以先不管素材命名一定要规范。代码文件编辑器里打开关键页面、组件、配置文件录制时保持字体 16 到 18 像素背景使用高对比主题。构建过程终端执行安装、编译、启动命令注意清理终端里的个人路径和水印。运行效果在小程序模拟器里切到不同页面展示列表、详情、状态更新。对比画面如果宣传片里提到“减少重复代码”一定要准备直观对比左边原生写法右边 Mpx 写法或者两个端并排展示。结果画面编译日志、页面正常运行、性能数据截图。如果没有准确数据就不要在片子里加数字。素材目录可以按01_代码/02_构建/03_运行/04_对比/05_结果建文件夹。这一步看着琐碎但对剪辑效率影响非常大。后期找素材最痛苦的不是没素材而是素材都混在一个文件夹里只能一帧一帧翻。3. 宣传片制作从脚本、录屏到成片输出3.1 先写 60 秒脚本再考虑剪辑决定宣传片质量的是脚本不是剪辑软件。一个 60 秒的 Mpx 宣传片时间分配可以这样拆前 5 秒抛出问题“多端代码重复维护太痛苦”10 到 25 秒说明 Mpx 定位和三个能力25 到 50 秒进入操作演示53 到 60 秒给出文档入口和行动号召。脚本必须包含两栏一栏是解说词一栏是屏幕动作。很多人只写解说词到剪辑时才发现旁白讲到组件复用屏幕还在放终端安装命令音画不匹配。我的习惯是每句旁白控制在 20 个字以内屏幕动作写清楚“显示什么页面、光标移动到哪个按钮、结果是什么”。这里有一个容易被忽略的点不要一句旁白同时交代三件事。比如“通过状态管理我们可以让列表和详情页共享数据然后编译到多个端”这句话信息量太大而且画面很难匹配。改成两句“列表和详情页共享数据状态更新自动同步”和“同一套代码编译到多个小程序端”每一句对应一个画面。3.2 录屏环境与参数录屏前先关掉消息通知退出无关应用避免录到弹窗。分辨率按 1920x1080 录制帧率 30fps 足够。追求更高帧率会让文件体积变大对宣传片剪辑没有明显收益还容易让后期渲染变慢。编辑器窗口大小要提前固定。窗口宽度不要让代码行被迫换行一般把行宽控制在 100 字符以内右侧保留足够的留白。如果你的代码字体用了默认 12 像素录出来放大后会发虚建议先改到 16 到 18 像素。终端窗口同样要注意背景色建议深色文字颜色要能看清。录屏时鼠标不要高频晃动点击操作尽量慢一点方便后期剪辑时保留关键帧。录屏工具用系统自带或常见的录屏软件都可以关键是把清晰度和帧率设置对。如果录制过程中要展示多窗口切换先排练一遍记下每一步鼠标移动的位置避免录制时来回犹豫。第一次录制不理想很正常保留素材重新录某一小节比一直录到成品更高效。3.3 配音、字幕、背景音乐怎么配如果宣传片要发布到公开平台建议用普通话配音语速控制在每分钟 220 到 260 字。没有专业麦克风时找一个安静的房间录音距离保持在 10 到 15 厘米。配音文件用 WAV 或高码率 MP3不要直接用手机录音软件默认的低码率输出。字幕是技术宣传片的刚需。即使画面里已经有代码观众也很难一边听旁白一边看代码字幕能显著降低理解成本。字幕不要放在画面最底部很多平台播放器会遮挡底部区域也不要覆盖到代码区。花字可以用于强调“多端”“复用”“一套代码”这类关键词但一屏最多一个重点多了就是干扰。背景音乐建议选节奏稳定的轻音乐音量控制在人声的 -20dB 左右。音乐不是为了突出存在感而是为了让没有旁白的空隙不干瘪。如果你拿不准就先不加音乐听一遍纯人声版本再决定哪些地方需要垫乐。导出前一定再检查一遍音量避免出现突然炸音。3.4 成片输出参数和文件管理输出格式选 MP4编码用 H.264分辨率 1920x1080帧率 30fps码率 8 到 12 Mbps。这个参数在主流视频平台上传后画质损失较小。如果只用于内部演示码率可以降到 4 Mbps。导出前检查三件事片头有没有多余黑场字幕是否全部对齐最后 3 秒的画面是否包含文档地址。封面图建议单独导出 1280x720 的 PNG不要在播放器自带预览帧里随意截一张。文件命名建议带日期和版本比如mpx_promo_20250101_v2.mp4避免发布后出现版本混乱。4. 用 Mpx 做一个配套宣传落地页4.1 为什么宣传片后面还要有落地页宣传片是单向传播观众看完后需要有一个可以交互、可以点击、可以继续学习的入口。用 Mpx 本身做一个宣传落地页可以同时达到两个目的一是给观众提供学习路径二是用真实项目证明框架可以快速做出包含视频、列表、按钮的页面。落地页不需要复杂。核心模块是首屏标题、视频播放、能力说明、上手教程入口和仓库链接。如果你把宣传片本身也放在落地页里视频资源建议先传到稳定的视频服务再用 video 组件引入本地路径只适合开发阶段测试不适合发布。4.2 页面结构和交互页面建议控制在四屏以内。第一屏放一句话标题和视频播放器第二屏放三个核心能力第三屏放“三步上手”教程入口第四屏放仓库地址和文档链接。按钮要明确一个是“查看文档”一个是“复制或下载示例”。不要让用户自己找下一步。这里要特别注意视频播放器在小程序环境下的兼容性。不同平台对视频格式和域名要求不完全一致发布前一定先用开发者工具和真机各跑一遍。报错时先检查域名是否已经在后台配置再检查 video 组件是否设置正确的封面和控制条。4.3 一个最小落地页的示意结构下面是一个示意结构重点看页面如何组织具体写法以你安装的 Mpx 版本和官方文档为准。template view classpage view classhero text classtitle{{title}}/text text classsubtitle{{subtitle}}/text video classpromo-video src{{videoSrc}} controls poster{{posterSrc}} /video button classbtn-primary bindtapgoDocs查看文档/button button classbtn-secondary bindtapgoDemo下载示例/button /view view classsection wx:for{{features}} wx:keytitle text classfeature-title{{item.title}}/text text classfeature-desc{{item.desc}}/text /view /view /templateMpx 页面写法和 Vue 比较接近数据放在可维护的结构里事件绑定用小程序模板里常见的bindtap或框架自带的事件语法。按钮的点击处理函数在页面脚本中定义比如跳转到文档页时先判断当前环境是否支持对应跳转方式再执行跳转。第一次跑通时不要追求页面视觉效果先把视频能播、按钮能跳、列表能渲染这三个基础点做出来。视觉样式可以放到后面统一调。如果你不熟悉 Mpx 的页面注册方式先在开发者工具里跑原生 Hello World再逐步替换成上面的结构。这样可以把“框架不熟”和“组件报错”分成两个问题排查起来更快。4.4 落地页验证清单页面做完后按下面的顺序验证小程序开发者工具能不能正常编译。视频能否点击播放。三个能力区块是否都能滚动。按钮跳转是否有响应。真机上页面布局是否会溢出。如果某一步没有通过先记下当前页面和日志不要同时改多个配置。常见的问题是视频组件黑屏。先确认网络能访问视频资源再确认域名配置然后检查视频格式是否被当前平台支持。不要把责任直接推给框架多数时候是资源地址或域名配置的问题。5. 按 mpx 教程复现时怎么把宣传片里的步骤变成自己的项目5.1 看宣传片时应该记什么宣传片为了节奏通常会省略安装细节。观看时不要只记画面上的命令而要把五个信息记下来项目初始化方式、开发目录结构、页面注册位置、编译命令、产物输出位置。如果你没有从宣传片里看到这些就去配套教程补齐不要在信息不全时硬猜。我更建议边看边建一个清单“这一步对应的官方文档是哪一节”。比如看到多端编译就去查官方文档里的命令行说明看到组件复用就去查组件章节。宣传片只能帮你建立轮廓真正能照着复现的 mpx 教程一定要有明确操作步骤。5.2 推荐的上手练习顺序第一个练习任务不要直接复刻整个宣传片项目而是先完成一次最小闭环初始化项目、创建页面、修改页面文字、在开发者工具里看到变化。这个闭环一旦跑通后面加组件、配状态、做多端编译都是在同一个基础上叠加。第二个任务建议做列表页和详情页跳转。小程序开发中的路由跳转、页面传参是高频操作宣传片里如果展示了页面切换这一步就能对上。第三个任务再做跨端编译把同一个项目编译到另一个端验证产物能否正常运行。每一步都要记录你用的命令和当前环境不要凭记忆操作。如果组件编译报错优先看错误信息里的文件路径和行号再搜索解决方案。5.3 常见误区和排查顺序复现项目时最容易犯的错是“照抄不验证”。宣传片里用的依赖版本不一定和你本机当前安装的一致直接复制可能触发兼容问题。解决方式不是把所有版本强行降到宣传片现场版本而是先确认 Node 环境和依赖版本再选择对应文档里的命令。现象优先检查说明启动失败终端第一个报错不要只读最后一行页面渲染异常页面路径和注册位置路径写错最常见组件不生效依赖和配置是否忘记编译或重启跨端产物异常目标端文档和真机每个端都要单独验证如果启动失败按这个顺序排查先看终端输出找到第一个报错而不是最后一行再看输入文件是否放在项目目录里然后检查依赖是否安装完整再检查权限和路径最后才怀疑框架本身。很多报错看着像框架问题实际是目录不对或版本不一致。还有一个容易被忽视的点跨端并不等于免测试。同一套代码编译到不同端后仍可能出现样式差异、组件兼容问题。宣传片里展示的是理想路径落地时你仍然要在每个目标端跑一遍真实测试。6. 发布和传播给宣传片一个可验证的结果6.1 发布标题与封面别走偏发布到社区或视频平台时标题可以明确写“Mpx 项目宣传片制作过程”或“Mpx 框架为什么值得关注”但不要用“全网最强”“秒杀一切跨端方案”这类话。技术观众对夸张标题很敏感而且一旦内容撑不起标题反而影响项目口碑。封面图建议使用代码界面与运行页面拼接叠加一句 8 到 10 个字的主标题。发布渠道也要根据观众习惯选。如果目的是拉开发者试用优先发到技术社区和开发者群如果目的是给项目做长期品牌才需要考虑视频平台。不要所有渠道共用同一个标题技术社区标题可以偏“实操复盘”视频平台标题可以偏“项目解读”。6.2 埋点宣传片也要有反馈宣传片不算完成只有数据回来才算完成。在配套落地页或播放平台设置简单的数据指标播放量、播放完成率、点击“查看文档”按钮的次数、仓库新增大纲页访问次数。如果播放量高但点击文档的比例很低说明行动入口不够清晰如果播放完成率很低问题大概率在前 10 秒没有把观众留下。埋点实现时不用一开始就做复杂事件体系。最基础的三类事件是播放开始、播放 50%、点击落地页按钮。先把这三类打点跑通再补充更深的行为分析。技术宣传片的反馈周期通常比娱乐内容长不要刚发布两天就下结论至少观察一周。6.3 持续迭代发布后过一周回看数据把评论里提到最多的疑问整理成 FAQ然后更新到配套教程里。技术宣传片不是一次性的框架版本更新后宣传片里涉及的编译命令、目录结构、入口写法可能会变。我见过不少项目宣传片两年没更新画面里的命令行和文档已经对不上最后反而影响用户信任。稳妥的做法是每半年检查一次涉及版本号、命令、截图的部分发现失效就单独录一段替换而不是重新整片拍摄。如果你只是个人学习第 5 节的复现流程比第 6 节的发布流程更重要先把最小项目跑通再回头完善宣传物料。踩过几次之后你会发现很多问题不是工具能力不够而是前置环境和输入素材没有处理干净。把这条原则带到 Mpx 宣传片项目里成片质量通常会稳定不少。