企业官网建设流程全解析

在跨端小程序开发的“mpx 教程”里，最容易让新手卡住的往往不是组件通信或状态管理，而是从原型到真机之间的一层单位换算。设计稿标着 20px，代码里也写 20px，到了不同尺寸的手机上，按钮有时偏大有时偏小；悬浮窗口更是如此，位置和尺寸只要算错一个单位，真机上的表现就和原型完全两样。这篇文章围绕 Mpx 跨端小程序框架，把 px、rpx、pt 三类单位的关系、悬浮窗的典型尺寸、可拖拽实现和常见排查思路完整过一遍，最后会给你一份可以直接复用的发布前检查清单。读完你会形成一套适合自己的单位换算表，以及一个能跑在微信开发者工具里的悬浮窗代码模板。

标题里的“双金”如果拆成工程语言来看，就是两个指标：原型产出效率高，真机运行稳定性好。Mpx 在这两点上的优势，恰好取决于你是否把“设计稿里的 px 到小程序里的 rpx/px”这条链路处理稳。这个环节一旦稳了，后面做悬浮窗、弹层、吸底按钮都会顺畅很多。

1. Mpx 与 px：先把原型和真机之间的“单位差”补齐

1.1 Mpx 是什么，为什么原型验证阶段值得用它

Mpx 是一套使用 Vue 语法的小程序跨端框架。它可以同时产出微信、支付宝等小程序平台代码，并支持通过构建配置扩展到更多端。在原型验证阶段，Mpx 的写法接近 Vue，写起来比原生小程序快；在正式发布阶段，又能通过编译配置尽量复用业务代码。这里不把它说成“最好”的方案，但如果你已经熟悉 Vue，又想保留小程序原生的性能习惯，Mpx 是一个值得评估的选择。

Mpx 的几个关键特征：

• 页面使用.mpx单文件组织，模板、脚本、样式放在同一个文件里，和 Vue 的单文件组件类似。
• 提供createPage、createComponent等 API，组件化能力和原生小程序兼容。
• 一套业务代码可以编译出多端产物，但不同平台的小程序仍有各自的边界，需要单独验证。

先理解这一点很重要：Mpx 不是把小程序变成 H5，而是尽量让你用接近 Web 的开发方式去写原生小程序。所以，凡是小程序平台自己约定好的单位规则，最终还是会由小程序运行时来解释。

1.2 为什么原型设计稿里的 px 不能直接照搬

设计稿里的 px 是设计工具里的像素标注，通常基于一个固定宽度的画板，比如 375 或 750。小程序里的 px 是 CSS 逻辑像素，在不同设备上，这个“1px”对应的物理像素数是不一样的。

举个例子：

• 设计稿宽度 375px，一个按钮标注 20px。
• 在 iPhone SE 这类逻辑宽度 375px 的设备上写width: 20px，视觉比例正好。
• 在逻辑宽度 390px 或 414px 的设备上写width: 20px，按钮占屏比例会偏小。

如果希望按钮在不同宽度的屏幕上保持“占屏比例一致”，就需要使用 rpx。小程序的 rpx 把屏幕宽度定义为 750rpx，所以：

rpx = 设计稿标注值 × 750 / 设计稿宽度

设计稿宽度是 375 时，20px标注对应40rpx。这样设计稿里 20px 的元素，在 375 宽手机上等于 20px，在 390 宽手机上会自动放大到约 20.8px。虽然视觉上“绝对像素”变了，但相对屏幕宽度的比例没变，这才是原型稿希望达到的适配效果。

1.3 px、rpx、pt 的换算关系表

在 Mpx 项目里，你至少会遇到三类单位：

这里需要特别注意：pt 和物理像素不是一回事。iPhone 的逻辑宽度是 375pt，物理像素可能达到 750 或 1125。设计稿里的 20pt 对应到 CSS 逻辑尺寸可以理解为 20px，但导出位图时需要按 @2x 或 @3x 生成 40px 或 60px 的物理图片。

1.4 Mpx 里单位处理的默认边界

在 Mpx 项目中，样式中的单位最终由小程序运行时解释。rpx 在微信小程序端原生生效，但 Mpx 本身不会自动把每个 px 变成 rpx。项目里需要达成一个约定：

• 布局尺寸、间距、字体大小优先使用 rpx。
• 固定定位的悬浮按钮、边框宽度、圆角、阴影、1px 分割线这类不随屏幕比例变化的样式，优先使用 px。
• 如果编译目标包含 H5，rpx 在小程序端之外不一定自动生效，需要单独检查构建配置。

这个约定的核心是“哪些元素应该等比缩放，哪些元素应该保持稳定触控尺寸”。悬浮窗就是典型场景：可拖动区域和触控按钮需要稳定的操作尺寸，但悬浮窗离屏幕边界的距离又希望在多端之间有统一表现，所以哪部分用 px、哪部分用 rpx，必须提前定好。

2. 从零搭一个 Mpx 项目，先把环境跑通

2.1 环境依赖和版本要求

开始写代码之前，先确认本地环境。以下配置在常见 Mpx 项目里可用：

不同 Mpx CLI 版本存在命令差异。如果下面命令在你的环境里不可用，先查一次mpx --help，以本机安装版本的提示为准。

2.2 创建项目并查看目录结构

使用 Mpx CLI 创建项目：

npm i -g @mpxjs/cli mpx create mpx-px-demo cd mpx-px-demo npm install

创建出来的项目结构大致如下：

mpx-px-demo/ ├── src/ │ ├── app.mpx │ └── pages/ │ └── index/ │ └── index.mpx ├── mpx.config.js ├── package.json └── project.config.json

