小程序项目开发笔记

目录

1、项目初始化及目录和页面划分

2、网络请求的封装 Promise

3、轮播图效果展示及封装 swiper

4、推荐数据效果展示及封装 recommend

5、自定义控制组件 — tab-control

6、商品的数据模型设计及数据请求

---

1、项目初始化及目录和页面划分

1.1、新建项目：使用微信开发者工具创建项目，并将其链接到远程 gitHub 仓库。具体步骤可以参考这里：传送门

1.2、划分项目目录：一般情况下需要新建几个文件夹：assets、components、pages、service、utils。

1.3、创建项目页面：到 app.json 文件的 pages 数组写上新建的文件路径，ctrl + s 即可一键创建多个界面，比如：

"pages":[
    "pages/home/home",
    "pages/profile/profile"
]

1.4、项目页面划分：tabbar 配置需到 app.json 文件中的 pages 数组后写上 tabBar 对象，代码如下：

"tabBar":{
    "selectedColor": "#229DDD",    //配置tabbar上分栏被选中状态的文字颜色
    "list": [                      //tabbar里至少要写两个页面对象
        {
            "pagePath": "pages/home/home",        //页面路径
            "text": "首页",                       //tabbar分栏文字
            "iconPath": "assets/images/tabbar/home.png",                  //tabbar分栏图片
            "selectedIconPath": "assets/images/tabbar/home_active.png"    //tabbar分栏选中时图片
        }
    ]
}

1.5、导航栏配置：需到 app.json 文件中的 tabBar 对象后写上 window 对象，代码如下：

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#82C7EC", //导航条背景颜色
    //"navigationBarTitleText": "首页",  //导航条title文字，该属性最好不要在这里设置，因为每个页面的导航条显示的文字不同
    "navigationBarTextStyle": "black",  //导航条文字颜色                      最好到每个页面的json文件中进行单独设置
    "enablePullDownRefresh": false,     //是否可以下拉刷新
    "backgroundColor": "#eeeeee"        //下拉刷新时下拉区域的颜色
}

2、网络请求的封装 Promise

项目中的图片和数据一般会放到服务器上，因此在展示数据之前需要先拿到数据，这个时候就需要在页面加载（onLoad()）时发送网络请求，为了避免在每个页面都使用 wx.request() 方法，使项目和该方法的耦合度太高，就需要对网络请求的方法进行封装：在新建的 service 文件夹下新建 network.js 文件，还可以提取 baseURL、timeout 公共变量到 config.js 文件中方便后期维护。

除此之外，每个页面请求的数据最好分开，比如 home 页面需要请求的数据的方法，最好定义在 service 文件夹下新建 home.js 文件中，需要引用 network.js 组件，具体代码如下：关于网络封装思想，可以看一下这篇博客：传送门

//service/config.js
const baseURL = 'http://127.0.0.1:8000';
const timeout = 5000;
 
//service/network.js
import {baseURL,timeout} from './config.js'
export default function(options){
  return new Promise((resolve,reject) => {
    wx.request({
      url: baseURL + options.url,
      timeout: timeout,
      method: options.url || 'get',
      data: options.data || {},
      success: resolve,
      fail: function(){ console.log('发送网络请求失败'); }
    })
  })
}
 
//service/home.js
import request from './network.js'
export function getMultiData() {
  return request({
    url: '/home/multidata'
  })
}
 
// pages/home/home.js
import { getMultiData } from '../../service/home.js'
Page({
  data: { banners:[] },
  onLoad: function (options) {
    //请求图片及数据
    getMultiData().then(res => {
      const banners = res.data.banner.list;
      this.setData({    //将banners数据放到data中
        banners:banners
      })
    })
  }
})

3、轮播图效果展示及封装 swiper

小程序官方文档提供了 swiper 标签，搭配 swiper-item 标签可以实现轮播图的效果，详情参考官方文档：传送门

为了首页代码的清晰和方便后期的维护，在 home.wxml 中写轮播图的全部代码会显得略多，我们可以试着将轮播图封装成一个 component 组件，这样在 home.wxml 文件中只需要引用封装好的组件标签，再将需要展示的数据传递给封装好的轮播组件即可。

<!--pages/home/home.wxml、展示轮播图、此时未封装-->
<swiper class='swiper' circular autoplay interval="3000" indicator-dots indicator-active-color="#ff5777">
  <block wx:for="{{banners}}" wx:key="{{index}}">
    <swiper-item class='swiper-item'>
      <image src="{{item.image}}" mode="widthFix"></image>
    </swiper-item>
  </block>
</swiper>

<!--以上代码可以封装起来，新建一个swiper的component组件，代码如下-->
<!--components/w-swiper/w-swiper.wxml、将轮播图进行封装-->
<swiper class='swiper' circular autoplay interval="3000" indicator-dots indicator-active-color="#ff5777">
  <block wx:for="{{list}}" wx:key="{{index}}">    <!--展示首页传递过来的banners数据-->
    <swiper-item class='swiper-item'>
      <image src="{{item.image}}" mode="widthFix"></image>    <!--widthFix保持原宽高比-->
    </swiper-item>
  </block>
</swiper>
<!--components/w-swiper/w-swiper.wxml.wxss-->
.swiper-item image{
    width:100%
}
<!--components/w-swiper/w-swiper.js-->
Component({
  properties: {    <!--接收首页传递过来的banners数据-->
    list:{
      type:Array,
      value:[]
    }
  }
})
<!--pages/home/home.wxml、轮播图封装后的使用-->
<w-swiper list="{{banners}}"></w-swiper>    <!--将banners数据传递给轮播组件--->
<!--pages/home/home.json、轮播图封装后的使用需要注册-->
{
  "usingComponents": {
    "w-swiper":"/components/w-swiper/w-swiper"
  },
  "navigationBarTitleText": "这里是单个页面的导航文字"
}

