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

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

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;
  /* 
  定义统一字体大小 假设设计稿 大小是 375px
  1px=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%*150px
  2 image标签也存在默认的宽度和高度 320px*240px
  3 设计图片和轮播图 
     1 先看一下原图宽高 750*340
     2 让图片的高度自适应 宽度 等于 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%;
}