花坊项目笔记

1.1项目概述

慕尚花坊是⼀款同城鲜花订购 的小程序，项目常用功能模块分为项目首页、商品分类、商品列表、商品详情、用户管理、收货地址、购物车、结算支付和订单管理等等。

1.2项目技术栈

小程序内置组件：采用小程序内置组件，结合 Vant 组件库实现⻚⾯结构的搭建

项⽬中使⽤了 css 拓展语言 Scss 绘制页面的结构。

小程序内置API：交互、支付、文件上传、地图定位、网络请求、预览图片、本地存储等。

小程序分包加载：降低⼩程序的启动时间、包的体积，提升⽤户体验度。

小程序组件开发：将页面内的功能模块抽象成⾃定义组件，实现代码的复⽤。

网络请求封装：request 方法封装、快捷⽅式封装、响应拦截器、请求拦截器。

骨架屏组件：利⽤开发者⼯具提供了⾃动⽣成⻣架屏代码的能力，提⾼了整体使用体验和用户满意 度。

UI 组件库：使用 Vant 组件库实现小程序 结构的绘制。 

LBS ：使⽤腾讯地图服务进行 LBS逆地址解析，实现选择收货地址功能。

miniprogram-licia ：使用 licia 进行函数的防抖节流。

async-validator ：使用async-validator 实现表单验证。

miniprogram-computed : 使用 miniprogram-computed 进行计算属性功能。

mobx-miniprogram ：使用 mobx-miniprogram 进行项目状态的管理。

   

二，项目初始化

1.创建项目

在微信开发者⼯具的开始界⾯左侧检查项⽬类型，需要为 [⼩程序]。
然后在右侧点击 [+] 开始新建项⽬。
最后在弹出的界⾯中输⼊项⽬相关的信息，点击确定即可。

         

项⽬初始化 重置

app.js 中的代码

   // app.js：小程序的项目入口文件// app.js：小程序的项目入口文件
App({
  
})
删除 app.json 中 pages 下的 "rendererOptions" 以及 "componentFramework" 字段。

删除 app.json 中 pages 下的 "pages/logs/logs" 路径，同时删除 pages/logs ⽂件夹。

⾃定义构建
（1）⾸先在project.config.json 配置 miniprogramRoot 选项，指定⼩程序源码的⽬录。

（2）然后配置 project.config.json 的 setting.packNpmManually 为 true。

（3）初始化项⽬。

（4）终端中输入  npm init -y
（5）最后配置 project.config.json 的 setting.packNpmRelationList 项，指定 packageJsonPath 和
miniprogramNpmDistDir 的位置。

（6）安装 vant ，然后进⾏ npm 构建 ，测试是否能够正常 vant 构建成功。
         输入  npm i @vant/weapp
（7）“⼯具”-“构建npm”。
b：集成 Sass
（1）在 project.config.json ⽂件中，修改 setting 下的 useCompilerPlugins 字段为 ["sass"] ，即可开 启⼯具内置的 sass 编译插件。

（2）更改wxss后缀名为sass

完成商品列表页面
<view class="container">
<!-- 商品列表区域 -->
  <view class="goods-list">
    <block>
      <goods-card></goods-card>
      <goods-card></goods-card>
      <goods-card></goods-card>
      <goods-card></goods-card>
    </block>
  </view>
  <!-- 文字区域 -->
  <!-- hidden属性控制文字的显示与隐藏 -->
  <!-- 当数据加载完毕，isFinsh为trun，!isFinsh为false，则这句话不隐藏，用户能看到这句话 -->
  <view class="finish" hidden="{{ !isFinsh}}">数据加载完毕</view>
</view>

配置在list.json文件

{
  "component": true,
  "usingComponents": {
    "goods-card": "../../components/goods-card/goods-card"
  },
  "navigationBarTitleText": "商品列表"
}

配置在list.scss文件

.container {
 
  .goods-list {
    padding: 15rpx;
    display: flex;
    //设置换行
    flex-wrap: wrap;
    //设置元素在主轴上的排列方式
    justify-content: space-between;
  }
 
  .finish {
    // 文本居中对齐
    text-align: center;
    font-size: 25rpx;
    color: green;
    line-height: 70rpx;
    border-top: 1px solid black;
  }
}

