微信小程序商城篇（一）首页功能

一个小程序的首页，是整个小程序门面，及小程序的所有推荐小型功能。很重要

我的首页分为背景图，轮播图，搜索，平移轮播，特价跳转，食谱跳转和推荐的物品及其跳转功能。
emmmmm…唯一的不足就是没有用到盒子和布局。。。。，下次给你们补上吧，这次用这个会陆续发布整个商城的完成。对了，这些都是动态的数据交互之后的数据，照着改掉就好了，注释也都在代码里，我的图片也加载服务器了。

直接给你们代码看吧！！！

首先 wxlm代码

<wxs src="../../utils/constant.wxs" module="util" />
<scroll-view><view class='img-img'><!-- 顶部轮播图 --><swiper class='all-img' indicator-dots='{{indiicatorDots}}' autoplay='{{autoplay}} ' interval='{{interval}}' duration='{{duration}}' indicator-color="#67ac0e" indicator-active-color="green" circular="{{circular}}" bindchange="indexChange"><view wx:for="{{imgUrl}}"><swiper-item><image src='{{item}}' data-src='{{item}}' class='carousel-img'></image></swiper-item></view></swiper><block wx:if='{{current == 0}}'><view class="img-class"><image class="index-img" src="/pages/img/back.png"></image></view></block><block wx:elif='{{current == 1}}'><view class="img-class"><image class="index-img" src="/pages/img/back2.png"></image></view></block><block wx:elif='{{current == 2}}'><view class="img-class"><image class="index-img" src="/pages/img/back.png"></image></view></block><block wx:elif='{{current == 3}}'><view class="img-class"><image class="index-img" src="/pages/img/back2.png"></image></view></block><!-- 搜索 --><view class='search-input'><view class='search-img'><image class='search' src='/pages/img/sousuo.png' mode='aspectFit'></image></view><view class='search-value'><input class='sou-input' placeholder='店内搜索你想要的' bindtap='jumpSearchGood'></input></view></view></view><!-- 分类的图片和文字 --><view class='img-all-text'><view class='img-back' wx:for='{{classList}}'><view class='classify-input1'><image class='fruit' src='{{util.IMAGE_URL}}{{item.img}}' mode='aspectFit' bindtap='fruitClassify' data-id='{{item.id}}' data-title='{{item.title}}' data-img_biu='{{item.img_biu}}'></image><!-- 字体分类 --><view class='classify-text'><text class='text-text'>{{item.title}}</text></view></view></view></view><!-- 背景 --><view class='demo-page'><!-- <swiper class="swiper-block" previous-margin="180rpx" next-margin="180rpx" current="{{centerItem}}" bindchange="swiperChange" indicator-dots='true' indicator-color="#67ac0e" indicator-active-color="green"><block wx:for="{{imgInfoArr}}" wx:index="{{index}}"><swiper-item class="swiper-item" bindtap='jumpCoupon'><image src="{{item.src}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}" /></swiper-item></block></swiper> --><!-- 限时特价 --><view class='special-img' bindtap='jumpPromotion'><image class='special' src='cloud://lzn.6c7a-lzn/xianshi.png' mode='aspectFill'></image></view><!-- 定制食谱 --><!-- <view class='custom-img'><image class='custom' src='cloud://lzn.6c7a-lzn/dingzhi.png' mode='aspectFit' bindtap='jumpCustom'></image></view> --><!-- 推荐展示物品 --><view class='all-recommend'><view class='dongtai' wx:for='{{goodsList}}'><view class='recommend-img' bindtap='jumpDetail' data-id='{{item.id}}'><image class='recommend' src='{{util.IMAGE_URL}}{{item.img}}'></image></view><!-- 推荐物品名字 --><view class='freeze-text'><view class='freeze'><text>{{item.title}}</text></view></view><!-- 推荐物品价格 --><view class='car-price'><view class='car-img'><view class='price-text'><text class='text-price1'>￥{{item.price1}}</text><text class='text-price2'>{{item.price2}} /{{item.unit}}</text></view><view class='img-buy' bindtap='addCarts' data-id="{{item.id}}"><image class='buy' src='/pages/img/caradd.png' mode='aspectFit'></image></view></view></view></view></view></view></scroll-view>

