从零开发一款自己的小程序UI组件库(二)
写在前面:从零开发一款自己的小程序UI组件库(一)
上节我们讲到初始化组件库模板、模板文件概述、模板上传npm以及npm包文件下载至本地并运用到项目。这节我们继续,内容主要有基础UI组件库的搭建(button组件的实例)以及如何在本地使用npm link调试npm包项目。
本节所用到的物料:mineui-weapp组件库v1.1、weapp-for-mineui程序v1.1
1.开发基础组件button
我们上节有提到,要开发组件库的话,需要在官方单组件模板的基础上,①修改tools目录下的config.js文件、②新建src下的button组件目录和button目录下的四个index文件以及③新建承载button组件的button页面
①tools目录下的config.js文件,修改entry: ['index'],为:entry: ['index', 'button/index']。
②在src目录下新建button目录和button目录下的四个index文件【index.wxss、index.json、index.js、index.wxml】,并填充基础内容
修改index.wxss文件:
@import "../common.wxss"; .mine-button--default { color: #333; background-color: #fff; border: 1px solid #eee } .mine-button--primary { color: #fff; background-color: #07c160; border: 1px solid #07c160 } .mine-button--info { color: #fff; background-color: #1989fa; border: 1px solid #1989fa } .mine-button--danger { color: #fff; background-color: #f44; border: 1px solid #f44 } .mine-button--warning { color: #fff; background-color: #ff976a; border: 1px solid #ff976a }
修改index.json文件:
{ "component": true, "usingComponents": {} }
修改index.js文件:
Component({ properties: { type: { type: String, value: 'primaty' } }, methods: { onClick() { this.$emit('click') } } })
修改index.wxml文件:
<button class="mine-button--{{type}}" bindtap="onClick"> <slot /> </button>③新建承载button组件的button页面
修改在tools/demo目录下的app.json文件,pages数组下增加 "pages/button/index" 的,并在tools/demo/pages下添加button目录及其下的index文件,这里修改json、js、wxml文件
修改index.json文件:
{ "usingComponents": { "comp": "../../components/button" } }
修改index.js文件:
Page({})
修改index.wxml文件:
<mine-button type="danger">I'm a button</mine-button>
在根目录下运行:
npm run watch
使用微信开发者工具导入预览miniprogram_dev目录,并将预览模式转到“pages/button/index”目录下,即可看到一个红色的button,内容为:I'm a button
这时,我们修改tools/demo/pages/button/index.wxml文件:
<mine-button type="primary">I'm a primary button</mine-button>
可以实时看到开发者工具预览按钮变成绿色的button,内容为:I'm a primary button
这里一个简单的button组件就编写完成了,那么如何丰富它的属性让它适应更多的场景呢?
2.丰富button组件
在上面的基础button组件中,我们只配置了button的type即按钮的背景颜色和文字颜色。但是通常我们使用到button时,还会自定义按钮背景颜色、按钮文字颜色及大小、按钮的大小、按钮的形状、按钮的loading状态以及按钮的open-type等等,这就需要我们修改src/button下的index文件了。
未完待续、、
- Chrome扩展程序的二次开发:把它改得更适合自己使用
- Chrome扩展程序的二次开发:把它改得更适合自己使用
- 开发这样一款点餐微信小程序|明智科技
- 解说微信抽奖大转盘小程序的开发过程以及一款抽奖大转盘活动软件!
- 支付宝小程序你什么时候需要自己开发?4大维度详细分析支付宝,微信小程序区别
- 开发一款类似点点记账的理财工具小程序|广州明智科技公司
- 毫无废话: 从0开始一点一滴用java开发自己的B/S模式程序-5.3
- 有了这些免费无限次的API 接口,再也不愁没有服务器开发不了APP了,也可以自己开发小程序了
- 带你开发一款给Apk中自己主动注入代码工具icodetools(开凿篇)
- qgis 二次开发,重写满足自己功能的程序
- 自己提出的程序开发三大原则:代码简洁,结构清晰,合理运用
- 【转】如何自己开发一款js或者jquery插件
- 普通管理类程序开发之难度系数、层次之说法,可以看看自己停留在哪个层次,不足之处,请大家一起补充
- 如何开发自己的操作系统的引导程序
- 自己开发一套微信支付接口,小程序支付,微信h5支付都能轻松搞定
- VS2008 给自己开发QT程序 加上程序图标 logo.ico
- [C# Winform] 利用C#开发的一款桌面程序---落雪---迎接2011
- 分享一款自己开发的小工具[网页一键转PDF]
- 自己编写小程序开发调试函数
- 独立开发并发布自己的一款手游——SpaceWar