微信商城小程序开发篇--前篇：商城列表项组件开发之一

最近在学习开发商城微信小程序，在开发商城的时候，我们可能在首页，商品列表页都会遇到商品项的展示，类似京东这种，但没这么复杂：

我将上面的这种商品展示暂且称之为竖向展示。我写过首页和商品列表页之后，发现还有其他页面会用到这种商品展示方式，于是就想将这个鬼东西写成组件，方便使用，顺便也学习一下组件的开发过程。

首先创建一个空模版的小程序，新建一个文件夹叫做component，它长这个样子：

下面来写组件：

组件跟写小程序单页面一样，也是一个文件夹内部包含同名但后缀不同的文件，就不说明了，需要的请看微信文档，讲的很详细，传送门：https://developers.weixin.qq.com/miniprogram/dev/index.html?t=2018413

先在component/vertical-item/index.json里面注册组件，添加如下代码，表示注册组件：

在component/vertical-item/index.wxml文件当中添加wxml代码：

在component/vertical-item/index.wxss文件当中添加样式代码：

.d-shoping-item {width: 350rpx;font-size: 0rpx;display: inline-block;border-radius: 6rpx;
}.info{background: #ffffff;font-size: 24rpx;padding: 10rpx;color: #666666;
}
.desc{text-align: left;height: 68rpx;letter-spacing: 4rpx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow:ellipsis;
}.detail{height: 40rpx;padding-top: 10rpx;position: relative;
}.price{color: #ff423c;display: inline-block;position: absolute;left: 0;
}.sale{display: inline-block;position: absolute;right: 10rpx;
}.d-shoping-image{border-radius: 6rpx;width: 100%;height: 350rpx;
}

最后在component/vertical-item/index.js添加js代码，每个字段的意思都有解释哟：

Component({externalClasses: ['d-class'],properties: {// 商品的图片
        thumb: {type: String,value: ''
        },// 商品的标题(名称)
        title: {type: String,value: ''
        },// 商品的价格
        price: {type: String,value: ''
        },// 商品的销量
        sale: {type: String,value: ''
        }},// 注册事件,我们可以绑定跳转事件
    methods: {handleTap () {this.triggerEvent('click');}}
});

现在我们的组件就写好啦，在logs文件夹下面引用我们的组件测试看看效果，先修改app.json把logs文件当作首页面加载，免了跳转的麻烦:

{"pages":["pages/logs/logs","pages/index/index"
  ],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"
  }
}

然后再logs.json里面引用我们刚才写好的组件：

{"usingComponents": {"d-card": "/component/vertical-item/index"
    }
}

最后在logs.wxml调用我们的组件（图片是借鉴的）：

<view class="test"><view class="item"><d-card
                title="12018夏季女装碎花外穿雪纺衫吊带衫大妈无袖印花小背心说几句话收到货大幅度发"
                price="69.9"
                sale="销量 80"
                thumb="http://img.weiye.me/zcimgdir/album/file_58fdb771ec8e8.png"
                bind:click="handleClick"
        ></d-card></view><view class="item"><d-card
                title="12018夏季女装碎花外穿雪纺衫吊带衫大妈无袖印花小背心说几句话收到德大幅度发"
                price="69.9"
                sale="销量 3w"
                thumb="http://img.weiye.me/zcimgdir/album/file_58fdb771ec8e8.png"
                bind:click="handleClick"
        ></d-card></view><view class="item"><d-card
                title="12018夏季女装碎花外穿雪纺衫吊带衫大妈无袖印花小背心说几句坚阿萨德大幅度发"
                price="69.9"
                sale="销量 60"
                thumb="http://img.weiye.me/zcimgdir/album/file_58fdb771ec8e8.png"
                bind:click="handleClick"
        ></d-card></view>
</view>

写一下logs.wxss容器的样式，便于我们查看：

.test{width: 750rpx;background: #dfdfdf;text-align: center;display: flex;flex-wrap: wrap;
}.item{margin-top: 20rpx;margin-left: 16.6rpx;
}

到此我们可以从开发者工具看到效果啦，如果你还没下载工具，请从上面的传送门进去吧。

欢迎关注本喵女的个人微信公众号，微信商城小城学习系列会逐一发出，共同学习。

今天就这么多了,晚安......

微信商城小程序开发篇--前篇：商城列表项组件开发之一相关推荐

美观大气商城小程序源码/单商户商城/拼团、抢购商城/积分商城/商城小程序/优惠券
简单大气商城小程序,UI简洁,界面简约. 前端:uniapp 后端:PHP(FastAdmin框架) 后台操作简单,直接可运营. 1.签到有礼 2.品质拼团功能 3.限时秒杀功能 4.新人领新手礼功能 ...
ECShop 商城小程序「weeshop 」- 基于 ECShop 3.6 版本开发的完整版商城小程序
weeshop ECShop 微信小程序商城,基于3.6版本 appserver 接口,100% 兼容原有程序. 注意:本项目开发基本完善,如用于商业用途,请务必去往博客文章留言备注. 项目内容基于 ...
微信聊天小程序——（三、获取好友列表）
三.获取好友列表步骤一.展示所有好友的推荐列表(friends页面) 具体效果: 实现思路: 我们有我们的用户数据库表即:uers 循环我们的数据库用户表,达到所有的用户信息,即:userList ...
全栈技术实践经历告诉你：开发一个商城小程序要多少钱？
本文来源:https://www.src1024.com/tech/talk/38236.html 市面上的小程序商城个有特色,按照比较常规的有赞商城小程序来举个栗子,估算了一下开发量后结论是: 自己 ...
手牵手，使用uni-app从零开发一款视频小程序 (系列上准备工作篇)
系列文章手牵手,使用uni-app从零开发一款视频小程序 (系列上准备工作篇) 手牵手,使用uni-app从零开发一款视频小程序 (系列下开发实战篇) 前言好久不见,很久没更新博客了,前段时间 ...
微信分销商城小程序几种常用开发方法
一.微信分销商城小程序几种常用开发方法 1.自主开发这种方式是很多企业考虑的,但这种开发方式的前提是有自己的开发团队或重新组建开发团队.无论是重组自己的开发团队还是有自己开发团队,功能要求.前后端开 ...
H5电商营销系统+微信商城小程序、拼团、砍价、秒杀、优惠券、积分、分销等功能thinkphp二次开发
H5电商营销系统+微信商城小程序.拼团.砍价.秒杀.优惠券.积分.分销等功能thinkphp二次开发喜欢的联系我,提供源代码 1.后台应用form-builder PHP快速生成现代化表单: ...
微信小程序云开发用户身份登录_云开发版的微信商城小程序第一章
我们经过前面小程序基础和云开发基础的学习,今天就来带大家实现一个综合项目,上线一款属于自己的微信商城小程序. 文末有彩蛋如果你有小程序基础可以跳过上面的基础,直接看下面的,如果没有小程序基础,建议你 ...
c++如何让程序异常以后继续执行_微信商城小程序开发首页广告如何布局？c
小程序的开发使得商家变现微信流量越来越便利,因此各类小程序制作数量不断增加,特别是不少商家选择制作商城类小程序.而在进行小程序制作的时候,是需要布局相应广告来进行流量转化的,那么微信商城小程序开发首页 ...

微信商城小程序开发篇--前篇：商城列表项组件开发之一

微信商城小程序开发篇--前篇：商城列表项组件开发之一相关推荐

最新文章

热门文章