逆戰：微信小程序開發（二）

一、常用組件

在上一個章節中講解了封裝請求數據的模塊，在此處請求輪播圖的數據

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組件，否則會導致未定義的行為。
屬性表如下

屬性	類型	默認值	必填	說明	最低版本
indicator-dots	boolean	false	否	是否顯示面板指示點	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示點顏色	1.1.0
indicator-active-color	color	#000000	否	當前選中的指示點顏色	1.1.0
autoplay	boolean	false	否	是否自動切換	1.0.0
current	number	0	否	當前所在滑塊的 index	1.0.0
interval	number	5000	否	自動切換時間間隔	1.0.0
duration	number	500	否	滑動動畫時長	1.0.0
circular	boolean	false	否	是否采用銜接滑動	1.0.0
vertical	boolean	false	否	滑動方向是否為縱向	1.0.0
previous-margin	string	"0px"	否	前邊距，可用於露出前一項的一小部分，接受 px 和 rpx 值	1.9.0
next-margin	string	"0px"	否	后邊距，可用於露出后一項的一小部分，接受 px 和 rpx 值	1.9.0
display-multiple-items	number	1	否	同時顯示的滑塊數量	1.9.0
skip-hidden-item-layout	boolean	false	否	是否跳過未顯示的滑塊布局，設為 true 可優化復雜情況下的滑動性能，但會丟失隱藏狀態滑塊的布局信息	1.9.0
easing-function	string	"default"	否	指定 swiper 切換緩動動畫類型	2.6.5
bindchange	eventhandle		否	current 改變時會觸發 change 事件，event.detail = {current, source}	1.0.0
bindtransition	eventhandle		否	swiper-item 的位置發生改變時會觸發 transition 事件，event.detail = {dx: dx, dy: dy}	2.4.3
bindanimationfinish	eventhandle		否	動畫結束時會觸發 animationfinish 事件，event.detail 同上	1.9.0

在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

{
  "usingComponents": {
    "prolist": "/components/prolist/prolist"
  },
  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}

2.完善相關的下拉刷新函數

pages/home/home.js

// 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

頁面鏈接。

屬性	類型	默認值	必填	說明	最低版本
target	string	self	否	在哪個目標上發生跳轉，默認當前小程序	2.0.7
url	string		否	當前小程序內的跳轉鏈接	1.0.0
open-type	string	navigate	否	跳轉方式	1.0.0
delta	number	1	否	當 open-type 為 'navigateBack' 時有效，表示回退的層數	1.0.0
app-id	string		否	當target="miniProgram"時有效，要打開的小程序 appId	2.0.7
path	string		否	當target="miniProgram"時有效，打開的頁面路徑，如果為空則打開首頁	2.0.7
extra-data	object		否	當target="miniProgram"時有效，需要傳遞給目標小程序的數據，目標小程序可在 App.onLaunch()，App.onShow() 中獲取到這份數據。詳情	2.0.7
version	string	release	否	當target="miniProgram"時有效，要打開的小程序版本	2.0.7
hover-class	string	navigator-hover	否	指定點擊時的樣式類，當hover-class="none"時，沒有點擊態效果	1.0.0
hover-stop-propagation	boolean	false	否	指定是否阻止本節點的祖先節點出現點擊態	1.5.0
hover-start-time	number	50	否	按住后多久出現點擊態，單位毫秒	1.0.0
hover-stay-time	number	600	否	手指松開后點擊態保留時間，單位毫秒	1.0.0
bindsuccess	string		否	當target="miniProgram"時有效，跳轉小程序成功	2.0.7
bindfail	string		否	當target="miniProgram"時有效，跳轉小程序失敗	2.0.7
bindcomplete	string		否	當target="miniProgram"時有效，跳轉小程序完成	2.0.7

open-type 的合法值 -- 在編程式導航中詳細講解

值	說明	最低版本
navigate	對應 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect	對應 wx.redirectTo 的功能
switchTab	對應 wx.switchTab 的功能
reLaunch	對應 wx.reLaunch 的功能	1.1.0
navigateBack	對應 wx.navigateBack 的功能	1.1.0
exit	退出小程序，target="miniProgram"時生效	2.1.0

// 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
      })
    }
  }
})

六、使用第三方組件庫

電商平台參考文檔 （vantweapp）

Vant Weapp 是移動端 Vue 組件庫 Vant 的小程序版本，兩者基於相同的視覺規范，提供一致的 API 接口，助力開發者快速搭建小程序應用。

1.安裝

# 通過 npm 安裝
cnpm i @vant/weapp -S --production

2.構建 npm 包

打開微信開發者工具，點擊 工具 -> 構建 npm，並勾選 使用 npm 模塊 選項，構建完成后，即可引入組件

3.使用組件

在 app.json 中去除 "style": "v2"
小程序給新版基礎組件強行加上了許多樣式，難以去除，不關閉將造成樣式混亂。

4.商品詳情頁使用業務組件 - GoodsAction 商品導航

參考鏈接 GoodsAction 商品導航

// pages/detail/detail

{
  "usingComponents": {
    "van-goods-action": "/miniprogram_npm/@vant/weapp/goods-action/index",
    "van-goods-action-icon": "/miniprogram_npm/@vant/weapp/goods-action-icon/index",
    "van-goods-action-button": "/miniprogram_npm/@vant/weapp/goods-action-button/index"
  }
}

特此聲明：如需轉載請注明出處，如有疑問請及時提出以便於改正，如有侵權，聯系刪除，謝謝