mpvue-weui

用 vue 写小程序,使用 mpvue 框架重写 WeUI。

GitHub package versionGithub release versionnodeGitHub commit activity the past week, 4 weeks, yearGitHub last commitGitHub rep size

相关说明

该仓库是基于 mpvue 重写 WeUI,是一个 demo 库,没有实现组件化,目前 MPComponent/mpvue-weui 已实现组件化,支持 npm 安装。

前言

今天早上打开电脑,像往常一样浏览一下 github,看到了一个很不错的框架,没错,就是 mpvue。它是基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系。what,小程序可以用 vue写了?简直有点不太敢确定,花了5分钟看了一下简介,没错,真的可以用vue开发小程序。真的是**限制了我的想象力,明白又该学写了,于是就开始准备利用这个框架写一点项目,感受一下他的魅力(其实是踩坑)。

踩坑文档

记录了踩的一些坑和一些组件在 mpvue 框架中的用法

WeUI

由于是小程序,所以首先想到了实现一下小程序的一些组件,包括 button、loading、picker 等等。总的效果就像weui,或者说用 vue 重写weui

开发预览

  1. 1. git clone
  2. git clone https://github.com/KuangPF/wxapp-vue.git
  3. 2.安装依赖
  4. npm install (cnpm install)
  5. 3.启动程序
  6. npm run dev
  7. 4.预览
  8. 打开微信开发者工具,新建项目,将目录指向/dist 即可

效果

mpvue-weui-demo01
mpvue-weui-demo02
mpvue-weui-demo03
mpvue-weui-demo01

重写状态


点击展开重写状态

#### 表单
- [x] Button
- [x] Input
- [x] List
- [x] Slider
- [x] Uploader

#### 基础组件
- [x] Article
- [x] Badge
- [x] Flex
- [x] Footer
- [x] Gallery
- [x] Grid
- [x] Icons
- [x] Loadmore
- [x] Panel
- [x] Preview
- [x] Progress
- [x] Swiper

#### 操作反馈
- [x] Actionsheet
- [x] Dialog
- [x] Msg
- [x] Picker
- [x] Toast

#### 导航相关
- [x] Navbar
- [x] Tabbar

#### 搜索相关
- [x] Searchbar

#### Issues 相关
- [x] Request
- [x] 页面通信(Vuex 实现)
- [x] Rate

版本日志

v1.0.5

  • 基于 mpvue 1.0.12
  • 增加星级评分

v1.0.4

  • 基于 mpvue 1.0.12
  • 增加页面通讯案例(vuex 实现)

v1.0.3

  • 基于 mpvue 1.0.9
  • 增加网络请求实例

v1.0.2

  • 基于 mpvue 1.0.7
  • uploader组件增加删除功能

v1.0.1

  • 基于 mpvue 1.0.7
  • 增加swiper组件

v1.0.0

  • 基于 mpvue 1.0.5
  • 完成 WeUI 重写和文档编写

结束语

花了大概一周多的时间来完成了这个项目,过程中收获还是很大的,给我最大的感触就是现在技术发展的很快,如果不学习就真的要落后了。美团开源的mpvue是一个非常不错的框架,而且开发者也正在快速的迭代,开发新的功能,所以它的前景是非常值得期待。另外就是非常感谢关注这个仓库的人,谢谢你们的支持,后续我也会继续维护这个仓库,当mpvue有了一些新的特性或者一些新的语法的时候也会持续更新。如果各位大佬发现了什么问题欢迎PR 或者 Issues

文档是用 docsify构建,所有文档文件在 /docs 目录下面,由于里面图片比较多而且还有gif,可能在git clone的时候会有一点点慢。

持续维护…