其中src/app.mpx是应用入口，src/pages/index/index.mpx是一个页面。.mpx文件把模板、逻辑和样式放在一起，和 Vue 单文件组件非常接近。实际目录结构以脚手架生成为准，重点是把src/pages/index/index.mpx找到，后续所有演示代码都写在这个文件里。

2.3 改写首页，加入一个悬浮窗占位

先跑一个最小页面，确认 Mpx 项目本身没问题。把src/pages/index/index.mpx改成下面这样：

<template> <view class="page"> <view class="float-box">悬浮</view> </view> </template> <script> import { createPage } from '@mpxjs/core' createPage({ data: { title: 'Mpx px 演示' } }) </script> <style> .page { height: 100vh; background: #f5f6fa; } .float-box { position: fixed; left: 30px; top: 260px; width: 80px; height: 80px; background: #1677ff; color: #ffffff; border-radius: 40px; line-height: 80px; text-align: center; box-shadow: 0 8px 24px rgba(22, 119, 255, 0.3); z-index: 999; } </style>

这段代码解决的问题是：验证.mpx页面能否正常渲染、position: fixed是否生效、px单位在小程序里是否能直接使用。

2.4 如何确认项目已经可运行

查看package.json里的 scripts，确认本地启动命令。常见命令有两种：

npm run serve

或

npm run dev:mp-weixin

运行后，用微信开发者工具导入项目根目录，AppID 可以选择测试号。导入成功后，模拟器里应该能看到一个蓝色的圆形悬浮按钮。如果页面正常显示，说明 Mpx 项目已经跑通。

还有一个小检查点：把模拟器切换到 iPhone SE 和 iPhone 15 Pro，观察悬浮按钮的位置差异。此时按钮写法用的全是 px，所以在不同宽度设备上，位置不会自动按比例变化。这个现象正是后面要重点处理的。

3. 实现一个带 px 换算的悬浮窗

3.1 悬浮窗需求拆解

把一个悬浮窗做好，至少需要处理四件事：

1. 初始位置：打开页面后悬浮窗出现在哪里。
2. 拖拽能力：用户按住后可以移动，松手后停在当前位置。
3. 边界限制：不能拖出屏幕，至少不能拖到完全不可见。
4. 尺寸适配：宽高在真机上是否容易点按，内容型悬浮窗是否遮挡主要操作区。

在很多业务里，悬浮窗还会加“展开/收起”“关闭”“停留记忆”等能力。这里先实现一个最小闭环：一个 80px 的圆形按钮，可以拖动，且不会超过屏幕边界。

3.2 模板结构：用 data 驱动坐标

改写成可拖动悬浮窗，模板部分需要绑定坐标，并监听触摸事件：

<template> <view class="page"> <view class="float-box" :style="boxStyle" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" > <text class="float-text">拖</text> </view> </view> </template>

这里的boxStyle会由 data 动态生成。之所以用内联样式更新位置，是因为悬浮窗的位置经常变化，不适合写在静态样式表里。

3.3 样式：什么时候用 rpx，什么时候用 px

样式部分继续使用 px 控制固定尺寸：

.float-box { position: fixed; width: 80px; height: 80px; background: #1677ff; color: #ffffff; border-radius: 40px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(22, 119, 255, 0.3); z-index: 999; } .float-text { font-size: 14px; line-height: 1; }

这里的width、height、border-radius、font-size都使用 px。原因很简单：悬浮按钮是操作控件，它的可点击面积不能随屏幕宽度无限缩放，太小时容易点不中，太大时又遮挡页面内容。对操作类悬浮物，优先保证稳定的触控尺寸。

页面间距、列表卡片宽度这类“随屏宽变化”的元素，才适合用 rpx。比如页面两侧留白可以写padding: 0 32rpx，在 375 宽手机上等于 16px，在 390 宽手机等于约 16.64px，视觉比例一致。

3.4 触摸事件：拖动、边界限制和尺寸计算

下面是完整的页面对应逻辑：

<script> import { createPage } from '@mpxjs/core' createPage({ data: { left: 30, top: 260, startX: 0, startY: 0, boxStyle: 'left: 30px; top: 260px;' }, methods: { onTouchStart (e) { const touch = e.touches[0] // 记录手指在悬浮窗内部的偏移量 this.startX = touch.clientX - this.left this.startY = touch.clientY - this.top }, onTouchMove (e) { const width = 80 const height = 80 // 兼容新旧版本基础库 const win = wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync() const touch = e.touches[0] let left = touch.clientX - this.startX let top = touch.clientY - this.startY // 限制边界，避免悬浮窗被拖出屏幕 left = Math.min(Math.max(left, 0), win.windowWidth - width) top = Math.min(Math.max(top, 0), win.windowHeight - height) this.left = left this.top = top this.boxStyle = 'left: ' + left + 'px; top: ' + top + 'px;' }, onTouchEnd () { // 这里可以记录最终坐标，后续用于本地缓存 } } }) </script>

关键点有三个：

• startX和startY必须记录手指在按钮内部的位置，否则拖动时按钮会“跳到手指位置”，产生明显的偏移感。
• 边界限制使用Math.min和Math.max，保证left不小于 0，且不超过屏幕宽度减去按钮宽度。
• wx.getWindowInfo是较新的 API，如果基础库版本较低，需要回退到wx.getSystemInfoSync。

这段代码没有把 rpx 混进坐标计算，因为触摸事件给的是clientX和clientY，单位是 CSS px。如果强行把left和top存成 rpx，计算边界时还得先转回 px，反而容易出错。

3.5 悬浮窗口到底设多少 px

“悬浮窗口一般设多少px”这个问题，不能只看视觉效果，还要考虑手指触控和系统安全区。常见参考值如下：