亚洲成人自拍偷拍视频,黑人巨大精品欧美一区二区三区

文章圖片

文章圖片

文章圖片

文章圖片

文章圖片

文章圖片

文章圖片

文章圖片

文章圖片

文章圖片

文章圖片

1. 組件自動注冊機(jī)制：easycom1.1 直接使用組件傳統(tǒng) Vue 項目中，我們需要注冊、導(dǎo)入組件之后才能使用組件。
uniapp 框架提供了一種組件自動注冊機(jī)制，只要你在 components 文件夾下新建的組件滿足 /components/組件名/組件名.vue 的命名規(guī)范，就能直接使用，例如：
1.在 components 文件夾下新建 hello-world 的文件夾，在 hello-world 文件夾下新建 hello-world.vue 文件，隨便寫點內(nèi)容

2.在 index.vue 文件里面直接引用組件

1.2 注意事項1.這種組件自動注冊機(jī)制叫做 easycom ，它可以自動掃描指定目錄下的所有組件，并注冊到全局組件中。
2.組件命名必須是小寫字母，使用短橫線連接單詞。例如：hello-world 。
3.easycom 支持多種規(guī)則，我們可以在 pages.json 文件里面自定義 easycom 規(guī)則。
1.3 自定義 easycom 規(guī)則我們在開發(fā)項目時，不會每次都要創(chuàng)建一個同名文件夾的組件，例如：

這些組件一般是分模塊的，例如跟用戶相關(guān)的，放到 user 文件夾下，跟訂單相關(guān)的放到 order 文件夾下，那么我們就可以自定義 easycom 規(guī)則。
1.3.1 場景一：分模塊我們分別在 order 和 user 文件夾下創(chuàng)建相關(guān)的組件

在 pages.json 里面配置 easycom 屬性，其中 autoscan 表示自動掃描， custom 表示自定義規(guī)則。
\"easycom\": {\"autoscan\": true\"custom\": {\"user-(.*)\": \"@/components/user/user-$1.vue\"\"order-(.*)\": \"@/components/order/order-$1.vue\"
引用組件

講解：
當(dāng)引入 user-add 組件時， uniapp 框架會根據(jù)我們在 pages.jon 文件里面配置的 easycom 規(guī)則去獲取 /components/user 文件夾下以 user 為前綴的組件，并自動注冊。
1.3.2 場景二：在同一父文件下面新建 common 文件夾，新建 product-detail 同名的文件夾和 vue 文件。

配置 easycom 屬性

引用組件

2. uniapp 生命周期2.1 uniapp 生命周期介紹生命周期是一個事物從產(chǎn)生到消亡的過程。
uniapp 的生命周期分為應(yīng)用生命周期、頁面生命周期和組件生命周期。
1.應(yīng)用生命周期：整個 App 的生命周期，主要是在 App.文件中回調(diào)的函數(shù)

onLaunch：當(dāng) app 初始化完成時出發(fā) ，全局只觸發(fā)一次。
onShow：應(yīng)用啟動或從后臺進(jìn)入前臺顯示時觸發(fā) 。
onHide：應(yīng)用從前臺進(jìn)入后臺時觸發(fā) 。

2.頁面生命周期：進(jìn)入到每個頁面時回調(diào)某些函數(shù)
3.組件生命周期：組件發(fā)生實例化、渲染數(shù)據(jù)、顯示、隱藏等狀態(tài)時觸發(fā)某些函數(shù) 。
2.2 uniapp 常用的生命周期函數(shù)因為組件也是頁面，所以這里主要講解頁面常用的生命周期函數(shù) 。
1.onLoad()
該函數(shù)在頁面加載時觸發(fā) ，可以用來初始化一些操作。例如獲取父組件傳遞的數(shù)據(jù)、獲取上個頁面跳轉(zhuǎn)時傳遞的參數(shù)、剛進(jìn)入列表頁面時獲取列表數(shù)據(jù)等。

