[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8913":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":16,"starSnapshotCount":16,"syncStatus":31,"lastSyncTime":32,"discoverSource":33},8913,"mpvue-weui","KuangPF\u002Fmpvue-weui","KuangPF","用 vue 写小程序，基于 mpvue 框架重写 weui。","",null,"Vue",1446,523,59,1,0,56.16,"MIT License",false,"master",true,[23,24,25,26,27],"mpvue","vue","weui","weui-wxss","wxapp","2026-06-12 04:00:41","# [mpvue-weui](https:\u002F\u002Fkuangpf.github.io\u002Fmpvue-weui\u002F#\u002F)\n\n> 用 vue 写小程序，使用 mpvue 框架重写 WeUI。\n\n![GitHub package version](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fpackage-json\u002Fv\u002FKuangPF\u002Fmpvue-weui.svg) ![Build](https:\u002F\u002Fimg.shields.io\u002Fcircleci\u002Fproject\u002Fgithub\u002FKuangPF\u002Fmpvue-weui\u002Fmaster.svg) ![GitHub rep size](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flanguages\u002Fcode-size\u002FKuangPF\u002Fmpvue-weui.svg) ![license](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002FKuangPF\u002Fmpvue-weui.svg)\n[![FOSSA Status](https:\u002F\u002Fapp.fossa.io\u002Fapi\u002Fprojects\u002Fgit%2Bgithub.com%2FKuangPF%2Fmpvue-weui.svg?type=shield)](https:\u002F\u002Fapp.fossa.io\u002Fprojects\u002Fgit%2Bgithub.com%2FKuangPF%2Fmpvue-weui?ref=badge_shield)\n\n### 相关说明\n\n该仓库是基于 `mpvue` 重写 `WeUI`，是一个 `demo` 库，没有实现组件化，目前 [MPComponent\u002Fmpvue-weui](https:\u002F\u002Fgithub.com\u002FMPComponent\u002Fmpvue-weui) 已实现组件化，支持 `npm` 安装。\n\n### 前言\n\n今天早上打开电脑，像往常一样浏览一下 `github`，看到了一个很不错的框架，没错，就是 [mpvue](https:\u002F\u002Fgithub.com\u002FMeituan-Dianping\u002Fmpvue)。它是基于 `Vue.js` 的小程序开发框架，从底层支持 `Vue.js` 语法和构建工具体系。what，小程序可以用 `vue`写了？简直有点不太敢确定，花了[5 分钟](http:\u002F\u002Fmpvue.com\u002Fmpvue\u002Fquickstart\u002F)看了一下简介，没错，真的可以用`vue`开发小程序。真的是\\*\\*限制了我的想象力，明白又该学写了，于是就开始准备利用这个框架写一点项目，感受一下他的魅力(其实是踩坑)。\n\n### 踩坑文档\n\n[记录了踩的一些坑和一些组件在 `mpvue` 框架中的用法](https:\u002F\u002Fkuangpf.github.io\u002Fmpvue-weui\u002F#\u002F)\n\n### WeUI\n\n由于是小程序，所以首先想到了实现一下小程序的一些组件，包括 button、loading、picker 等等。总的效果就像[weui](https:\u002F\u002Fweui.io\u002F)，或者说用 vue 重写[weui](https:\u002F\u002Fweui.io\u002F)。\n\n### 开发预览\n\n```bash\n1. git clone\ngit clone https:\u002F\u002Fgithub.com\u002FKuangPF\u002Fwxapp-vue.git\n\n2. 安装依赖\nnpm install\n\n3. 启动程序\nnpm run dev\n\n4. 预览\n打开微信开发者工具，新建项目，将目录指向 \u002Fdist 即可\n```\n\n### 效果\n\n\n\u003Cimg width=\"390\" alt=\"mpvue-weui-demo01\" src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F20694238\u002F66197896-e23f6380-e6cd-11e9-99bc-b120bbc81cee.png\"> \u003Cimg width=\"390\" alt=\"mpvue-weui-demo02\" src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F20694238\u002F66197895-e1a6cd00-e6cd-11e9-8c82-d3974c1cc0ce.png\">\n\n\u003Cimg width=\"390\" alt=\"mpvue-weui-demo03\" src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F20694238\u002F66197894-e10e3680-e6cd-11e9-8db4-f167abe07efc.png\"> \u003Cimg width=\"390\" alt=\"mpvue-weui-demo04\" src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F20694238\u002F66197893-e10e3680-e6cd-11e9-9391-0962a9c84389.png\">\n\n\n### 重写状态\n\n\u003Cdetails>\n\u003Csummary>点击展开重写状态\u003C\u002Fsummary>\n\n#### 表单\n\n* [x] Button\n* [x] Input\n* [x] List\n* [x] Slide-View\n* [x] Slider\n* [x] Uploader\n\n#### 基础组件\n\n* [x] Article\n* [x] Badge\n* [x] Flex\n* [x] Footer\n* [x] Gallery\n* [x] Grid\n* [x] Icons\n* [x] Loading\n* [x] Loadmore\n* [x] Panel\n* [x] Preview\n* [x] Progress\n* [x] Swiper\n\n#### 操作反馈\n\n* [x] Actionsheet\n* [x] Dialog\n* [x] Half-Screen-Dialog\n* [x] Msg\n* [x] Picker\n* [x] Toast\n\n#### 导航相关\n\n* [x] Navbar\n* [x] Navigation-Bar\n* [x] Tabbar\n\n#### 搜索相关\n\n* [x] Searchbar\n\n#### Issues 相关\n\n* [x] Request\n* [x] 页面通信（Vuex 实现）\n* [x] Rate\n\n\u003C\u002Fdetails>\n\n### 版本日志\n[releases](https:\u002F\u002Fgithub.com\u002FKuangPF\u002Fmpvue-weui\u002Freleases)\n\n### Contributors\n\nThank you to all the people who already contributed to mpvue-weui. \u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fmpvue-weui\u002Fcontributors.svg?width=890&button=false\" \u002F>\n\n### 结束语\n\n花了大概一周多的时间来完成了这个项目，过程中收获还是很大的，给我最大的感触就是现在技术发展的很快，如果不学习就真的要落后了。美团开源的[mpvue](https:\u002F\u002Fgithub.com\u002FMeituan-Dianping\u002Fmpvue)是一个非常不错的框架，而且开发者也正在快速的迭代，开发新的功能，所以它的前景是非常值得期待。另外就是非常感谢关注这个仓库的人，谢谢你们的支持，后续我也会继续维护这个仓库，当`mpvue`有了一些新的特性或者一些新的语法的时候也会持续更新。如果各位大佬发现了什么问题欢迎`PR` 或者 `Issues`。\n\n文档是用 [docsify](https:\u002F\u002Fgithub.com\u002FQingWei-Li\u002Fdocsify\u002F)构建，所有文档文件在 `\u002Fdocs` 目录下面，由于里面图片比较多而且还有`gif`，可能在`git clone`的时候会有一点点慢。\n\n### License\n\n[![FOSSA Status](https:\u002F\u002Fapp.fossa.io\u002Fapi\u002Fprojects\u002Fgit%2Bgithub.com%2FKuangPF%2Fmpvue-weui.svg?type=large)](https:\u002F\u002Fapp.fossa.io\u002Fprojects\u002Fgit%2Bgithub.com%2FKuangPF%2Fmpvue-weui?ref=badge_large)\n\n### 持续维护...\n","mpvue-weui 是一个基于 mpvue 框架用 Vue 重写 WeUI 的小程序 UI 库。该项目提供了包括按钮、输入框、列表、滑块等在内的多种常用组件，支持微信小程序的开发需求，并且保持了 WeUI 的设计风格。它适用于需要快速搭建具有统一视觉风格的小程序应用的场景，特别适合熟悉 Vue 开发者想要在小程序中复用其前端技能的情况。尽管此项目本身为 demo 性质，并未实现组件化，但已有一个分支实现了组件化并支持通过 npm 安装使用，方便开发者集成到自己的项目中。",2,"2026-06-11 03:20:16","top_language"]