wcss代码

.img-img {width: 100%;height: 100%;
}.img-class{width: 100%;margin-top: -340rpx;
}.index-img{width: 100%;height: 430rpx;
}.all-img {margin-left: 5%;margin-right: 5%;
}.carousel-img {width: 100%;height: 260rpx;margin-top: 26rpx;border-radius: 30rpx;
}.search-input {margin-left: 10%;margin-right: 10%;margin-bottom: 20rpx;display: flex;border-radius: 60rpx;width: 80%;background-color: white;margin-top: -90rpx;align-items: center;height: 60rpx;line-height: 60rpx;position: absolute;
}.search-img {width: 10%;display: inline-block;margin-left: 5%;
}.search {width: 60rpx;height: 30rpx;
}.search-value {width: 70%;display: inline-block;
}.sou-input {font-size: 30rpx;
}.demo-page {background-color: #f3f3f3;
}.special-img {
}.special {width: 100%;height: 200rpx;
}.custom-img {border: 20rpx solid #f3f3f3;
}.custom {width: 100%;height: 200rpx;
}.all-recommend {border: 20rpx solid #f7f7f7;background-color: #f3f3f3;margin-top: -46rpx;
}.recommend-img {margin-top: 40rpx;
}.recommend {width: 210rpx;height: 210rpx;
}.freeze-text {margin-left: 5%;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}.car-price {margin-left: 5%;margin-top: 30rpx;
}.freeze {width: 100%;display: inline-block;font-size: 24rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: 20rpx;
}.price-text {width: 55%;display: inline-block;
}.text-price1 {display: inline-block;color: #ee7f9f;font-size: 24rpx;
}.text-price2 {display: inline-block;color: #ee7f9f;font-size: 18rpx;
}.input-price1 {display: inline-block;vertical-align: bottom;width: 20%;font-size: 18rpx;margin-left: -30rpx;margin-bottom: 4rpx;
}.car-img {width: 100%;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}.buy {width: 30px;height: 40rpx;margin-left: 30%;
}.img-buy {display: inline-block;vertical-align: top;margin-top: 10rpx;width: 45%;text-align: right;
}/* 轮播平移 */swiper {display: block;height: 340rpx;
}.optionBox {width: 80%;height: 100%;background-color: rgba(255, 255, 255, 0.5);margin-left: 10%;margin-right: 10%;
}.optionBox image {width: 100%;height: 100%;
}.swiperText {width: 100%;height: 50rpx;font-family: bariol_bold;font-size: 30rpx;margin-top: 40rpx;text-indent: 20rpx;
}.profile-text {width: 100%;height: 50rpx;font-size: 26rpx;color: #4a4a4a;margin-top: 10rpx;text-indent: 20rpx;
}.mask {height: 100%;background-color: rgba(255, 255, 255, 0.5);position: absolute;left: 0;top: 0;
}.perch {width: 100%;height: 100%;
}.swiper-block {height: 220rpx;width: 100%;
}.swiper-item {display: flex;flex-direction: column;justify-content: center;align-items: flex-start;overflow: unset;
}.slide-image {height: 320rpx;width: 320rpx;border-radius: 9rpx;box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);margin: 20rpx 0rpx 75rpx 60rpx;z-index: 1;
}.active {transform: scale(1.14);transition: all 0.2s ease-in 0s;z-index: 20;
}.dongtai {display: inline-block;width: 30%;margin-left: 3%;
}.img-all-text {border: 20rpx solid #f3f3f3;border-radius: 0rpx;
}.fruit {width: 100%;height: 130rpx;
}.classify-text {margin-bottom: 20rpx;
}.text-text {font-size: 26rpx;
}.classify-input1 {margin-top: 20rpx;
}.img-back {background-color: white;display: inline-block;width: 25%;text-align: center;
}

js代码

