特别说明: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; }
相关推荐
仿 「ONE · 一个」 的微信小程序 .zip 仿网易云音乐APP的微信小程序 .zip 高仿手机QQ应用程序.zip 跑步微信小程序 .zip 企业级微信小程序全栈方案 .zip 微信小程序 —— 新闻阅读器.zip 微信小程序 Sports News...
微信小程序 高仿苹果计算器 (源码)微信小程序 高仿苹果计算器 (源码)微信小程序 高仿苹果计算器 (源码)微信小程序 高仿苹果计算器 (源码)微信小程序 高仿苹果计算器 (源码)微信小程序 高仿苹果计算器 (源码)微信小...
微信小程序 影音娱乐 仿腾讯视频小程序 (源代码+截图)微信小程序 影音娱乐 仿腾讯视频小程序 (源代码+截图)微信小程序 影音娱乐 仿腾讯视频小程序 (源代码+截图)微信小程序 影音娱乐 仿腾讯视频小程序 (源...
【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大...
微信小程序 互联网行业 仿饿了么 (源代码+截图)微信小程序 互联网行业 仿饿了么 (源代码+截图)微信小程序 互联网行业 仿饿了么 (源代码+截图)微信小程序 互联网行业 仿饿了么 (源代码+截图)微信小程序 ...
微信小程序——高仿苹果计算器(截图+源码).zip 微信小程序——高仿苹果计算器(截图+源码).zip 微信小程序——高仿苹果计算器(截图+源码).zip 微信小程序——高仿苹果计算器(截图+源码).zip 微信小程序——...
模仿淘票票APP(微信小程序源代码)模仿淘票票APP(微信小程序源代码)模仿淘票票APP(微信小程序源代码)模仿淘票票APP(微信小程序源代码)模仿淘票票APP(微信小程序源代码)模仿淘票票APP(微信小程序源代码)模仿淘票票APP...
微信小程序-模仿QQ小程序
【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大...
(知乎日报) 微信小程序 d artand 今日更新求职招聘类 医药网 口碑外卖点餐 城市天气 外卖小程序 定位天气 家居在线 微信小程序-大好商城,wechat-weapp 微信小程序的掘金信息流 微信跳一跳小游戏源码 微票源码-demo ...
微信小程序合集7(体育赛事+高仿知乎+微赞论坛+数独游戏+小熊日记) 体育赛事微信小程序 高仿知乎微信小程序 微赞论坛微信小程序 数独游戏微信小程序 小熊日记微信小程序
微信小程序源码 高仿苹果计算器(学习版)微信小程序源码 高仿苹果计算器(学习版)微信小程序源码 高仿苹果计算器(学习版)微信小程序源码 高仿苹果计算器(学习版)微信小程序源码 高仿苹果计算器(学习版)微信小程序源码 ...
仿QQ微信小程序源码.zip
高仿仿微信DEMO小程序源码.zip
微信小程序之高仿微信Demo,里面包含文件比较多,请耐心查看,有问题请留言
SmallAppForQQ 微信小程序资料推荐: 1. 小程序开发文档 2. 小程序设计指南 3. 小程序开发者工具 Windows 64,Windows 32,MAC 4. 小程序官方demo
1,实现的需求 1)首页:标题栏获取用户当前位置,使用腾讯api实现定位,不用弹窗出现用户授权, 进入首页,获取附近商铺的列表 轮播图: 导航栏: (1)向后台发送请求来获取展示的商铺列表,综合排序,筛选实现...
后,小程序上线了“扫码点单”和“扫码付款”都极大的推动了餐饮行业对小程序的使用,由以上所述两点也可以知道,餐饮业开发小程序可以大大节约人力资源的成本,不仅如此,小程序附近的店这个功能对扩大用户数量,...
微信小程序毕业设计-高仿苹果计算器 微信小程序毕业设计-高仿苹果计算器 微信小程序毕业设计-高仿苹果计算器 微信小程序毕业设计-高仿苹果计算器 微信小程序毕业设计-高仿苹果计算器 微信小程序毕业设计-高仿苹果...
高仿大麦在线选座 微信小程序,票务小程序we-app-filmseat-master.zip