高仿京东微信小程序的研究
特别说明:1:不了解微信小程序的同学,请先搜索一下微信小程序究竟是什么,有哪些特性;
2:有htmlcssjs基础者可以直接进入实践,边实践边学习,尤其是有react与vue基础的;
3:微信小程序不需要特别申请(认证或账号)即可开始使用工具开发;
4:微信小程序是需要后台的,不限定任何语言,提供小程序接口要求的json格式即可;
5:初次开发者,推荐阅读新手跳坑系列,有几个坑,先了解一下,遇到时便可以查阅了;
6:如有作者不希望自己的作品被放置在这里,请联系我删除;7:如果遇到问题,推荐多使用搜索,对帖子及文章进行搜索;
自己做的微信小程序,只是学习用的;
演示扫码,源码下载参考下这里:http://www.erdangjiade.com/source
小弟为初学者,还请大神勿喷!!!
完整代码如下:
<!-- index.wxml --> <view class="page"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item.photo}}" class="slide-image" width="100%" height="200" /> </swiper-item> </block> </swiper> <view class="cont"> <navigator class="pr" url="../product/detail?productId={{item.id}}" hover-class="changestyle" wx:for="{{productData}}"> <image class="photo" src="{{item.photo_x}}"></image> <view class="title">{{item.name}}</view> <view style="display:flex;line-height:50rpx;padding:10rpx 0;"> <view class="gmxx" style=" color: red;">¥ {{item.price_yh}}</view> <view class="gmx">¥ {{item.price}}</view> </view> <view style="display:flex;line-height:50rpx;color:#999"> <view class="gmxx" style="font-size:28rpx;width:30%"> <text wx:if="item.is_show==1">新品</text> <text wx:elif="item.is_hot==1">热销</text> <text wx:else>推荐</text> </view> <view class="ku" style="width:60%">销量:{{item.shiyong}}</view> </view> </navigator> </view> <view class="clear mt10" bindtap="getMore">点击查看更多</view> </view>
/**index.wxss**/ .page { font-family: '微软雅黑'; background-color: #fff; } .swiper-item { display: block; height: 150px; } .slide-image { width: 100%; height: 150px; } .nav { background: #fff; padding: 15px 0; width: 100%; /*margin: 10px 0;*/ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; text-align: center; font-size: 12px; color: #666; } .nav image { width: 120rpx; height: 120rpx; display: block; text-align: center; margin: 0 auto; margin-bottom: 5px; border-radius: 15px; } .cont { width: 100%; background: #fff; padding-top: 10rpx; } .co { width: 100%; background: #fff; padding-top: 10rpx; padding-bottom: 20rpx; } .co .title { font-size: 32rpx; color: #333; line-height: 20px; margin: 0; height: 20px; padding: 1% 5% 0 5%; font-weight: 700; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; } .cont .pr { margin-bottom:10px; background:#fff; display:inline-block; width:46%; border:1px solid #EDEDED; margin-left:18rpx; } .prr { margin-bottom: 10px; background: #fff; display: inline-block; width: 45%; margin-left: 26rpx; } .cont_image { width: 100%; height: 285rpx; } .photo{ height:345rpx; width:345rpx; } .cont .title { font-size: 28rpx; color: #333; line-height: 20px; margin: 0; height: 40px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 1% 5% 0 5%; } .cont .tit { /*height: 80rpx;*/ font-size: 12px; color: #333; line-height: 20px; margin: 0; max-height: 40px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 1% 5% 0 5%; /*color: #ccc*/ } .gmxx { padding-left:20rpx; width:74%; } .gmx { text-align: left; width: 50%; font-size: 26rpx; margin-right:10rpx; text-decoration:line-through; color: #999} .ku{ text-align: right; width: 50%; font-size: 26rpx; margin-right:10rpx; } .gmh{ float:left; padding: 1% 5% 5% 5%; } .gmxx .jiage { font-size: 14px; color: #d9002f; /*padding-top: 10px; */ } .gmx .xiaoliang { font-size: 26rpx; } .gmh .xiaoliang { font-size: 25rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient:vertical; /*height: 96rpx;*/ color: gray; } .gmxx button { border-radius: 0; background: #dd2727; text-align: center; color: #fff; font-size: 14px; width: 30%; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); font-family: '\5FAE\8F6F\96C5\9ED1', arial, "\5b8b\4f53"; } .name { padding: 10px; text-align: center; font-weight: 700; background: #fff; font-size: 37rpx; } .na { padding: 10px; text-align: center; font-weight: 700; background: #fff; font-size: 37rpx; } .shan { text-decoration: line-through; font-size: 30rpx; margin-top: 11rpx; color: #ccc; } /*滑动*/ .sc { white-space: nowrap; height: 350rpx; background: #fff; } .miu { width: 30%; height: 100%; display: inline-block; margin: 24rpx; margin-right: 0px; } .ie { width:88%; height:196rpx; border: 1px solid #ccc; } .mi { display: block; height: 10%; text-align: center; font-weight: 700; padding: 10rpx 0; font-size: 28rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ma { font-size: 27rpx; display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list { background: #fff; width: 100%; } .ban { width: 46%; padding: 10rpx; border: 2rpx solid #ccc; display: inline-block; margin-left: 6rpx; } .ban image { width: 100%; } .ellipsis text { font-size: 30rpx; font-weight: 700; margin-left: 10rpx; } .df_1 { width: 25%; } /*定位*/ .er { height: 88rpx; display: inline-block; width: 100%; background: #EDEDED; } .im { width: 27rpx; height: 30rpx; display: inline-block; overflow: hidden; position: relative; top: 5rpx; } .dingwei { width: 23%; display: inline-block; float: left; font-size: 30rpx; margin-top: 28rpx; margin-bottom: 20rpx; } .sb { display: inline-block; height: 70rpx; margin: 0 15rpx; width: 85%; background: #f5f5f5; line-height: 70rpx; border-radius: 10rpx; text-align: center; margin-left: 30rpx; } .dingwei text { text-align: center; } /*搜索*/ .sousuo { display: inline-block; width: 96%; margin-left: 15rpx; } .weui-search-bar { margin-top: 13rpx; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; box-sizing: border-box; } .weui-search-bar__box { position: relative; padding-left: 30px; padding-right: 30px; width: 100%; box-sizing: border-box; z-index: 1; display: block; height: 63rpx; line-height: 63rpx; } .weui-search-bar__form { position: relative; -webkit-box-flex: 1; -webkit-flex: auto; flex: auto; border-radius: 14rpx; background: #fff; border: 1rpx solid #e6e6ea; } .weui-search-bar__input { height: 65rpx; line-height: 65rpx; font-size: 28rpx; text-align: center } .weui-icon-search_in-box { position: absolute; left: 20rpx; top: 19rpx; } icon { vertical-align: middle; } .weui-search-bar__cancel-btn { margin-left: 10px; line-height: 28px; color: #09bb07; white-space: nowrap; } .suo { width: 100%; height: 89rpx; margin-top: 20rpx; } .you { width: 100%; height: 132rpx; padding: 25rpx 0; } .you image { width: 100%; height: 100%; } .xian { width: 100%; height: 20rpx; background:#EDEDED; } .mt10 { margin: 0 auto; text-align: center; height: 70rpx; width: 450rpx; line-height: 70rpx; border-radius: 10rpx; border: 1px solid #999; font-size: 30rpx; margin-top: 30rpx; } .zixun{ height:154rpx; } .zixun image{ width: 45%; } .ooo{ margin-right: 20rpx; float: right ;height: 96%; } .jjj{ margin-left: 20rpx; float:left; height: 96%; } .k{ position: relative; top:52rpx; right:282rpx; opacity: 0; } .gs{ float: left; position: relative; top: -96rpx; left: 40rpx; display: flex; opacity: 0; }
相关推荐
kgshuo 2020-09-25
Tomato 2020-09-10
taiyangyu 2020-09-10
CodeAndroid 2020-09-10
small 2020-07-29
sucheng 2020-07-26
zuoliangzhu 2020-07-20
CodeAndroid 2020-07-14
xiaoxubbs 2020-07-04
sucheng 2020-06-25
kgshuo 2020-06-14
意外金喜 2020-06-14
zuoliangzhu 2020-06-14
tianping 2020-06-14
hgzhang 2020-06-14
killgod 2020-06-14
戴翔的技术 2020-06-14
郴州小程序 2020-06-13