Skip to content

用 vue 写小程序,基于 mpvue 框架重写 weui。

License

Notifications You must be signed in to change notification settings

KuangPF/mpvue-weui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

3b1dc65 · Oct 5, 2019
Nov 5, 2018
Oct 4, 2019
Jul 23, 2018
Oct 5, 2019
Oct 4, 2019
Oct 4, 2019
Mar 9, 2018
Mar 9, 2018
Mar 9, 2018
Jul 23, 2018
Oct 4, 2019
Mar 9, 2018
Nov 5, 2018
Oct 4, 2019
Mar 9, 2018
Oct 5, 2019
Oct 5, 2019
Oct 4, 2019

Repository files navigation

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

GitHub package version Build GitHub rep size license FOSSA Status

相关说明

该仓库是基于 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. git clone
git clone https://github.com/KuangPF/wxapp-vue.git

2. 安装依赖
npm install

3. 启动程序
npm run dev

4. 预览
打开微信开发者工具,新建项目,将目录指向 /dist 即可

效果

mpvue-weui-demo01 mpvue-weui-demo02

mpvue-weui-demo03 mpvue-weui-demo04

重写状态

点击展开重写状态

表单

  • Button
  • Input
  • List
  • Slide-View
  • Slider
  • Uploader

基础组件

  • Article
  • Badge
  • Flex
  • Footer
  • Gallery
  • Grid
  • Icons
  • Loading
  • Loadmore
  • Panel
  • Preview
  • Progress
  • Swiper

操作反馈

  • Actionsheet
  • Dialog
  • Half-Screen-Dialog
  • Msg
  • Picker
  • Toast

导航相关

  • Navbar
  • Navigation-Bar
  • Tabbar

搜索相关

  • Searchbar

Issues 相关

  • Request
  • 页面通信(Vuex 实现)
  • Rate

版本日志

releases

Contributors

Thank you to all the people who already contributed to mpvue-weui.

结束语

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

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

License

FOSSA Status

持续维护...