微信小程序开发手机商城部分代码（不包括支付功能）

以下是我之前学习黑马程序员课程的微信小程序所写的代码除了支付功能都能实现。如果有错误的地方希望各位大佬能指正一下。

1.搜索框(searchinput)

#wxss
.search_input {height: 90rpx;padding: 10rpx;background-color: var(--themeColor);
}
.search_input navigator {height: 100%;display: flex;justify-content: center;align-items: center;background-color: #fff;border-radius: 15rpx;color: rgb(71, 69, 69);
}

2.小程序整体布局

#app.json
{"pages":["pages/index/index","pages/category/index","pages/goods_list/index","pages/goos_detail/index","pages/cart/index","pages/collect/index","pages/order/index","pages/search/index","pages/user/index","pages/feedback/index","pages/login/index","pages/auth/index","pages/pay/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#ffd68f","navigationBarTitleText": "Market","navigationBarTextStyle":"white"},"tabBar": {"color": "#999","selectedColor": "#0054ff","backgroundColor": "#fff1ff","position": "bottom","borderStyle":"black","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "icons/home.png","selectedIconPath": "icons/home_1.png"}, {"pagePath": "pages/category/index","text": "二手商城","iconPath": "icons/Category.png","selectedIconPath": "icons/Category_1.png" },{"pagePath": "pages/cart/index","text": "购物车","iconPath": "icons/cart.png","selectedIconPath": "icons/cart_1.png"},{"pagePath": "pages/user/index","text": "我的","iconPath": "icons/my.png","selectedIconPath": "icons/my_1.png"}]},"sitemapLocation": "sitemap.json"
}#app.wxss
@import"./styles/iconfont.wxss";
/* 在微信小程序中 不支持通配符 */
page,view,text,swiper,swiper-item,image,navigator{padding: 0; /*内边距*/margin: 0; /*外边距*/box-sizing: border-box;
}
/* 主题颜色 通过变量来实现1 less中 存在 变量 这个知识2 原生的css和wxss 也是支持变量
*/
page{/* 定义主题颜色 */ --themeColor:#ffd68f;/* 定义统一字体大小 假设设计稿 大小是 375px1px=2rpx*/font-size: 35rpx;}
#下面一行代码关系到后面的图片能否正常加载
image{width: 100%;
}

3.局内使用图标

#iconfont.wxss
@font-face {font-family: "iconfont"; /* Project id 3176877 */src: url('//at.alicdn.com/t/font_3176877_3aikrnlzpca.woff2?t=1646482273692') format('woff2'),url('//at.alicdn.com/t/font_3176877_3aikrnlzpca.woff?t=1646482273692') format('woff'),url('//at.alicdn.com/t/font_3176877_3aikrnlzpca.ttf?t=1646482273692') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-biaoqianlan:before {content: "\e609";
}.icon-tuanduizhaomu:before {content: "\e60d";
}.icon-ziyuanpingtai-ziyuangongxiang:before {content: "\e608";
}.icon-xuanchuan:before {content: "\e610";
}.icon-ershou:before {content: "\f619";
}.icon-icon_shoucang_xian:before {content: "\e604";
}.icon-icon_shoucang_mian:before {content: "\e616";
}.icon-daishouhuo:before {content: "\e641";
}.icon-tuikuan:before {content: "\e75a";
}.icon-shouye:before {content: "\e643";
}.icon-daifukuan:before {content: "\e640";
}.icon-dingdan:before {content: "\e897";
}.icon-gouwuche:before {content: "\e63f";
}.icon-kefu:before {content: "\e625";
}.icon-fenxiang:before {content: "\eb24";
}

4.封装接口

#asyncWx.js
/*** promise形式的getSetting*/
export const getSetting=()=>{return new Promise((resolve,reject)=>{wx.getSetting({success: (result)=>{resolve(result);},fail: (err)=>{reject(err);}});})
}
/**
* promise形式的chooseAddress
*/
export const chooseAddress=()=>{return new Promise((resolve,reject)=>{wx.chooseAddress({success: (result)=>{resolve(result);},fail: (err)=>{reject(err);}});})
}
/**
* promise形式的openSetting
*/
export const openSetting=()=>{return new Promise((resolve,reject)=>{wx.openSetting({success: (result)=>{resolve(result);},fail: (err)=>{reject(err);}});})
}
/**
* promise形式的 showModal
*/
export const showModal=({content})=>{return new Promise((resolve,reject)=>{wx.showModal({title: '提示',content: content,success :(res)=> {resolve(res);   },fail:(err)=>{reject(err);}})})
}
/**
* promise形式的 showToast
*/
export const showToast=({title})=>{return new Promise((resolve,reject)=>{wx.showToast({title: title,icon:'none',success :(res)=> {resolve(res);   },fail:(err)=>{reject(err);}})})
}
/**
* promise形式的 login
*/export const login=()=>{return new Promise((resolve,reject)=>{wx.login({timeout: 10000,success:(result)=>{resolve(result);},fail:(err)=>{reject(err);}});})
}/**
* promise形式的 小程序的微信支付
* @param{object} pay 支付所必要的参数
*/
export const requestPayment=(pay)=>{return new Promise((resolve,reject)=>{wx.requestPayment({...pay,success:(result) =>{resolve(result)             },fail:(err)=>{reject(err);}});})
}

5.首页（由于我并没有备份之前写的代码，我之前修改了首页的代码所以导致首页代码有缺失，体谅一下）

#index.js
// index.js
// 获取应用实例
// 0 引入 用来发送请求的方法 一定要把路径补全
import {request} from "../../request/index";
Page({data: {//轮播图数组swiperList:[],//导航 数组catesList:[],//楼层数组floorList:[]},onLoad: function (options){// 1 发送异步请求获取轮播图数据
//     wx.request({
//       url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
//       success:(result)=>{
//         this.setData({
//           swiperList:result.data.message
//         })
// //         console.log(result); //         }
//     });
this.getSwiperList();
this.getCateList();
this.getFloorList();
},
// 获取轮播图数据
getSwiperList(){request({url:"/home/swiperdata"})
.then(result=> {this.setData({swiperList:result.data.message})
})
},
// 获取 分类导航数组
getCateList(){request({url:"/home/catitems"})
.then(result=> {this.setData({catesList:result.data.message})
})
},
// 获取 楼层数组
getFloorList(){request({url:"/home/floordata"})
.then(result=> {this.setData({floorList:result.data.message})
})
},onReady:function(){},onShow:function(){},onHide:function(){},onUnload:function(){},onPullDownRefresh:function(){},onReachBottom:function(){},onShareAppMessage:function(){},onPageScroll:function(){},// item(index,pagepath,text)onTabItemTap:function(item){}
})#index.json
{"usingComponents": {"searchinput":"../../components/searchinput/search input"},"navigationBarTitleText": "优购天堂 "
}#index.wxml
<view class="yg_index">
<!-- 搜索框 开始 -->
<searchinput></searchinput>
<!-- 搜索框 结束 -->
<!-- 轮播图 开始 -->
<view class="index_swiper">
<!-- 1 swiper标签存在默认宽高 100%*150px2 image标签也存在默认的宽度和高度 320px*240px3 设计图片和轮播图 1 先看一下原图宽高 750*3402 让图片的高度自适应 宽度 等于 100%3 用swiper标签的高度  变成和图片一样的高度4 图片标签 mode属性 渲染模式widthfix 让图片标签宽高和图片标签的内容的宽高都等比例发生变化-->
<swiper autoplay indicator-dots circular >
<swiper-item
wx:for="{{swiperList}}"
wx:key="goods_id">
<navigator url="/pages/goos_detail/index?goods_id={{item.goods_id}}">
<image mode="widthFix" src="https://pic1.zhimg.com/v2-52086599c209dbabe98ac8844c8a0084_1440w.jpg?source=172ae18b"></image>
</navigator>
</swiper-item>
</swiper>
</view>
<!-- 轮播图 结束 --><!-- 导航 开始 -->
<view class="index_cate">
<navigator url="/pages/category/index"open-type="switchTab">
<view class="iconfont icon-ziyuanpingtai-ziyuangongxiang"></view>
<view class="cate_name">资源共享</view>
</navigator>
<navigator url="/pages/category/index" open-type="switchTab" >
<view class="iconfont icon-xuanchuan"></view>
<view class="cate_name">帮宣传</view>
</navigator>
<navigator url="/pages/category/index" open-type="switchTab" >
<view class="iconfont icon-ershou"></view>
<view class="cate_name">二手交易</view>
</navigator>
<navigator url="/pages/category/index" open-type="switchTab" >
<view class="iconfont icon-tuanduizhaomu"></view>
<view class="cate_name">团队招募</view>
</navigator>
</view>
<!-- 导航 结束 --><!-- 楼层 开始 -->
<view class="index_floor">
<view class="floor_group"
wx:for="{{floorList}}"
wx:for-item="item1"
wx:for-index="index1"
wx:key="floor_title"
>
<!-- 标题 -->
<view class="floor_title">
<image mode="widthFix" src="{{item1.floor_title.image_src}}"></image>
</view>
<!-- 内容 -->
<view class="floor_list">
<navigator
wx:for="{{item1.product_list}}"
wx:for-item="item2"
wx:for-index="index2"
wx:key="name"
url="/pages/goods_list/index?{{item2.navigator_url.join('?')[1]}}"
>
<image mode="{{index2===0? 'widthFix':'scaleTofill'}}"src="{{item2.image_src}}"></image>
</navigator>
</view>
</view>
</view>
<!-- 楼层 结束 -->
</view>#index.wxss
.index_swiper swiper {width: 750rpx;height: 340rpx;
}
.index_swiper image {width: 100%;
}
.index_cate {background-color: #fff;margin-top: 20rpx;padding: 20rpx;border-bottom: 1rpx solid #ccc;display: flex;
}
.index_cate navigator {padding: 15rpx 0;flex: 1;text-align: center;
}
.index_cate navigator .iconfont {color: var(--themeColor);
}
.index_floor .floor_group .floor_title  {padding:10rpx 0rpx;
}
.index_floor .floor_group .floor_title image {width: 110%;
}
.index_floor .floor_group .floor_list navigator {float: left; width: 33.33%;/* 后四个超链接*/
}
.index_floor .floor_group .floor_list navigator:nth-last-child(-n+4) {/* 原图的宽高 *//* 232/386=33.33vw/height *//* 第一张图片的高度 height:33.3vw*386/232 */height: 27.72711207vw;border-left:10rpx solid #fff;
}.index_floor .floor_group .floor_list navigator:nth-last-child(4){border-bottom:10rpx solid #fff;
}
.index_floor .floor_group .floor_list navigator:nth-last-child(3){border-bottom:10rpx solid #fff;
}.index_floor .floor_group .floor_list navigator image {width: 100%;height:100%;
}

微信小程序开发手机商城部分代码（不包括支付功能）相关推荐

基于微信小程序开发的商城系统
今天和大家分享下开发小程序商城的问题,现在微信小程序越来月得到广大开发者的使用,本项目为基于微信小程序开发的商城管理系统,系统的后台(及服务端,就是提供数据的)是基于ssh框架开发的一个独立的系统,管 ...
Python+微信小程序开发（二）代码构成和宿主环境
一.小程序代码构成在上一篇文章中,我们通过开发者工具载入模板快速创建了一个QuickStart项目.这个项目里边生成了不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 ...
小程序开发代码_快速学会微信小程序开发，无需懂代码！
现在想要制作自己的小程序的人越来越多,但大多数都不懂任何代码知识,不知该如何制作.其实随着各种第三方开发工具的出现,无需微信小程序开发源代码,小白也能顺利生成一个自己的小程序了.下面我就跟大家说下该如 ...
微信小程序开发（四）入门之打卡功能开发
相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言本篇文章将介绍打卡小程序打卡页面相关功能的 ...
微信小程序开发---购物商城系统。【详细业务需求描述+实现效果】
视频演示以下演示为手机真机录屏微信小程序商品系统功能演示 1.功能列表该微信商城系统实现的主要如下图所示 2.项目结构 zhengShop ├─ .eslintrc.js ├─ app.js ├ ...
微信小程序开发学习记录（一）：直播功能
微信小程序直播是最近上线的一个新功能,用了将近一天半的时间实现了用直播API去创建直播间,中间踩了很多坑(有的到现在也不是很明白为啥这样就可以那样就不行),网上有关直播功能的参考文章也比较少,所以这 ...
微信小程序开发（三）入门之创建打卡活动
相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(四)入门之打卡功能开发前言上篇介绍了日历打卡小程序发现页视图相关开发 ...
微信小程序开发工具介绍及安装（下）
开发工具的基本功能介绍微信小程序开发工具是一款强大的集成开发环境(IDE),旨在帮助开发者更便捷地创建.调试和发布微信小程序.它提供了丰富的功能和工具集,下面将对微信小程序开发工具的基本功能进行详细 ...
微信小程序开发一个小型商城（八、个人页面）
上一篇文章:微信小程序开发一个小型商城(七.支付页面) 在上方还是使用wx:if进行判断是否有登录的数据,有的话将数据当中的图片和名字渲染到页面当中,不存在的话使用一个登录按钮表示需要用户登录.往下分 ...
微信小程序开发一个小型商城（四、商品列表）
上一篇文章,微信小程序开发一个小型商城(三.商品分类设计) 在从上一个界面跳转过来,会看到商品列表这个界面:如下图所示: 页面分析:从上到下:分别是一个已经定义好的自定义组件,下面的综合,销量,也是一 ...

微信小程序开发手机商城部分代码（不包括支付功能）

微信小程序开发手机商城部分代码（不包括支付功能）相关推荐

最新文章

热门文章