# sh-cross-app **Repository Path**: 520wody/sh-cross-app ## Basic Information - **Project Name**: sh-cross-app - **Description**: 基于微信小程序的基础框架，通过模版转换和hook实现的跨端开发 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-04-18 - **Last Updated**: 2026-04-18 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Small Web - 跨平台小程序+Web同构项目 ## 项目概述 这是一个创新的跨平台开发方案，实现了**微信小程序与Web端的代码复用**。通过将业务逻辑抽离到独立文件，配合构建时转换，实现"一次编写，多端运行"。 ## 架构设计 ``` ┌─────────────────────────────────────────────────────────────┐ │ 业务逻辑层 (*_logic.js) │ │ 平台无关的纯JavaScript业务代码 │ └─────────────────────────────────────────────────────────────┘ │ ┌───────────────┴───────────────┐ ▼ ▼ ┌─────────────────────────┐ ┌─────────────────────────┐ │ 微信小程序端 │ │ Web端 │ │ ┌─────────────────┐ │ │ ┌─────────────────┐ │ │ │ WXML 模板 │ │ │ │ Vue 模板 │ │ │ └─────────────────┘ │ │ │ (自动转换生成) │ │ │ ┌─────────────────┐ │ │ └─────────────────┘ │ │ │ WXSS 样式 │ │ │ ┌─────────────────┐ │ │ └─────────────────┘ │ │ │ CSS 样式 │ │ │ ┌─────────────────┐ │ │ │ (rpx→vw转换) │ │ │ │ Vant Weapp组件 │ │ │ └─────────────────┘ │ │ └─────────────────┘ │ │ ┌─────────────────┐ │ │ ┌─────────────────┐ │ │ │ Vant UI组件 │ │ │ │ 微信原生API │ │ │ └─────────────────┘ │ │ └─────────────────┘ │ │ ┌─────────────────┐ │ └─────────────────────────┘ │ │ wx-mock API │ │ │ └─────────────────┘ │ └─────────────────────────┘ ``` ## 目录结构 ``` small_web/ ├── web/ # Web端项目 │ ├── build/ # 构建脚本 │ │ ├── build-pages.js # 页面编译脚本 │ │ └── watch-pages.js # 文件监听脚本 │ ├── src/ │ │ ├── framework/ │ │ │ └── vueAdapter.js # 小程序→Vue适配器 │ │ ├── pages/ # 自动生成的Vue页面 │ │ │ ├── index.vue │ │ │ └── index2.vue │ │ ├── wx-mock/ # 微信API模拟层 │ │ │ ├── index.js │ │ │ ├── navigation.js # 导航API │ │ │ ├── request.js # 网络请求API │ │ │ ├── router.js # 路由管理 │ │ │ ├── storage.js # 本地存储API │ │ │ ├── system.js # 系统信息API │ │ │ └── ui.js # UI交互API │ │ ├── App.vue │ │ ├── main.js │ │ └── router.js │ ├── index.html │ ├── package.json │ └── vite.config.js │ ├── wx_mini/ # 微信小程序端 │ ├── pages/ # 小程序页面 │ │ ├── index/ │ │ │ ├── index.js # 页面入口 │ │ │ ├── index.json │ │ │ ├── index.wxml # 模板 │ │ │ ├── index.wxss # 样式 │ │ │ └── index_logic.js # 业务逻辑(共享) │ │ └── index2/ │ │ └── ... │ ├── miniprogram_npm/ # 小程序npm包 │ │ └── @vant/weapp/ # Vant Weapp组件库 │ ├── app.js │ ├── app.json │ ├── app.wxss │ └── package.json │ └── .vscode/ └── settings.json ``` ## 技术栈 ### Web端 - **Vue 3** - 渐进式JavaScript框架 - **Vite 5** - 下一代前端构建工具 - **Vue Router 4** - 官方路由管理器 - **Vant 4** - 移动端Vue组件库 ### 小程序端 - **微信小程序原生框架** - **Vant Weapp** - 小程序UI组件库 ### 构建工具 - **unplugin-vue-components** - Vue组件自动导入 - **chokidar** - 文件监听 - **concurrently** - 并行任务执行 ## 快速开始 ### 环境要求 - Node.js >= 16.0.0 - npm >= 7.0.0 ### 安装依赖 ```bash # 安装Web端依赖 cd web npm install # 安装小程序端依赖 cd ../wx_mini npm install ``` ### 开发模式 ```bash # 启动Web开发服务器 cd web npm run dev ``` 访问 http://localhost:5173 ### 小程序开发 使用微信开发者工具打开 `wx_mini` 目录 ## 核心设计思想 ### 1. 业务逻辑分离 将小程序的业务逻辑从Page()配置中抽离到独立的`*_logic.js`文件： ```javascript // wx_mini/pages/index/index_logic.js export const indexLogic = { data: { title: '首页', count: 0 }, onLoad(options) { // 业务逻辑 }, increment() { this.setData({ count: this.data.count + 1 }); } }; ``` ### 2. 构建时转换 `build-pages.js` 自动将小程序代码转换为Vue组件： - **WXML → Vue Template**: 标签转换、指令映射、事件绑定 - **WXSS → CSS**: rpx单位转换为vw - **Logic → Vue Options**: 通过`vueAdapter.js`适配 ### 3. API模拟层 `wx-mock` 模拟微信API，使业务代码无需修改即可在Web运行： ```javascript // 小程序中 wx.navigateTo({ url: '/pages/index2/index2' }); // Web中自动转换为 router.push('/pages/index2/index2'); ``` #### 2. 路由配置硬编码 **位置**: [web/src/router.js](web/src/router.js) 路由需要手动维护，与小程序`app.json`不同步。 **建议**: 从`app.json`自动生成路由配置。 ### 🟡 中等问题 #### 3. 调试代码残留 多处使用 `console.error` 作为调试输出，会影响生产环境： - [vueAdapter.js:5](web/src/framework/vueAdapter.js#L5) - [vueAdapter.js:32](web/src/framework/vueAdapter.js#L32) - [navigation.js:8](web/src/wx-mock/navigation.js#L8) - [navigation.js:28](web/src/wx-mock/navigation.js#L28) - [index_logic.js:36](wx_mini/pages/index/index_logic.js#L36) **建议**: 使用统一的日志工具，生产环境自动禁用。 #### 4. `$api.request` 实现不完整 **位置**: [vueAdapter.js:35-36](web/src/framework/vueAdapter.js#L35-L36) ```javascript this.$api = { request: (options) => fetch(options.url).then(r => r.json()) }; ``` 缺少： - 请求方法支持 - 请求头处理 - 错误处理 - 超时控制 **建议**: 复用 `wx-mock/request.js` 的实现。 #### 5. WXML转换边界情况 `build-pages.js` 的转换逻辑可能遗漏： - `wx:for-item` 自定义循环变量名 - `wx:for-index` 自定义索引名 - 模板引用 (`