开发微信小程序商城的流程[微商城小程序app开发]优质

网友从容提问：微信小程序商城开源项目

这篇文章是教大家如何使用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 类组件或元素。

使用

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

组件大致的分为4类：

1. 简单组件

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

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

2. 复杂组件

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

<!-- example/loadmore/index.html -->

<!-- 引入组件模版 -->

<import src="path/to/zanui-weapp/dist/loadmore/index.wxml" />

<!-- 加载中 -->

<template is="zan-loadmore" data="{{loading: true}}" />

<!-- 一条数据都没有 -->

<template is="zan-loadmore" data="{{nodata: true}}" />

<!-- 没有更多数据了 -->

<template is="zan-loadmore" data="{{nomore: true}}" />

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

<template is="zan-loadmore" data="{{nodata: true}}" />

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

<template name="zan-loadmore">

<block wx:if="{{nomore}}">

<view class="zan-loadmore zan-loadmore--nomore">

<view class="zan-loadmore__tips">

<view class="zan-loadmore__dot"></view>

</view>

</view>

</block>

<block wx:elif="{{nodata}}">

<view class="zan-loadmore zan-loadmore--nodata">

<view class="zan-loadmore__tips">{{ nodata_str || \'暂无数据\' }}</view>

</view>

</block>

<block wx:elif="{{loading}}">

<view class="zan-loadmore">

<view class="zan-loading"></view>

<view class="zan-loadmore__tips">加载中...</view>

</view>

</block>

</template>

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

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

自定义的情况示例：

运行效果：

3. 带事件回调的组件

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

<!-- example/quantity/index.html -->

<import src="path/to/zanui-weapp/dist/quantity/index.wxml" />

<template is="zan-quantity" data="{{ ...quantity, componentId: \'customId\' }}" />

然后通过Zan.Quantity把相关回调注入到页面中

var Zan = require(\'path/to/zanui-weapp/dist/index\');

Page(Object.assign({}, Zan.Quantity, {

data: {

quantity: {

quantity: 10,

min: 1,

max: 20

},

},

handleZanQuantityChange(e) {

// 如果页面有多个Quantity组件，则通过唯一componentId进行索引

var compoenntId = e.componentId;

var quantity = 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注入到页面的

<!-- example/toast/index.html -->

<import src="path/to/zanui-weapp/dist/toast/index.wxml" />

<view bindtap="showToast">显示toast</view>

<template is="zan-toast" data="{{ zanToast }}"></template>

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

<!-- example/toast/index.js -->

var Zan = 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页面对象，保持了代码的简洁优雅。

以上就是如何使用zanui开发微信小程序微商城的全部内容了，大家都学会了吗?

关于《如何使用zanui开发微信小程序微商城？》相关问题的解答易山小编就为大家介绍到这里了。如需了解其他软件使用问题，请持续关注国旅手游网软件教程栏目。