文章目录
推荐刚需(一)UI 框架1.iView Weapp2.WeUI3.Vant Weapp4.ColorUI5.Thor UI (二).基础框架1.WePY2.Taro3.UniApp4.Chameleon 框架如何使用小编UI设计模板推荐刚需
一些个人开发者可以利用流量主赚钱的小程序,工具类的小程序非常适合个人开发,用云开发模式开发成本很低,能够快速上线,唯一的缺点是个人无法接入支付,变现渠道受限,目前只能通过流量主变现。
推荐一些的优秀小程序源码,希望你能从中得到一些启发!
比如小编的小程序也是套用框架开发的。
一般来说,我们在社区中看到的框架,主要分为两种:
UI 框架:主要提供的是不同样式的组件,可以方便开发者使用一些现成的样式,完成自己产品、应用的开发。
基础框架:基础框架的主要能力是提供小程序的打包、编译、组件化等能力,让开发者可以更加简单,方便的使用自己熟悉的方案,完成应用的开发。
(一)UI 框架
1.iView Weapp
iView 是国内用户量极大的 Vue UI 组件库,随着项目的不断发展,iView 也推出其自己的小程序 UI 组件库,我们可以使用 iView 提供的组件库,来完成小程序的开发。
iView Weapp 和其 Vue 组件库一样,封装了大量精致的组件。
项目地址:/TalkingData/iview-weapp
项目预览:
2.WeUI
WeUI 是由微信官方团队推出的,一套同微信原生视觉体验一致的基础样式库。由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
项目地址:/Tencent/weui-wxss
项目预览:
3.Vant Weapp
Vant UI 的前身是有赞团队开源出来的 ZanUI,后统一品牌名称,为 VantUI。因为有赞团队的业务主要是电商相关,你可以在其中找到大量电商场景下的组件,如果你自己开发的产品也是电商相关,则可以考虑使用其产品。
项目地址:https://youzan.github.io/vant-weapp/#/home
项目预览:
4.ColorUI
ColorUI 是一个非常漂亮的组件库,其作者在视觉效果方面投入了大量的精力和时间在做优化,使用其构建出来的小程序都称得上是美仑美奂。
*** 项目地址***:/weilanwl/ColorUI
*** 项目预览***:
5.Thor UI
Thor UI 也是一个小程序 UI 库,声名不显,不过,其代码更新还算频繁,值得一试。
项目地址:/dingyong0214/ThorUI
项目预览:
(二).基础框架
1.WePY
WePy 是最早的小程序基础框架之一,目前依然在更新,WePY 使用的是类 Vue 的语法实现的基础框架,市场上也有大量的 Demo 和课程基于 WePY 开发,对于初学者来说,可以很轻松的找到自己想要学习的内容。
项目地址:/Tencent/wepy
2.Taro
Taro 是来自京东凹凸实验室的产品,是一套遵循 React 语法规范的多端开发解决方案,使用 Taro 可以编译出微信/百度/支付宝/字节跳动小程序、H5、React-Native 等多个平台的代码。
项目地址:/NervJS/taro
3.UniApp
uni-app 是使用 Vue 语法开发小程序、H5、App的统一框架。开发者使用 Vue语法编写代码,uni-app框架将其编译到 小程序(微信/支付宝/百度/字节跳动/QQ/钉钉)、App(iOS/Android)、H5等多个平台,保证其正确运行并达到优秀体验。
项目地址:/dcloudio/uni-app
4.Chameleon
Chameleon 是滴滴团队开发的一套多端小程序解决方案,目前已经支持了web、微信小程序、支付宝小程序、百度小程序、android(weex)、ios(weex)、qq 小程序、字节跳动小程序、快应用(进行中)等多个平台。如果你有多平台的需求,可以试试看。
项目地址:/didi/chameleon
框架如何使用
有了这么多开源的框架,怎么用? 是个问题。接下来,我就用其中一个作为演示,开发小程序如何使用框架开发,减少不会写样式的烦恼。
1.打开微信开发者工具,创建一个新的项目。
创建完成如下图
本章主要教学内容是UI框架的引用,项目结构说明后续详细介绍。此章节省略。
2.使用 Vant Weapp 作为演示
通过npm安装
打开调试器,控制台打开终端
输入安装代码
npm i @vant/weapp -S --production
框架就下载到自己新建的项目中了,接下来就是用框架开发自己想要的UI,其实就是引用他封装好的组件。
以按钮组件为例,只需要在 json 文件中引入按钮对应的自定义组件即可
{"usingComponents": {"van-button": "/path/to/vant-weapp/dist/button/index"}}
进入pages下的index.wxml,删除全部代码。
进入index.json,输入上方示例代码。
在index.wxml使用样式即可。
小编UI设计模板
小程序UI参考: