微信小程序优购商城项目

这篇文章主要就是把我写的优购商城进行简单的说明，希望可以对大家有所帮助

1.先配置页面

在app.json中设置所需要的页面路径

2.然后再封装我们需要的组件和wx.request

wx.request可以不封装，但是封装可以减少重复代码，写起来也比较方便
axios就是我封装的http文件，名字叫什么都可以

2-1 api.js代码

代码是导出需要的接口路径，

module.exports={
   
  "swiber":"/home/swiperdata",
}

2-2 request.js代码

封装wx.reuqest方法并导出

//url>>>路径  data>>>接口需要的参数   method>>>接口使用的方法 get 或者 post
  module.exports = (url, data, method) => {
   
    return new Promise((resolve,reject) => {
   
      wx.request({
   
        url: url,
        data: data,
        method: method,
        success(res) {
   
        //成功回调 返回参数
            resolve(res)
        },
        fail(err){
   
        //失败回调
          reject(err)
        }
      })
    })
  }

2-3axios.js文件

封装好之后下使用需要在全局注册，

//将封装好的api和request导入使用
var api = require('../http/api')
var req = require('../http/request')
//接口路径前缀
let baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1"
//请求轮播图数据
function swiper() {
   
  return req(baseUrl + api.swiber, {
   }, "get")
}
//将方法导出
module.exports = {
   
  swiper,
}

2-4全局注册并在组件使用

在根目录下app.js引入axios

// app.js
//引入axios
let axios = require('./http/axios')
App({
   
  onLaunch() {
   
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  globalData: {
   
    userInfo: null
  },
  //注册成全局的方法
  axios,
}
)

2-5最后在页面使用

// pages/index/index.js
//保存app实例
var app = getApp()
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    banner: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
  //使用封装的axios接口进行请求数据
    app.axios.swiper().then(res => {
   
      let banner = res.data.message，
      //请求成功将数据保存给data以便在页面使用
      this.setData({
    banner })
    })
    })
  },
})

到这里我们的axios就介绍完了，没什么难处，可能头几次有点不知道过程，多写几次就OK了！
接下来说一下我们项目开发的过程，一些相对容易写的我就说的简单一点，重点说清楚！

2首页的数据

首页功能感觉是最简单的，请求数据然后渲染出来就ok了，接口都不需要传参数， 还有上边的搜索，忘记标出来了，他就是个按钮，点击后跳转到另一个搜索页面进行搜索，根据input输入框里边输入的关键字进行搜索，将关键字传入到接口就会返回相关的数据，最下边有搜索的代码*

// pages/search/search.js
var app = getApp()
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
  //input输入框的值
    uu: ""
  },
  //手写的双向数据绑定
  sss(e) {
   
    this.setData({
   
      uu: e.detail.value
    })
    //e.detail.value是input的关键字，将数据传到接口中返回的就是根据关键字所返回的数据，然后渲染到页面就ok
    app.axios.search(e.detail.value).then(res => {
   
      this.setData({
   
        list:res.data.message
      })
    })
  },
  deta(e){
   
    wx.navigateTo({
   
      url: '/pages/goods_detail/goods_detail?goods_id='+e.currentTarget.dataset.id,
    })
  },
})

3.分类页面的实现

写完首页来实现我们的分类页面
分别是左右两个组件
使用的是小程序自带的标签加上scroll-y="true"属性就可以实现上下滚动，下边上代码

// pages/category/category.js
//使用app实例
var app = getApp()
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    scrol_list: [],
    scol_right: [],
    erjilist: [],
    index: 0,
    id: -1,
    shoplist: [],
  },
	//保存左侧竖向导航的下标等下用来写tab切换的样式
  emic(e) {
   
    this.setData({
   
      index: e.currentTarget.dataset.index,
    })
    //右侧分类渲染的首层数据
    this.setData({
   
      scol_right: this.data.scrol_list[this.data.index].children
    })
  },
  //跳转到商品列表然后将id传到商品列表页面
  gotoid(e) {
   
      wx.navigateTo({
   
        url: `/pages/goods_list/goods_list?cid=  ${
     e.currentTarget.dataset.id}}`
      })
    // })
  }
  ,
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
  //页面首次加载获取到数据保存
    app.axios.scrol_list().then(res => {
   
      this.setData({
   
        scrol_list: res.data.message
      })
      // console.log(this.data.scrol_list);
      this.setData({
   
        scol_right: res.data.message[this.data.index].children,
      })
    })
  },
})

这里数据获取没什么难的，我写的时候遇到的问题在wxml！！
他的右侧数据渲染有点绕，渲染的时候有点让我挠头
看代码

<sear></sear>
<view class="boxss">
  <scroll-view style="width:20%;height:100%" scroll-y="true">
    <!--components/scrol_list/scrol_list.wxml-->
    <view style="display:flex">
      <view style="width:220rpx">
        <block wx:for="{
   {scrol_list}}" wx:key="index" wx:for-index="ins">
          <view class="{
   {index==ins ? 'bgs' : ''}}" style="width:100%;height:82rpx;text-align:center;line-height:82rpx"
            data-index="{
   {ins}}" bindtap="emic">
            {
   {
   item.cat_name}}
          </view>
        </block>
      </view>
    </view>
  </scroll-view>
  //这里是右侧数据
  <scroll-view style="width:80%" scroll-y="true">
    <!--components/scrol_view/scrol_view.wxml-->
    <view style="width:100%">
    //第一层循环。是分类的标题  电视  空调之类的
      <view wx:for="{
   {scol_right}}" wx:key="index" style="width:100%;margin-botttom:10rpx">
        <view style="width:100%;text-align:center;margin-botttom:40rpx;margin-top:20rpx">/ {
   {
   item.cat_name