优购商城项目 详细步骤流程

优购商城项目 详细步骤流程

一、准备的工作

1.文档

1. 写项目之前必须要有接口文档 准备工作接口文档是必不可少的
2. 参考文档我们还可以参考 小程序的开发文档、阿里巴巴字体 iconfont 、mdn…

2.项目的搭建

1.搭建项目目录的结构 相当于分模块的去放我们需要的文件 使项目的结构可以清晰明了

2.然后就是分析页面 搭建项目基本项目的页面 （有语义化的 名字可以很方便我们后期的维护 习惯的养成）

{
   
  "pages": [    //项目页面的路由信息
    "pages/index/index",
    "pages/category/index",
  ]}

引入项目中需要的字体图标库 并且可以保证全局引入 这样才可以在所有的页面使用

 - 打开阿⾥巴巴字体图标 ⽹站

     . 选择的图标 
     . 添加⾄项⽬ 
     . 下载到本地 
     . 将样式⽂件 由 css 修改为 wxss 
     . 在app.wxss⼩程序中引⼊ 

页面使用图标 对应的图标名称

3.项目的搭建

4.搭建项目的tabber 结构 参考 小程序 API 文档

5.请求数据的接口进行封装 这样就可以 不必要的重复的代码 http文件去封装

三个部分：
0ne：api.js ------------放接口地址集合 统一的整体的来管理

• module.exports={}导出 有多个地址 对象的形式导出
  

two：fach.js ----------------封装微信 网络请求模块 导出一个promis 实例对象 会接收三个形参 （url，data，method）
分别是 请求的路径、请求数据的参数、请求数据的方法
promis对象中的（resolve, reject） 分别代表成功和失败之后执行的回调函数

• 导出一个 Promise 对象实例 里面封装接口请求的方法用来重复使用
  

三、http.js --------- 封装请求的方法 首先需要 引入 fach.js 和 api.js 这样才可以进行完美的封装

• 为了减少重复 无用的代码 可设置基本路径的地址 baseUrl
  接口的理解 api ---- 接口 h8------ 版本号

let baseUrl = “https://api-hmugo-web.itheima.net/api/public/v1”

然后就是定义函数 分别请求对应的接口

需要值得注意的是 必须要在全局的app.js 中 全局的引入http 并且 全局的导出 这样在需要的页面 引入 才可以使用它获取
到数据 否则就会报错

到这里 差不多项目的基本准备工作就差不多真被完毕了 接下来就是 分析 各个页面之间的联系 并且 对组件进行拆分和封装

二、单个页面的逻辑 组件的拆分

1.首页页面

是我们看到的home 首页 搜索、轮播图、导航、和楼层都可以进行封装
子组件我们注册在 components 中
另外可以根据页面 json 中的

 {
   
  "component": true,   //来判断当前组件是否是子组件
  "usingComponents": {
   }
} 

我们在home 父组件页面 请求到轮播图的数据 首先 在api.js 中定义好 轮播图数据的路径
然后在http.js 中 请求数据 接口不需要参数的话就 不写参数 为空 请求的方法为get 统一导出后 在 父组件
home.js 中 我们要全局的引入我们封装的请求方法
在

* 生命周期函数--监听页面加载  的时候请求数据
  onLoad: function (options) {
   
    // 请求轮播图数据
    // /home/swiperdata
    app.http.banner().then(res => {
   
      // console.log(res)

数据保存到data中  
      this.setData({
   
        banner: res.data.message
      })
    })

并且需要我们传递给子组件

<!-- 轮播图的组件 -->
<w-swiper list="{
   {
   banner}}"></w-swiper>
<!-- 轮播图的组件 -->

使用自定义属性的方法
在子组件js来接收数据

properties:{
   
list:{
   
type:Array 
}
}

接收数据 并且可以 定义数据类型 和默认数据

然后在页面中渲染我们接受到的数据

 <swiper autoplay="true" indicator-dots="true" indicator-color="pink" class="tops-s">  
  <block wx:for="{
   {
   list}}" wx:key="index">
  <swiper-item>
      <image src="{
   {
   item.image_src}}"></image>
  </swiper-item>
</block>
</swiper> 

可以参考 小程序API 文档来对
来实现轮播图的效果 导航部分 和 楼层部分也是一样的流程 父传子 只需要
对页面进行css的样式进行修改

2.分类页面

首先一眼页面是分为左右两部分 右边是侧边导航 左边是数据的渲染 也是一个二级导航的效果 首先根据接口 请求到数据

数据拿到之后进分析 只有对数据最够 明白才能让我们更快更好的的完成页面
这边 拿到的数据是 先渲染左边的侧边导航栏 然后我们给侧边导航地每一项一个点击事件 change

  <view class="lefts" wx:for="{
   {
   srot}}" wx:key="index">
  <view  bindtap="change" data-index="{
   {
   index}}">
    {
   {
   item.cat_name}}
  </view>
</view>

并且使用自定义属性 data-index="{ {index}}" 把他的下标传递过去
在js 页面

  // 方法
  change(e) {
   
    // 保存点击的下标    ---
    this.setData({
   
      i: e.currentTarget.dataset.index
    });
    // 根据 保持的·下标来获取右边的数据
    this.setData({
   
      tabs: this.data.srot[this.data.i].children
    })
    // tabs:this.data.srot[this.data.i].children[0].children
    // console.log(this.data.tabs);

},
通过e 事件源 来保存下来 我们点击的每一项数据的下标

然后 把符合当前下标的数据 的children 中的数据保存下来 这样就可以实现 点击左边的哪一项 切换到哪一项的数据 了，因为
拿到的数据结构就是 每一下项数据里面都有自己的children 右边展示的也是根据左边的数据而展示他的children的

3.列表页面

<!-- 右边的部分图 -->

<view class="con" wx:for="{
   {
   item.children}}" 
wx:key="index"   data-cid="{
   {
   item.cat_id}}" bindtap="gotolist">

```css
  <data-cid=