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

1、經常使用組件

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

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>

2、自定義組件 - 產品列表

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>

3、實現下拉刷新上拉加載

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

上拉下拉測試便可

4、返回頂部功能實現

在首頁中設置一個固定定位的按鈕，而後綁定點擊事件，綁定事件使用 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
    })
  }
})

5、實現點擊商品列表進入產品的詳情頁面

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

6、使用第三方組件庫

電商平臺參考文檔 （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"
  }
}

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