微信小程序開發學習筆記《19》uni-app框架-配置小程序分包與輪播圖跳轉

博主正在學習微信小程序開發，希望記錄自己學習過程同時與廣大網友共同學習討論。建議仔細閱讀uni-app對應官方文檔

一、配置小程序分包

分包可以減少小程序首次啟動時的加載時間
為此，我們在項目中，把 tabBar相關的4個頁面放到主包中，其它頁面(例如:商品詳情頁、商品列表頁)置分包的步驟如下:

1. 在項目根目錄中，創建分包的根目錄，命名為subpkg
2. 在 pages.json中，和 pages 節點平級的位置聲明subPackages節點，用來定義分包相關的結構:

// page.json配置文件中
"subPackages": [{"root": "subpkg", "pages": []}],

3. 在 subpkg目錄上鼠標右鍵，點擊新建頁面選項，并填寫頁面的相關信息:

二、點擊輪播圖跳轉到商品詳情頁面

將節點內的view組件，改造為navigator導航組件,并動態綁定url屬性的值。

1. 改造之前的ui結構：

<template><view><!--輪播圖區域.可以通過uswp快捷生成模板！--><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><!--循環渲染輪播圖的item項--><swiper-item v-for="(item,i) in swiperList" :key="i"><view class="swiper-item"><!--動態綁定圖片的 src屬性--><image :src="item.image_src"></image></view></swiper-item></swiper></view>
</template>

2. 改造之后的ui結構

<template><view><!--輪播圖區域.可以通過uswp快捷生成模板！--><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><!--循環渲染輪播圖的item項--><swiper-item v-for="(item,i) in swiperList" :key="i"><navigator class= "swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">  <!--傳參了--><!--動態綁定圖片的 src屬性--><image :src="item.image_src"></image></navigator></swiper-item></swiper></view>
</template>

三、封裝uni.$showMsg()方法

當數據請求失敗之后，經常需要調用uni.showToast({ /配置對象/ }）方法來提玩用戶。此時，可以在全局封裝一個uni.$showNsg()方法，來簡化uni.showToast()方法的調用。（就是經常要用的東西，可以在全局封裝好，不需要每次都寫完整）
具體的改造步驟如下：

1. 在 main.js 中，為uni對象掛載自定義的$showMsg()方法：

//封裝的展示消息提示的方法
uni.$showMsg = function (title = '數據加載失敗! ', duration = 1500){uni.showToast( {title,duration,icon : 'none',})
}

2. 今后，在需要提示消息的時候，直接調用uni.$showMsg()方法即可：

// 3.2 請求失敗
// if (res.meta.status !== 200) {
// 	return uni.showToast({ //wx.showToast就是消息提示框
// 		title: '數據請求失敗! ',
// 		duration: 1500,
// 		icon: 'none', //不需要圖標
// 	})
// }
// 簡化寫法，將上面的消息彈窗進行一次封裝
if (res.meta.status !== 200) return uni.$showMsg()

以上學習筆記都是博主在B站學習黑馬程序員課程時的學習筆記，如果有什么問題，煩請聯系我刪除。