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

einsdisp · 2025-4-8 14:24:19 · 930 次点击
询问几个小程序的基本问题:

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 等控件被转换为了原生控件, 那么性能肯定就不一样了.
举报· 930 次点击
登录 注册 站外分享
8 条回复  
einsdisp 楼主 小成 2025-4-8 14:35:58
6. 在问题 4 的基础上, webview 加 载的 html+js+css, 能否调用微信的各种 API, 例如拍照/登录/定位等...?
einsdisp 楼主 小成 2025-4-8 14:38:26
7. 在问题 4 的基础上, 通过 webview 加载我自己服务器上的 html+js+css, 这种方式能否通过审核
AoEiuV020JP 小成 2025-4-8 14:47:32
问题太多了, 先问问 AI ,再看看官方文档, 还有问题让 AI 教你怎么提问,
lycoo 初学 2025-4-8 14:51:31
微信小程序运行在多种平台上: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 小成 2025-4-8 14:51:48
webview 限制太多了,不建议这样实现。
alleluya 小成 2025-4-8 14:57:03
@lycoo #4 我一直以为安卓也是用 webview 实现 只不过是用 X5 这种 原来整个是一套新的啊
zjsxwc 小成 2025-4-8 14:59:51
套个 uniapp ?
musi 初学 2025-4-8 15:28:01
@alleluya #6 不是都一样的双线程架构么 IOS: 逻辑线程使用 Safari 采用的 JavaScriptCore ,渲染线程使用 WKWebView Android: 逻辑线程使用 Chrome 的 V8 ,视图层用腾讯自己的 XWeb 本质是 IOS 系统不允许 safari 之外的浏览器
返回顶部