利用 Wepy + ColorUI 框架快速开发小程序

阿里云-轻量应用服务器

本文主要说明从技术选型上选用 wepy + colorUI 快速开发可维护的微信小程序。

Wepy: https://github.com/Tencent/wepy,这是腾讯开源的框架。

ColorUI:https://github.com/weilanwl/ColorUI。

如何快速开发小程序?微信小程序的官方也有很多例子,但是如果从头开始一行行代码敲出来也是不现实的。

同开发H5页面一样,还是需要框架来减少相应的开发量。主要的原因是微信小程序不支持引入 npm 包,以及一些 ES6+ 高级的语法也不支持。

01 技术选型

笔者对比了微信小程序的两个框架 wepy 和 mpvue, 这两个框架都是写法上都是类似于Vue语法,整体能力差不多,区别在于 wepy 的开发者去了微信小程序所在部门,而 mpvue 是美团的开发团队开发出来的。两个框架也都在迭代更新。

笔者选用了 wepy,主要还是是官方推荐的框架。毕竟作为主要框架,“春江水暖鸭先知”。

那么UI库用哪一套呢?参考这边文章《6个最优秀的微信小程序UI组件库》

WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验。 但是出来的时间也太久了。看了下也很久没有更新了。小程序出来还不到3年,这个货已经两三年没有更新了。深知这类项目是不可能有人力持续投入的,以后也不可能有人维护,不考虑。

ZanUI和有赞UI风格太像,不考虑。

MinUI 官网文档有些图片显示不了,说明没有用心做不考虑。

iView、WuxUI、ColorUI都是一年内有更新,并且 stars 数量都是过了1000+。 其中最好看的样式库还是 ColorUI, https://github.com/weilanwl/ColorUI。体验了下 ColorUI 提供的 demo, 只能用精致来表达。唯一的缺点就是基本没有文档,因为是一个样式框架,demo 就是文档。

并且分别有 ColorUI 的作者参与的微信群和QQ群交流群。

ColorUI Demo

02 实践

下面我们就简单做一个小程序例子,为后续的所有小程序打个样。这里可以做个脚手架来批量生成 Wepy + ColorUI 的项目。

如何开发微信小程序,可以参考《如何从零开始开发微信小程序》

如何利用 Wepy 开发小程序,可以参考《Wepy 开发文档》

开始 ColorUI 的研究,从官网 https://www.color-ui.com/ 下载代码库,可以看到有 demo 和 template 两个文件夹,其实是作者给出的两个项目。一个是所有组件的集合,另一个是一个空的框架。

只要在 wepy 中引入 ColorUI 的两个样式文件,icon.wxss 和 colorui.wxss 就可以用了。

<style lang=”less”>

@import “./components/icon.wxss”;

@import “./components/colorui.wxss”;

</style>

最后整合好的项目地址,用微信开发者工具就可以跑起来了。

https://github.com/regexp-lin/WepyColorUI.git