4、推荐数据效果展示及封装 recommend

封装组件还有一个好处，就是当项目功能越来越多页面需要展示的数据越来越丰富时，页面引用封装组件的占位符就会显得代码及其清晰，方便后期的维护。封装组件时如果该组件具有复用性，推荐封装到 component 文件加下，如果复用性不高，推荐在当前页面下新建一个 childCpns 文件夹存放封装的组件。

<!--pages/home/home.wxml-->
<w-swiper list="{{banners}}"></w-swiper>    <!-- 展示轮播图 -->

<view class='recommend'>                    <!-- 推荐数据展示-->
  <block wx:for="{{recommends}}" wx:key="{{key}}">
    <view class='recommend-item'>
      <image src="{{item.image}}" bindload='onImageLoad'/>
      <view><text>{{item.title}}</text></view>
    </view>
  </block>
</view>

<!--以上代码可以封装起来，新建一个recommend的component组件，代码如下-->
<!--pages/home/childCpns/w-recommend/w-recommend.wxml、将推荐数据进行封装-->
<view class='recommend'>
  <block wx:for="{{recommends}}" wx:key="{{key}}">
    <view class='recommend-item'>
      <image src="{{item.image}}" bindload='onImageLoad'/>
      <view><text>{{item.title}}</text></view>
    </view>
  </block>
</view>
<!--pages/home/childCpns/w-recommend/w-recommend.js-->
Component({
  properties: {    <!--接收首页传递过来的banners数据-->
    recommends:{
      type:Array,
      value:[]
    }
  }
})
<!--pages/home/childCpns/w-recommend/w-recommend.wxss-->
.recommend {                            .recommend-item {
  display: flex;                            flex: 1;
  margin-top: 40rpx;                        text-align: center;
  padding-bottom: 40rpx;                }
  border-bottom: 16rpx solid #eee;
}
.recommend-item image {        .recommend-item text {
  width: 160rpx;                   font-size: 28rpx;
  height: 160rpx;              }
}
<!--pages/home/home.json、推荐数据封装后的使用需要注册-->
{
  "usingComponents": {
    "w-swiper":"/components/w-swiper/w-swiper",
    "w-recommend": "/pages/home/childCpns/w-recommend/w-recommend"
  },
  "navigationBarTitleText": "这里是单个页面的导航文字"
}
<!--pages/home/home.wxml-->
<w-swiper list="{{banners}}"></w-swiper>    <!-- 展示轮播图 -->
<w-recommend recommends="{{recommends}}"/>    <!-- 推荐数据展示、注意单标签加尾/-->

5、自定义控制组件 — tab-control

开发一个 tabcontrol 自定义控制导航组件，如下图所示，为了提高该组件的复用性，要求导航中的文字不能在组件中写死，而是由外界页面传递进去的，而且在点击该组件时需要向外界发送自定义事件，告知外界页面导航中的哪个模块被点击了。

开发前准备：需要在根目录下新建 components\tab-control 组件，tab-control 组件的 json 文件中，有一个 "component"：true 标识，只有加上这行代码，当前的文件夹才是一个组件。然后到 home.json 文件中对该组件进行注册：{"usingComponents"：{"tab-control"：/component/tab-control/tab-control}}，然后再到 home.wxml 通过 <tab-control> 标签对其进行引用。

<!--components/tab-control/tab-control.wxml-->
<view class='tab-control'>
  <block wx:for="{{titles}}" wx:key="{{index}}">
    <view class='tab-item {{currentIndex==index ? "active" : ""}}' bindtap="handleItemClick" data-index="index">
      <text>{{item}}</text>
    </view>
  </block>
</view>
<!--components/tab-control/tab-control.wxss-->
.tab-control{              .tab-item{                .active{         .active text{
    display:flex;              flex:1;                   color:red;       border-bottom:6rpx solid red;
    height:88rpx;              text-align:center;    }                    padding:26rpx 16rpx;
    line-height:88rpx;     }                                          }
}
<!--components/tab-control/tab-control.js-->              <!--components/tab-control/tab-control.json-->
Component({                                               {
    properties:{  <!--接收home.wxml中传递过来的值-->            "component":true
        titles:{                                          }
            type:Array,
            value:[]
        }
    },
    data:{ currentIndex:0 }
    methods:{
        handleItemclick(event){
            const index = event.currentTarget.dataset.index;    <!--取出index -->
            this.setData({ currentIndex:index; });              <!--修改currentIndex-->
            <!--通知页面内部的点击事件-->
            this.triggerEvent('itemclick',{index,title:this.properties.titles[index]},{});
        }
    }
}
-----------------------------------------------------------------------------------------------------------------
<!--pages/home/home.json-->
"usingComponents":{ "tab-control":"/components/tab-control/tab-control" }
<!--pages/home/home.wxml-->
<tab-control titles="{{titles}}" bind:itemclick="handleTabClick"/>
<!--pages/home/home.js-->
Page({
    data:{titles: ['流行','新款','精选']},
    handleTabClick(event){
        console.log(event);    <!--通过event对象内的detail可以拿到子组件传递过来的payload参数-->
    }
})

6、商品的数据模型设计及数据请求

//数据模型的设计
goods:{
    'new':{page:0,list:[]},
    'pop':{page:0,list:[]},
    'sell':{page:0,list:[]},
}