【小程序入门集锦】4,使用zanui开发小程序微商城(模板组件的开发规范)

zanui是一套视觉UI包,与weui类似但又不等于weui,约等于weui+weui.js。没有weui成熟、全面。但在微商城这一细分领域,比weui更全面。两者使用了不同的css前缀,可以并用于项目中。

ZanUI-WeApp是有赞推出的,结合了微信的视觉规范,为用户提供更加统一的使用感受。

包含 badge、btn、card、cell、color、dialog、form、helper、icon、label、loadmore、panel、quantity、steps、tab、toast、toptip 共计 17 类组件或元素。

使用

下载:git clone https://github.com/youzan/zanui-weapp.git

打开微信web开发者工具,'本地小程序项目 - 添加项目',把 zanui-weapp 添加进去就可以预览demo了。

使用

组件大致的分为4类:

1. 简单组件

如按钮组件,只要按照wxml结构写就好了按钮

这是最简单的一类,直接使用的是zan-开头的css样式,与weui-样式类似。

2. 复杂组件

如加载更多组件,需要先引入定义好的模版,然后给模版传递数据

这一类组件是次简单,使用了模板。

这一句是使用模板组件的语句,is=""指明模板名称,该名称定义于../loadmore/index.wxml文件中:

{{ nodata_str || '暂无数据' }}

加载中...

这是最简单的模板组件,有三个逻辑判断分支,分别是nomore、nodata、loading。每个if分支对应一种UI。

第二种nodata中,{{ nodata_str || '暂无数据' }},这一句用于定义显示的默认文本。

自定义的情况示例:

运行效果:

3. 带事件回调的组件

如数量选择组件,需要先引入模版,然后给模版传递数据

然后通过Zan.Quantity把相关回调注入到页面中varZan=require('path/to/zanui-weapp/dist/index');Page(Object.assign({},Zan.Quantity, {

data:{

quantity:{

quantity:10,

min:1,

max:20},

},handleZanQuantityChange(e) {// 如果页面有多个Quantity组件,则通过唯一componentId进行索引varcompoenntId=e.componentId;varquantity=e.quantity;this.setData({'quantity.quantity':quantity

});

}

}));

上面代码中这个Object.assign语法,是es6的:

Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target)。它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象。

它是将Zan.Quantity这个对象,还有它后面的定义的“Page”对象,拷贝到前面的{}空对象中,从而组成一个新的Page对象。

这样做的结果是,Zan.Quantity中定义的组件方法,例如_handleZanQuantityBlur、_handleZanQuantityMinus、_handleZanQuantityPlus都跑到了当前页面中,就像在当前页面中定义一样,只是少了编写的麻烦。

与此同时,在Zan.Quantity中,使用的this对象,当指当前重组后的页面对象。

在Zan.Quantity有一段这样的代码:

function callback(componentId, quantity) {

quantity = +quantity;

var e = { componentId, quantity };

console.info('[zan:quantity:change]', e);

if (this.handleZanQuantityChange) {

this.handleZanQuantityChange(e);

} else {

console.warn('页面缺少 handleZanQuantityChange 回调函数');

}

}

handleZanQuantityChange是客户代码定义的。在示例中是这样的:

handleZanQuantityChange(e) {

var componentId = e.componentId;

var quantity = e.quantity;

this.setData({

[`${componentId}.quantity`]: quantity

});

}

关于Object.assign的说明,在小程序API文档、组件文档中都没有,在工具文档页中,描述ES6 API 支持情况时,有列举该es6语法api。

4. API类组件

如Toast组件,需要先引入模版,并在页面上使用。

注意zanToast这个数据也是通过Zan.Toast注入到页面的

显示toast

将API注入到页面后,就可以通过this来直接调用相应的API了

varZan=require('path/to/zanui-weapp/dist/index');Page(Object.assign({},Zan.Toast, {showToast() {this.showZanToast('toast的内容');

}

}));

toast与quantity组件的实现类似,只是需要显式调用,与程序原生的api 组件类似。

有赞商城团队的这种定义模板组件的方法,很值得学习推广。每一个模板组件,单独一个目录。在dist/index主js文件中,export各组件。

在使用时,统一引用/dist/index,并实例化统一的Zan变量,使用Object.assign混合Page页面对象,保持了代码的简洁优雅。

大家已经造了不少轮子了,我们要不要也开发一个小程序微商城?

如果产品特色,索性就不做。但如果只是做为一个示例,供开发者方便学习,可以考虑。

在微信公众号哲学李论,回复“小程序入门集锦”可以看到这个系列的所有文章。

本文同时在多个平台、社群转发,回复“社群”可与其它艺友热情连接。

如果觉得本文还行,请转发到朋友圈让更多朋友看到。

如果您看到有料的文章,欢迎与10W艺友分享,荐文热线:[email protected]

你可能感兴趣的:(【小程序入门集锦】4,使用zanui开发小程序微商城(模板组件的开发规范))