<template> <view> </view></template><script setup> import {onLoadfrom \"@dcloudio/uni-app\" onLoad((option) => {// 獲取傳遞參數(shù)name.value = https://mparticle.uc.cn/api/option.name;age.value = option.age;// 獲取列表數(shù)據(jù)getList(); ) const name = ref(/"\"); const age = ref(18); // 獲取列表數(shù)據(jù) const getList = () => {</script>

2.onShow()
當(dāng)頁面每次顯示時執(zhí)行一些操作，如重新渲染數(shù)據(jù)、更新頁面狀態(tài)等。

import {onLoadonShow from \"@dcloudio/uni-app\"onShow(() => {refreshData();)const refreshData = https://mparticle.uc.cn/api/() => {

3.onReady()
頁面渲染時觸發(fā) ，只會觸發(fā)一次，可以用來操作 DOM 元素

<template> <view><div ref=\"titleDiv\">知否技術(shù)</div> </view></template><script setup> import {onLoadonShowonReadyfrom \"@dcloudio/uni-app\" import { reffrom \"vue\"; onReady(() => {console.log(\"titleDiv:\"titleDiv.value) ) const titleDiv = ref();</script>

4.onHide()
應(yīng)用切換到后臺或者隱藏時觸發(fā) ，主要執(zhí)行清理操作，例如釋放資源等。
5.onUnload()
頁面銷毀時觸發(fā) ，例如返回到其他頁面時，主要用來執(zhí)行一些清理工作，例如取消網(wǎng)絡(luò)請求、移除事件監(jiān)聽器，保存當(dāng)前頁面狀態(tài)等。
6.onPullDownRefresh()
監(jiān)聽用戶下拉刷新事件，需要注意：
1.pages.json 的 enablePullDownRefresh 配置為 true 時才生效

2.最后需要調(diào)用 uni.stopPullDownRefresh() 方法表示下拉刷新已完成

<script setup>import {onLoadonShowonReadyonPullDownRefreshfrom \"@dcloudio/uni-app\"import {reffrom \"vue\";// 下拉刷新onPullDownRefresh(() => {getDataList())// 獲取數(shù)據(jù)const getDataList = () => {http.get(\"/data/page\" search).then(res => {if (res.code === 200) {dataList.value = https://mparticle.uc.cn/api/[...dataList.value ...res.data.records
// 停止下拉刷新uni.stopPullDownRefresh();else {uni.$u.toast(res.data.message))</script>

7.onReachBottom()
監(jiān)聽頁面上拉觸底事件，例如當(dāng)頁面觸底時繼續(xù)獲取列表數(shù)據(jù)：

<script setup> import {onLoadonShowonReadyonReachBottomfrom \"@dcloudio/uni-app\" import {reffrom \"vue\"; // 上拉觸底 onReachBottom(() => {getDataList() ) // 獲取數(shù)據(jù) const getDataList = () => { </script>

8.onPageScroll()
監(jiān)聽頁面滾動事件，頁面滾動時執(zhí)行某些操作
9.onResize()
窗口變化時觸發(fā)該函數(shù) ，具體來說， onResize可以用于以下場景：

響應(yīng)式設(shè)計?：在頁面尺寸變化時，動態(tài)調(diào)整頁面布局或元素位置，確保應(yīng)用在不同設(shè)備上都能良好顯示。
資源優(yōu)化?：根據(jù)窗口尺寸調(diào)整加載的資源，比如圖片、視頻等，以提高加載速度和性能。
交互優(yōu)化?：在尺寸變化時執(zhí)行特定的交互邏輯，比如隱藏或顯示某些元素，提升用戶體驗。

3. uni.request 發(fā)起網(wǎng)絡(luò)請求官網(wǎng)關(guān)于網(wǎng)絡(luò)請求的文檔地址：
【手把手教你用uniapp開發(fā)一個app（二）】https://uniapp.dcloud.net.cn/api/request/request.html
uniapp 框架無法使用 axios 庫發(fā)起網(wǎng)絡(luò)請求，只能使用自帶的 uni.request() 方法發(fā)起網(wǎng)絡(luò)請求。

<script setup>const getDataList=()=>{uni.request({url: 'https://www.example.com/request' //僅為示例 ， 并非真實接口地址 。method: 'GET'data: {name: '知否君'header: {'content-type': 'application/json' // 默認(rèn)值\"token\":\"xxxxxxxx\"success: (res) => {console.log(res.data);fail: () => {complete: () => {);</script>

uni.request 方法常用參數(shù)說明：

url (string)：必填參數(shù) ，表示請求的 URL 地址。
method （默認(rèn)'GET'）：請求方法，如 'GET' 'POST' 'PUT' 'DELETE' 等。
data (Object | String)：請求的參數(shù) ，如果是GET請求則會轉(zhuǎn)換為 query 字符串追加到 URL 上；如果是 POST 請求等，則作為請求體發(fā)送。類型取決于 content-type 設(shè)置。
header (Object)：設(shè)置請求的頭部信息，如{'content-type': 'application/json' 。
dataType (string 默認(rèn)'json')：服務(wù)器返回的數(shù)據(jù)類型。合法值：'json' 'text' 。
responseType (string 默認(rèn)'text'): 設(shè)置響應(yīng)的數(shù)據(jù)類型。合法值：'text' 'arraybuffer' 。
success (Function): 請求成功后的回調(diào)函數(shù) ，參數(shù)為一個對象，包含服務(wù)器返回的數(shù)據(jù) 。
fail (Function): 請求失敗的回調(diào)函數(shù) ，參數(shù)為一個對象，包含錯誤信息。
complete (Function): 不管成功還是失敗，都會執(zhí)行的回調(diào)函數(shù) ，參數(shù)為一個對象，包含請求的響應(yīng)信息。

官方提供的網(wǎng)絡(luò)請求 API 不是非常好用。
因為每次發(fā)起請求都要在 header 里面填寫 token ，沒有統(tǒng)一的請求攔截和請求攔截，所以需要我們自己封裝網(wǎng)絡(luò)請求。
4. 封裝網(wǎng)絡(luò)請求想想我們在開發(fā) Vue 項目時是如何封裝 axios 的？
1.axios 實例

創(chuàng)建 axios 實例，實例包含 baseUrl
請求攔截
響應(yīng)攔截

2.http 請求

引入 axios 實例
封裝 GET、POST、DELETE 等 http 請求

3.具體接口

引入 http 文件，調(diào)用請求

知道了核心邏輯，我們接下來封裝一下 uni.request 請求
1.在 api 文件夾下新建 request.js
該文件主要包含封裝的 uni.request 請求實例、GET 等4種 http 請求，請求攔截、響應(yīng)攔截、異常處理。

const http = { // 接口 baseUrl baseUrl: \"http://127.0.0.1:8000\" // 請求方法 request(config) {// 請求攔截config = beforeRequest(config);// 封裝實際請求 urlconfig.url = this.baseUrl + config.url;return new Promise((resolve reject) => {// uni.requestuni.request(config).then(res => {const response = before(res);resolve(response);).catch(error => {errorHandle(error);reject(error);))get(url params) {return this.request({url: urldata: paramsmethod: \"GET\")post(url data) {return this.request({url: urldata: datamethod: \"POST\")put(url data) {return this.request({url: urldata: datamethod: \"PUT\")delete(url data) {return this.request({url: urlparams: datamethod: \"DELETE\") // 請求攔截const beforeRequest = (config) => { const access_token = uni.getStorageSync(\"token\"); const header = {'content-type': 'application/json' ; if (token) {headers[\"Authorization\"
 = token;Object.assign(assign {\"header\"header ) return config;// 響應(yīng)攔截const beforeReponse = (response) => { return response;// 異常處理const errorHandle = (response) => { console.log('異常處理');export default http

2.創(chuàng)建實際接口

3.頁面調(diào)用接口

上面的案例中并沒有詳細(xì)說明請求攔截、響應(yīng)攔截和異常處理的代碼，等后面 app 實戰(zhàn)的時候會給出完整代碼，大家敬請期待。
5. 數(shù)據(jù)緩存在移動應(yīng)用中使用緩存來存儲應(yīng)用數(shù)據(jù)已經(jīng)成為了一個常見的操作，這不僅可以提高應(yīng)用的響應(yīng)速度，還可以節(jié)約用戶的流量。
在使用 uniapp 進(jìn)行開發(fā)時，我們可以通過使用 uniapp 自帶的本地緩存來實現(xiàn)這一目標(biāo) 。
uniapp 數(shù)據(jù)緩存 API 文檔地址：
https://uniapp.dcloud.net.cn/api/storage/storage.html
1.存儲數(shù)據(jù)：uni.setStorageSync
uni.setStorage(\"token\" res.data.token);uni.setStorageSync(\"token\" res.data.token);2.獲取數(shù)據(jù)：uni.getStorageSync
let token = uni.getStorageSync(\"token\");let token = uni.getStorage(\"token\");3.清除本地緩存
uni.clearStorageSync();uni.clearStorage();uni.removeStorageSync(\"userInfo\")uni.removeStorage(\"userInfo\")注意：