微信小程序学习笔记（三）-- 首页及详情页开发

一、常用组件

在上一个章节中讲解了封装请求数据的模块，在此处请求轮播图的数据

1.首页轮播图数据的请求以及渲染

1.1 轮播图数据的请求 pages/home/home.js

import { request } from './../../utils/index.js'
Page({

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    request('/api/pro/banner').then(data => {
      console.log(data)
      // 微信小程序修改数据的方式
      this.setData({
        bannerlist: data.data
      })
    })
  },
})

2 使用组件 - 视图容器 - swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。属性表如下

img

在pages/home/home.wxml文件中输入如下代码查看效果

<!--pages/home/home.wxml-->
<swiper
  indicator-dots="{{true}}" autoplay="{{true}}" circular="{{true}}" 
  duration="{{500}}">
  <block wx:for="{{bannerlist}}" wx:key="index">
    <swiper-item >
      <image src="{{'http://daxun.kuboy.top' + item}}"></image>
    </swiper-item>
  </block>
</swiper>
<prolist></prolist>

二、自定义组件 - 产品列表

1.自定义组件的布局

components/prolist/prolist.wxml

<view class="prolist">
  <view class="proitem">
    <view class="itemimg">
      <image class="img" src=""></image>
    </view>
    <view class="iteminfo">
      <view class="title">
        产品名称
      </view>
      <view class="price">
        ￥199
      </view>
    </view>
  </view>
</view>

2.自定义组件的样式

components/prolist/prolist.wxss

/* components/prolist/prolist.wxss */
.prolist .proitem{
 width: 100%;
 display: flex;
 height: 100px;
 box-sizing: border-box;
 border-bottom: 1px solid #ccc;
}

.prolist .proitem .itemimg{
 width: 100px;
 height: 100px;
 padding: 5px;
}

.prolist .proitem .itemimg .img{
 width: 90px;
 height: 90px;
 box-sizing: border-box;
 border: 1px solid #ccc;
}

.prolist .proitem .iteminfo {
 padding: 3px;
}

.prolist .proitem .iteminfo .title{
 font-size: 18px;
 font-weight: bold;
}

.prolist .proitem .iteminfo .price{
 font-size: 12px;
}

3.首页请求数据，并且传递给子组件

pages/home/home.js

import { request } from './../../utils/index.js'
Page({

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    request('/api/pro').then(data => {
      console.log(data)
      // 微信小程序修改数据的方式
      this.setData({
        prolist: data.data
      })
    })
  },
})

pages/home/home.wxml

<prolist prolist="{{prolist}}"></prolist>

4.子组件接收数据

components/prolist/prolist.js

Component({
 /**
 * 组件的属性列表
 */
 properties: {
 prolist: Array
 },
})

5.子组件渲染数据

components/prolist/prolist.wxml

<view class="prolist">
  <view class="proitem" wx:for="{{prolist}}" wx:key="item.proid">
    <view class="itemimg">
      <image class="img" src="{{item.proimg}}"></image>
    </view>
    <view class="iteminfo">
      <view class="title">
        {{item.proname}}
      </view>
      <view class="price">
        ￥{{item.price}}
      </view>
    </view>
  </view>
</view>

三、实现下拉刷新上拉加载

1.开启首页的下拉刷新功能

pages/home/home.json

// pages/home/home.js
import { request } from './../../utils/index.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    bannerlist: [],
    prolist: [],
    pageCode: 1 // 页码
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    request('/api/pro/banner').then(data => {
      console.log(data)
      this.setData({
        bannerlist: data.data
      })
    })

    request('/api/pro').then(data => {
      console.log(data)
      this.setData({
        prolist: data.data
      })
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    request('/api/pro').then(data => {
      console.log(data)
      this.setData({
        prolist: data.data,
        pageCode: 1
      })
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    let num = this.data.pageCode;
    let prolist = this.data.prolist
    num++;
    console.log(num)
    request('/api/pro', {
      pageCode: num
    }).then(data => {
      // 此处注意临界值的变化 --  没有数据
      this.setData({
        prolist: [...prolist, ...data.data],
        pageCode: num
      })
    })
  }
})

上拉下拉测试即可

四、返回顶部功能实现

在首页中设置一个固定定位的按钮，然后绑定点击事件，绑定事件使用 bindtap，然后调用小程序提供的api即可返回

// pages/home/home.wxml
<view class="backtop" bindtap="backtop"> ↑ </view>

// pages/home/home.wxss
.backtop {
  position: fixed;
  bottom: 10px;
  right: 8px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 18px;
  text-align: center;
  line-height: 30px;
}

// pages/home/home.js
Page({
  /**
   * 自定义函数
   */
  backtop: function () {
    // 小程序api 的界面 - 滚动
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 300
    })
  }
})

五、实现点击商品列表进入产品的详情页面

1.构建详情页面

app.json

"pages": [
  "pages/detail/detail"
],

2.声明式导航跳转

使用小程序组件-导航-navigator

页面链接。

img

open-type 的合法值 -- 在编程式导航中详细讲解

img

// components/prolist/prolist.wxml
<view class="prolist">
  <navigator url="{{'/pages/detail/detail?proid=' + item.proid}}" wx:for="{{prolist}}" wx:key="item.proid">
    <view class="proitem" >
      <view class="itemimg">
        <image class="img" src="{{item.proimg}}"></image>
      </view>
      <view class="iteminfo">
        <view class="title">
          {{item.proname}}
        </view>
        <view class="price">
          ￥{{item.price}}
        </view>
      </view>
    </view>
  </navigator>
</view>

3.详情页面接收数据并且渲染数据

// pages/detail/detail.js
import { request } from './../../utils/index.js';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    proid: '',
    proname: '',
    proimg: ''
    price: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // options为接收的参数
    const { proid } = options
    request('/api/pro/detail?proid=' + proid).then(data => {
      console.log(data.data)
      const { proid, proname, price, proimg} = data.data
      this.setData({
        proid, proname, price, proimg
      })
    })
  }
})

// pages/detail/detail.wxml

<image src="{{proimg}}" style="width: 100px;height: 100px;"></image>
<view>{{proname}}</view>
<view>￥{{price}}</view>

点击不同的产品测试即可

4.编程式导航渲染

使用小程序提供的api实现编程式路由的跳转

wx.switchTab(Object object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.reLaunch(Object object)

关闭所有页面，打开到应用内的某个页面

wx.redirectTo(Object object)

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

wx.navigateTo(Object object)

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层

wx.navigateBack(Object object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层

小程序传递数据使用 data-params形式，可以在事件中根据event获取该参数

// components/prolist/prolist.wxml
<view class="prolist">
  <view class="proitem" bindtap="toDetail" data-proid="{{item.proid}}" wx:for="{{prolist}}" wx:key="item.proid">
    <view class="itemimg">
      <image class="img" src="{{item.proimg}}"></image>
    </view>
    <view class="iteminfo">
      <view class="title">
        {{item.proname}}
      </view>
      <view class="price">
        ￥{{item.price}}
      </view>
    </view>
  </view>
</view>

// components/prolist/prolist.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    prolist: Array
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    toDetail (event) {
      const { proid } = event.currentTarget.dataset
      wx.navigateTo({
        url: '/pages/detail/detail?proid=' + proid
      })
    }
  }
})