与微信小程序的差异
多数页面逻辑可以复用,但渲染模型、交互方式与可用 API 仍然是子集。下面每一条都会影响迁移结果。
对照表
| 维度 | 微信小程序 | NXMiniApp |
|---|---|---|
| 入口 | 微信内的发现页 / 搜索 / 分享 | 独立容器,先进入商店式启动器 |
| 分发 | 微信后台,自动更新 | 从服务端目录下载 .nxpkg,点击时按版本安装 |
| 渲染 | webview + 浏览器 CSS | Yoga 排版 + NanoVG 原生绘制 |
| 页面 | 多页面 + 路由 + 页面栈 | 多页面 + navigateTo / navigateBack / redirectTo / reLaunch |
| 数据更新 | setData 增量更新 | setData 合并后整树重建与重绘 |
| 交互 | 触摸、滚动、输入、手势 | 手柄焦点导航、A 激活、B 返回;鼠标左键 / 触摸点击命中节点;桌面键盘方向键 / Enter / Backspace |
| 组件 | 完整组件库 + 自定义组件 | 22 类内置标签,无自定义组件 |
| 事件 | 冒泡 / 捕获 / 完整事件对象 | tap(含冒泡)/ change / input / confirm / video 事件 |
| wx.* API | 200+ 接口 | 36 个可用 + 18 个兼容占位 |
| 样式 | 完整 CSS 能力 | Flex + 定位 + 阴影 + 文本属性子集 |
| 选择器优先级 | 有 | 无,按源码顺序覆盖 |
| 布局默认值 | view 为块级元素 | 所有盒子默认 flex-direction: column |
| 单位 | rpx 按屏幕宽换算 | 固定 640/750,与窗口宽度无关 |
| 图片 | 真实加载、支持网络图 | 加载包内本地图片;远程 URL 显示占位 |
| 文本 | 无行数上限 | 自动换行,单段建议不超过 64 行 |
| 字体 | 可加载自定义字体 | 仅内置常规字体,粗体为描边模拟 |
| 滚动 | 页面级滚动 + 手势 | scroll-view 由焦点导航自动滚动;无手势与滚轮 |
| 横竖屏 | 可配置 | 固定 16:9 横屏,1280×720 逻辑画布 |
迁移检查清单
- 补齐
app.js/app.wxss(可选),页面路径写进app.json的pages。 - 把依赖自定义组件、
template/import的结构改写为内置标签。 wx:elif/wx:else与wx:for可以直接使用;wx:key可保留但无 diff 作用。bind:tap/catchtap可以直接使用;bindtap会沿祖先冒泡,catchtap终止冒泡。- 把未列出的
wx.*调用替换为已支持接口,或加上wx.canIUse判断。 - 按 样式章节 清理伪类、动画、渐变、媒体查询与子代选择器。
- 布局默认是
column;需要横排时显式写flex-direction: row。 - 按 1280×720 重新排版;超出一屏的内容放进
scroll-view。 - 远程图片改为包内资源;
image的mode支持scaleToFill/aspectFit/aspectFill。 textarea目前是单行输入法,多行编辑需要拆成多个input。
设计建议
- 焦点即光标:所有可交互控件都参与方向键导航,布局要保证焦点顺序自然。
- 一屏一主题:内容多时用
scroll-view,并保证可聚焦元素能把视口带到目标位置。 - 用色块表达层级:背景、边框、圆角与阴影是最稳定的视觉手段。
- 尺寸按 rpx 设计:按 750 宽设计稿换算,心里记住 750rpx ≈ 640 逻辑像素。
本页是能力边界说明;具体属性与组件规则见「组件」「样式」「API」章节。