//index.js
//获取应用实例
//index.js
//获取应用实例
const app = getApp()Page({data: {goodsList: [],imgUrl: ["cloud://lzn.6c7a-lzn-1259608225/store.jpg","cloud://lzn.6c7a-lzn-1259608225/shop.jpg","/pages/img/indexSwiper.png","cloud://lzn.6c7a-lzn-1259608225/lunbo.png"],current: 0,indiicatorDots: true,autoplay: true,interval: 3000,duration: 1000,gods_id: '', //跳转进详情id// 平移imgInfoArrLength: '', // 轮播图列表的长度centerItem: '', // 居中项的位置imgInfoArr: [{src: '/pages/img/mycoupon.png',id: 1}, {src: '/pages/img/mycoupon.png',id: 2}, {src: '/pages/img/mycoupon.png',id: 3}, {src: '/pages/img/mycoupon.png',id: 4}, {src: '/pages/img/mycoupon.png',id: 5}, {src: '/pages/img/mycoupon.png',id: 6}, {src: '/pages/img/mycoupon.png',id: 7}],},swiperChange(e) {var that = this;that.setData({swiperIndex: e.detail.current,})},indexChange(e) {var that = this;that.setData({current: e.detail.current})},// 加入到购物车addCarts: function(e) {var that = this;var token = wx.getStorageSync('token')var id = e.currentTarget.dataset.id;var successStatus = wx.getStorageSync('successStatus')this.setData({successStatus: successStatus,})//console.log("kk", id)if (successStatus == '') {wx.showModal({title: '提示',content: '您暂未授权登录，如果需要加入购物车，请点击确定前往登录界面，否则取消则是继续浏览界面',success(res) {if (res.confirm) {wx.navigateTo({url: '/pages/login/login',})} else if (res.cancel) {}}})} else {wx.request({method: 'POST',url: app.URL + '/cart/add',header: {"Content-Type": "application/x-www-form-urlencoded",userToken: token,},data: {product_id: id,number: 1, //默认的数量},success: function(res) {//console.log("出 : ", res)that.setData({})}})wx.showToast({title: '添加购物车成功',})}},// 定制jumpCustom: function(e) {wx.navigateTo({url: '/pages/index/custom/custom',})},// 详情jumpDetail: function(e) {var product_id = e.currentTarget.dataset.id;//console.log("kkk", id)wx.navigateTo({url: '/pages/classify/detail/detail?product_id=' + product_id,})},// 促销jumpPromotion: function(e) {wx.navigateTo({url: '/pages/index/promotion/promotion',})},// 水果列表fruitClassify: function(e) {var id = e.currentTarget.dataset.id;var title = e.currentTarget.dataset.title;var img_biu = e.currentTarget.dataset.img_biu;wx.navigateTo({url: '/pages/classify/fruitclass/fruitclass?id=' + id + '&title=' + title + '&img_biu=' + img_biu,})},// 取消订单详情jumpOrderCancel: function(e) {wx.navigateTo({url: '/pages/person/orderdetail/orderdetail',})},// 退款jumpApplication: function(e) {wx.navigateTo({url: '/pages/person/applicationrefund/applicationrefund',})},// 优惠jumpCoupon: function(e) {wx.navigateTo({url: '/pages/person/couponAll/couponAll',})},// 跳转到关键字搜索jumpSearchGood: function(e) {wx.navigateTo({url: '/pages/index/searchall/searchall',})},onLoad: function() {var that = thisvar token = wx.getStorageSync('token')console.log("kl", token)var len = this.data.imgInfoArr.length;var center = parseInt(len / 2);this.setData({imgInfoArrLength: len,centerItem: center})wx.request({method: 'POST',url: app.URL + '/product/lists',header: {'content-type': 'application/x-www-form-urlencoded;charset=utf-8',userToken: token,},data: {cate_id: 0, //其他传的对应的idhot: 1,rows: 12,},success: function(res) {console.log("出 : ", res)that.setData({goodsList: res.data.data})}})//显示分类wx.request({method: 'POST',url: app.URL + '/product/cate',header: {"Content-Type": "application/x-www-form-urlencoded",userToken: token,},data: {pid: 0,},success: function(res) {console.log("出 : ", res)that.setData({classList: res.data.data})}})},/*** 生命周期函数--监听页面显示*/onShow: function() {var that = thisthat.onLoad();wx.showModal({title: '公告',content: '生鲜类产品预订制，送达时间为第二天，菜品不满意，可当场拒收退款。如需当天配送，请电话联系13340716089，微信同号。配送范围：炳草岗至炳三区，营业时间8：00--22:00，地址：乐活天街金海世纪城39栋',showCancel: false,confirmText: '我知道了',success(res) {if (res.confirm) {}}})},/*** 用户点击右上角分享*/onShareAppMessage: function() {},onPullDownRefresh: function() {var that = thiswx.showNavigationBarLoading() //在标题栏中显示加载//模拟加载setTimeout(function() {// completewx.hideNavigationBarLoading() //完成停止加载wx.stopPullDownRefresh() //停止下拉刷新that.onLoad();}, 1500);},
})
然后是上面的模板域名

var IMAGE_URL = ‘https://127.0.0.1:8080’;//你的请求域名
module.exports = {
IMAGE_URL: IMAGE_URL,

}


哦，对了，我在app.js里设置了一个全局变量地址，方便你改域名，放在APP括号下面就可以了。URL:'https://127.0.0.1:8080';//你的请求域名这就是首页代码了，有什么问题可以留言告诉我.

微信小程序商城篇（一）首页功能相关推荐

微信小程序——商城篇
前言随着wepy和mpvue的出现及流行,开发小程序变的越来越便捷和强大,作为基佬社区的一份子,我们都需要把自己遇到的问题以及如何解决的方式相互分享,这样才能帮助到更多的朋(ji)友(lao).如有 ...
微信小程序 python 商城_微信小程序——商城篇
前言随着wepy和mpvue的出现及流行,开发小程序变的越来越便捷和强大,作为基佬社区的一份子,我们都需要把自己遇到的问题以及如何解决的方式相互分享,这样才能帮助到更多的朋(ji)友(lao).如有 ...
springboot审核功能怎么做_开发的微信小程序商城怎么利用分销功能做营销
现在很多客户开发小程序商城的情况,不仅是需要做在线支付,还要做分销功能等,因为这些方式可以帮助产品直接从生产商到消费者的转介,现在互联网这个发达,商家可以通过小程序分销商城借助好友关系进行传播,现在很 ...
微信小程序商城开发功能构架介绍
微信小程序商城开发,微信小程序商城开发功能,微信小程序商城开发介绍.截止到2021年末初手机微信小程序总数就早就超过400万,而且网络购物小程序愈来愈占有蛮大的占有率,而这类的小程序大家一般称作商城小 ...
微信小程序商城怎么在线制作
今天珍奶bb给大家简单唠唠微信小程序商城怎么在线制作的流程? 在唠微信小程序商城制作流程前,先给大家科普一下当前的实体经济环境是如何的?制作一个微信小程序商城是否存在它的必要性.不用看具体数据,就直接 ...
微信小程序商城开发的流程
今天珍奶bb给大家简单唠唠微信小程序商城开发的流程? 在唠微信小程序商城制作流程前,先给大家科普一下当前的实体经济环境是如何的?制作一个微信小程序商城是否存在它的必要性.不用看具体数据,就直接看我们身 ...
11-微信小程序商城分类和产品产品页面顶部切换功能（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
产品页面顶部切换功能本节主要讲解产品详细页面中顶部切换界面和功能的实现,效果如图13-9所示. 1.布局分析结构布局分析示意如图13-10所示. 根据上面的布局分析,我们会产生基础的框架,代码示例 ...
微信小程序商城项目实战(完结篇:意见反馈)
微信小程序商城项目完结意见反馈代码实现首先修改标题并且使用之前写好的tab组件编写界面编写样式逻辑处理js 效果图意见反馈做假的意见反馈,主要练习一下微信小程序文件上传api以及样式界 ...
h5app多功能商城源码可二开微信小程序商城开源版分享
基于ThinkPhp6.0+uniapp 开发的一套新零售商城系统.集客户关系管理+营销电商系统,能够真正帮助企业基于微信公众号.小程序.wap.pc等,实现会员管理.数据分析,精准营销的电子商务管理 ...

微信小程序商城篇（一）首页功能

微信小程序商城篇（一）首页功能相关推荐

最新文章

热门文章