完成商品列表⻚⾯

<!-- 商品列表组件 -->

<view class="goods_container">

    <!-- 标题 -->

    <view class="goods_title">{{title}}</view>

    <!-- 列表区域 -->

    <view class="goods_card_list">

        <block wx:for="{{ 4 }}" wx:key="index">

            <goods-card />

        </block>

    </view>

    <!-- 查看更多 -->

    <view class="goods_more">

        <navigator url="" class="goods_more_btn">

            查看更多

        </navigator>

    </view>

</view>

.goods_container {

    width: 95%;

    margin: 0 auto;

    .goods_title {

        // 设置文本居中

        text-align: center;

        font-size: 48rpx;

        font-weight: bold;

        padding: 20rpx 0 0 0;

    }

    .goods_card_list {

 display: flex;

        // 设置换行

        flex-wrap: wrap;

        // 设置元素在主轴上的排列方式

        justify-content: space-between;

    }

    .goods_more_btn {

        height: 40px;

        width: 95%;

        background-color: white;

        border-radius: 20px;

        margin:0 auto;

        // 以下三句话设置元素垂直居中显示

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .goods_more {

        margin: 10px 0 0 0;

    }

}

Component({

    // 组件的属性列表

    properties: {

        // 声明需要从父组件传title值。

       title:{

           type:String,

           value:'',

       }

    }

})

{

    "usingComponents": {

        "goods-card":"../goods-card/goods-card"

    },

    "component": true

  }

通⽤模块封装
5.1：消息提示模块封装
在进⾏项⽬开发的时候，我们经常的会频繁的使⽤到⼀些 API，例如： wx.showToast()
1：wx.showToast()基本使⽤
wx.showToast() 消息提示框是在项⽬中频繁使⽤的⼀个⼩程序 API ，常⽤来给⽤户进⾏消息提示反 馈。使⽤⽅式如下：
// app.js
App({
// ⻚⾯显示⽣命周期函数
  onShow(){
  wx.showToast({
  title: '消息提示框', // 提示的内容
  icon: 'success', // 提示的图标，success(成功)、error(失败)、loading(加
  载)、none(不显示图标)
  duration: 2000, // 提示的延迟时间
  mask: true // 是否显示透明蒙层，防⽌触摸穿透
 })
}

// ⽣命周期函数
// 在使⽤Page()构造⻚⾯时，需要使⽤⽣命周期函数。
// onLoad:⻚⾯加载时⽣命周期函数。
// onShow:⻚⾯显示⽣命周期函数。每次打开⻚⾯时都会调⽤⼀次。⻚⾯显示/切⼊前台前触发。
// onReady:⻚⾯初次渲染完成⽣命周期函数。⻚⾯初次渲染完成时触发。
// onHide:⻚⾯隐藏⽣命周期函数。如⻚⾯之间跳转或通过底部Tab切换到其他⻚⾯，⼩程序切⼊后

台。
// onUnload:⻚⾯卸载⽣命周期函数。⻚⾯卸载时触发，如⻚⾯跳转或者返回到之前的⻚⾯时。

})

为什么要进⾏模块封装
如果每次使⽤的时候，都直接调⽤这些 API ，会导致代码很冗余，为了减少了代码冗余，我们需要将
这些 API 封装成公共⽅法。
3：封装思路
a：创建⼀个 toast ⽅法对 wx.showToast() ⽅法进⾏封装
b：调⽤该⽅法时，传递对象作为参数
     如果没有传递任何参数，设置⼀个空对象 {} 作为默认参数
     从对象中包含 title 、 icon 、 duration 、 mask 参数，并给参数设置默认值
const toast = ({ title = " 数据加载中 " , icon = "none" , duration = 2000 , mask = true } = {}) => {
  wx . showToast ({
  title ,
  icon ,
  duration ,
  mask
  })
  }
c：在需要显示弹出框的时候调⽤ toast ⽅法，并传⼊相关的参数，有两种参数⽅式：
     不传递参数，使⽤默认参值
     传⼊部分参数，覆盖默认的参数