普通 Web 项目如何编译为小程序?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

请不要在回技术问题时复制粘贴 AI 生成的内容

这是一个创建于 216 天前的主题，其中的信息可能已经有所发展或是发生改变。

询问几个小程序的基本问题:

1.
小程序的界面, 其实现机制到底是什么?
例如一个 wxml 页面, 里面含有 button 等各种控件, 在手机上的显示:
是都转换为原生控件, 即类似 App 开发中的 React Native 的原理?
还是自绘控件, 即类似 App 开发中的 Flutter 的原理?
还是一个全屏的 Webbiew (或者上半个屏幕是 Webview, 底部导航栏为原生控件), 即类似 App 开发中的 H5 套壳的原理?

我自己测试, 在安卓手机上, 打开"布局边界显示", 试了一些常用的小程序, 其界面几乎就是一个全屏的控件, 按钮等不是单独的控件.

2.
在问题 1 的基础上, 其它大厂的小程序其界面的背后机制, 跟微信小程序一样吗?

3.
如果有一个已经存在的 Web 项目, 例如可能为 React/Vue, 也可能为 JQuery, 有可能使用其它技术, 甚至可能是纯手写的 HTML/JS/CSS, 已经编译产出了 minify 的 html+js+css, 这些编译产出的 html+js+css 能否转换为小程序的 wxml+wxss+js (先不考虑 API 调用, 仅界面展示)?

4.
在问题 3 的基础上, 如果转换的效果不好, 能否干脆不进行转换, 而是把现有的 html+js+css 包裹在一个 webview 里? 即只需额外写一个简单的 wxml, 这个 wxml 中只有一个 webview 控件, 在这个控件中加载现有的 html+js+css?

5.
在问题 4 的基础上, 如此方式, 性能是否有为影响, 于是又回到问题 1, 如果一个 wxml 的页面本身就是一个全屏的 webview, 那在 wxml 中再套一个 webview, 性能应该一样. 如果 wxml 中的 button 等控件被转换为了原生控件, 那么性能肯定就不一样了.

小程序

界面机制

Web 转换

9 条回复 2025-04-08 22:09:49 +08:00

einsdisp

216 天前

6. 在问题 4 的基础上, webview 加载的 html+js+css, 能否调用微信的各种 API, 例如拍照/登录/定位等...?

einsdisp

216 天前

7. 在问题 4 的基础上, 通过 webview 加载我自己服务器上的 html+js+css, 这种方式能否通过审核

AoEiuV020JP

216 天前

问题太多了，先问问 AI ，再看看官方文档，还有问题让 AI 教你怎么提问，

lycoo

216 天前

微信小程序运行在多种平台上：iOS/iPadOS 微信客户端、Android 微信客户端、Windows PC 微信客户端、Mac 微信客户端、小程序硬件框架和用于调试的微信开发者工具等。

不同运行环境下，脚本执行环境以及用于组件渲染的环境是不同的，性能表现也存在差异：

在 iOS 、iPadOS 和 Mac OS 上，小程序逻辑层的 Javascript 代码运行在 JavascriptCore 中，视图层是由 WKWebView 来渲染的，环境有 iOS 14 、iPad OS 14 、Mac OS 11.4 等；
在 Android 上，小程序逻辑层的 Javascript 代码运行在 V8 中，视图层是由基于 Mobile Chromium 内核的微信自研 XWeb 引擎来渲染的；
在 Windows 上，小程序逻辑层 Javascript 和视图层都是用 Chromium 内核；
在开发工具上，小程序逻辑层的 Javascript 代码是运行在 NW.js 中，视图层是由 Chromium Webview 来渲染的。
JavascriptCore 无法开启 JIT 编译 (Just-In-Time Compiler)，同等条件下的运行性能要明显低于其他平台
来源： https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/env.html

DreamingCTW

216 天前

webview 限制太多了，不建议这样实现。

td width="10" valign="top">

alleluya

216 天前

@lycoo #4 我一直以为安卓也是用 webview 实现只不过是用 X5 这种原来整个是一套新的啊

zjsxwc

216 天前

套个 uniapp ？

musi

216 天前

@alleluya #6 不是都一样的双线程架构么

IOS: 逻辑线程使用 Safari 采用的 JavascriptCore ，渲染线程使用 WKWebView
Android: 逻辑线程使用 Chrome 的 V8 ，视图层用腾讯自己的 XWeb

本质是 IOS 系统不允许 safari 之外的浏览器

hefish

216 天前

我都知道，但我就是不说。。。咳咳