https://github.com/banggx/miniprogram-web

web模拟实现微信小程序技术架构
https://github.com/banggx/miniprogram-web

Last synced: 7 days ago
JSON representation

web模拟实现微信小程序技术架构

• Host: GitHub
• URL: https://github.com/banggx/miniprogram-web
• Owner: banggx
• License: apache-2.0
• Created: 2024-06-18T16:05:40.000Z (5 months ago)
• Default Branch: master
• Last Pushed: 2024-06-18T16:11:46.000Z (5 months ago)
• Last Synced: 2024-06-18T20:36:51.084Z (5 months ago)
• Language: JavaScript
• Size: 4.78 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 微信小程序架构实现

使用web技术模式实现微信小程序双线程架构:

- 使用浏览器线程模拟 Native 

- 使用 iframe 模拟实现 ui 渲染线程

- 使用 web worker 模拟实现逻辑线程

Native 层:

- 负责小程序生命周期管理

- 负责UI线程和逻辑线程的通信

- 一个小程序共用一个逻辑线程 jscore

- 一个UI线程对应一个 webview

- webview 负责渲染页面, 并且通过 jsbridge 与逻辑线程通信

开发小程序完成后，通过compile 编译器对项目进行编译，生成两份代码:

- logic.js 逻辑线程代码

- view.js UI线程代码

逻辑线程代码会被放到逻辑线程中执行，UI线程代码会被放到 UI 线程中执行。

components 包中实现了常见的一些小程序组件；

### 项目启动

- 1. 启动native

```

npm run start

```

- 2. 启动逻辑线程

```

cd packages/logic

npm run start

```

- 3. 启动UI线程

```

cd packages/ui

npm run start

```

- 4. 启动小程序组件包

```

cd packages/components

npm run start

```

### 小程序开发

在 miniapp 目录下存放了两个小程序项目

开发完成小程序之后，需要通过小程序编译指令进行项目编译:

```

mini-compile build [outputDir]

```

> 在运行这个命令前，需要进入到 packages/compile 包中，将编译包link到本地

在 src/service 中，mock 了三个固定的小程序信息，通过名称作为小程序appId进行索引