Vue開發(fā)中遇到的問題
1、選中二級(jí)路由高亮?xí)r保持它的父路由也保持高亮
給路由添加前置守衛(wèi)beforeEach(to,from,next) ，在路由前置守衛(wèi)中判斷要去的路徑信息，如果是二級(jí)路由，則給一級(jí)路由也加上高亮樣式
直接在路由跳轉(zhuǎn)標(biāo)簽中獲取路徑信息，判斷是否需要添加高亮樣式
2、使用? keep-alive 包裹動(dòng)態(tài)組件時(shí)數(shù)據(jù)發(fā)生重復(fù)渲染
直接把<keep-alive></keep-alive>干掉或者使用exclude屬性讓他直接重新渲染
keep-alive 的三個(gè)參數(shù)：
include：包含的組件（只有匹配的組件可以被緩存）
exclude：排除的組件（只有匹配的組件不會(huì)被緩存）
max：緩存組件的最大值
keep-alive可以包裹<route-view></route-view>使用，也可以配合<Component? :is="aaa"></Component>使用 （其中aaa為動(dòng)態(tài)組件的名稱）
3、vue3.x中廢棄了filter過濾器
vue3.x中新增了setup()，數(shù)據(jù)、方法、生命周期都定義在了setup()中，響應(yīng)式數(shù)據(jù)使用 ref 和 active 包裹
生命周期的名稱也發(fā)生了變化，如：beforedestory --> onUnmounted , mounted --> onMounted 并且使用前都需要先從vue中導(dǎo)入
在視圖中需要使用的數(shù)據(jù)和方法都需要在setup（）最后return出去才可以使用
4、vant組件庫 自定義輪播圖大小時(shí) 添加外邊距 輪播圖最后一頁顯示不完全
在導(dǎo)入vant庫中的輪播圖 自定義輪播圖大小時(shí)，如果加上外邊距，會(huì)把最后面的幾個(gè)選項(xiàng)擠出范圍導(dǎo)致顯示不全
在使用tab標(biāo)簽頁時(shí)設(shè)置寬度，然后向內(nèi)壓縮形成margin的效果，內(nèi)容可以顯示完全
5、vant組件庫底部Tabber標(biāo)簽欄開啟路由模式后，路由跳轉(zhuǎn)會(huì)報(bào)錯(cuò)
問題描述： 使用vant的tabber標(biāo)簽欄的路由跳轉(zhuǎn)時(shí)，路由可以跳轉(zhuǎn)，但是會(huì)拋出一個(gè)錯(cuò)誤
問題原因：vant與新版本路由不匹配
解決方法：降低路由版本vue-router@3.0.0
6、移動(dòng)端使用插件進(jìn)行rem適配
插件：postcss-pxtorem、lib-flexible
// yarn add amfe-flexible
// yarn add postcss-pxtorem@5.1.1
// 在main.js中 導(dǎo)入import 'amfe-flexible'
// 創(chuàng)建postcss.config.js文件，配置
module.exports={
plugins: {
'autoprefixer': {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
? ?? ]
?? },
'postcss-pxtorem': {
rootValue:37.5,
propList: ['*']
?? }
? }
}
7、數(shù)據(jù)已經(jīng)拿到但是頁面渲染不出來，在下一次嘀嗒也沒有作用、vue不支持 ?. 的寫法
因?yàn)関ue不支持 ?. 的寫法
所以如果想要拿到數(shù)據(jù)并成功渲染需要添加一層判斷 && 表示數(shù)據(jù)得到后渲染
obj.arr[0] && obj.arr[0].name
8、props父子組件傳值，當(dāng)接收的數(shù)據(jù)類型是對(duì)象或者數(shù)組時(shí) default需要設(shè)置為 ()=> {} 、()=>[]的形式
props: {
tableConfig: {
type: Array,
default: () => [
{ label: '日期', prop: 'date' },
{ label: '姓名', prop: 'name' },
{ label: '地址', prop: 'address' }
]
}
}
9、@后添加路徑
// 項(xiàng)目根目錄創(chuàng)建jsconfig.json文件
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
10、單行、多行文本溢出省略號(hào)代替
/* 單行文本溢出隱藏 省略號(hào)代替 */
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* 多行文本溢出隱藏 省略號(hào)代替*/
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
/*設(shè)置對(duì)其模式*/
-webkit-line-clamp: 2;
/*設(shè)置多行的行數(shù)*/
11、通過cdn引入減小打包體積，配置vue.config.js
module.exports = {
// 發(fā)布模式
chainWebpack: config => {
config.when(process.env.NODE_ENV === 'production', config => {
// 通過CDN加載
config.set('externals', {
vue: 'Vue',
axios: 'axios',
echarts: 'echarts',
"element-ui": 'ElementUI',
"vue-quil-editor": 'VueQuillEditor'
})
config.plugin('html').tap(args => {
args[0].isProd = true
return args
})
})
}
}
// 利用webpack的externals，把第三方庫的js文件從打包文件里去掉
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'axios': 'axios',
'element-ui':'ElementUI'
}
12、element-ui中的el-scrollbar
// 外層用一個(gè)標(biāo)簽包裹并設(shè)置寬高,給el-scrollbar標(biāo)簽必須設(shè)置height:100%
// 內(nèi)容區(qū)
// 設(shè)置樣式時(shí)必須添加穿透
.box {
height: 300px;
width: 200px;
}
::v-deep .el-scrollbar__view {
padding-top: 60px;
}
::v-deep .el-scrollbar__wrap {
overflow-x: hidden;
}
13、vue初始化頁面閃動(dòng)問題
使用vue開發(fā)時(shí)，在vue初始化之前，由于div是不歸vue管的
所以我們寫的代碼在還沒有解析的情況下會(huì)容易出現(xiàn)花屏現(xiàn)象，看到類似于{{message}}的字樣，雖然一般情況下這個(gè)時(shí)間很短暫，但是還是有必要讓解決這個(gè)問題的。
首先：在css里加上以下代碼：
[v-cloak] { display: none;}
如果沒有徹底解決問題，則在根元素加上style="display: none;" :style="{display: 'block'}"
React開發(fā)中遇到的問題
1、移動(dòng)端使用插件vw適配
插件： postcss-px-to-viewport
在react項(xiàng)目中想要配置vw，先將webpack配置暴露出來yarn eject
git提交保存版本
在config的webpack.congfig.js中配置
require('postcss-px-to-viewport')({
viewportWidth: 375, // (Number) The width of the viewport.
viewportHeight: 667, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: "vw", // (String) Expected units.
selectorBlackList: [], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
}),
2、react數(shù)據(jù)拿到但是頁面渲染不出來
為了節(jié)約性能，在類組件的render函數(shù)里 return模板之前先根據(jù)數(shù)據(jù)進(jìn)行一層判斷，如果想要的數(shù)據(jù)還沒有拿到，直接return null;
在函數(shù)組件中 return之前加上同樣的判斷，如果數(shù)據(jù)還沒有拿到就return null;
3、react路由6.x和5.x
路由6.x不再有withRouter，于是在類組件中通過this.props無法拿到路由信息，這時(shí)我們便需要封裝HOC高階組件后在類組件中使用
路由6.x在定義路由信息的時(shí)候，掛載需要使用標(biāo)簽內(nèi)的element={}
路由5.x則可以直接在閉合標(biāo)簽內(nèi)部直接使用 ，或者是用標(biāo)簽中的component={}
4、react的鉤子hooks
在類組件中沒有hook，hook只能在函數(shù)組件中使用，但是我們可以通過封裝HOC（高階組件）使類組件中擁有函數(shù)組件的hook功能，其中最明顯的用處是拿到路由信息
5、類組件中想要在this.props中獲取路由信息，封裝高階組件
// 創(chuàng)建withRouter.jsx文件，配置
// 引入需要用到的模塊
import { useParams, useLocation, useNavigate, useSearchParams } from "react-router-dom";
// withRouter本質(zhì)上就是一個(gè)組件，它的特點(diǎn)：它的參數(shù)是一個(gè)組件，它的返回值是一個(gè)新組件。
// 我們稱這樣的組件是HOC(High Order Component高階組件)，高階組件本質(zhì)上就是一個(gè)閉包的應(yīng)用
export default function withRouter(Component) {
// 相當(dāng)于給Student組件添加各種props屬性，還添加三個(gè)重要的屬性params,location,navigate
return (props) => (
{...props}
searchParams={useSearchParams()} // 通過里面的get方法可以獲取路徑里傳遞的參數(shù)，不需要自己切割
params={useParams()} // 獲取參數(shù)
location={useLocation()} // 查看路徑信息
navigate={useNavigate()} // 允許跳轉(zhuǎn)其他頁面
/>
);
}
6、react 函數(shù)組件修改數(shù)據(jù)方法? 數(shù)據(jù)刷新數(shù)據(jù)繼續(xù)請(qǐng)求變得更多
建議使用 ：
a、箭頭函數(shù) setState((pre)=>([...pre],...res.data))? // 用() 包裹，不是{}
b、擴(kuò)展重新賦值 setState([...state, ...res.data])
7、redux
import { createStore } from 'redux'
let store =? createStore((state, action) => {
switch (action.type) {
case "setNational": {
return {
...state,
national: action.national
}
break
}
default: {
return {
national: '全國(guó)'
}
}
}
})
export default store;
// 獲取數(shù)據(jù)
store.getState().national
// 修改
this.$store.dispatch({
type: 'setNational',
national: name
})
小程序遇到的問題
輪播圖響應(yīng)式布局
輪播圖下放置的圖片 <image src="" / >標(biāo)簽上 添加mode="widthFix"高度根據(jù)寬度自適應(yīng)
<image src="" mode="widthFix" />
樣式中設(shè)置圖片寬度100%
swiper image {
width: 100%;
}
但是由于swiper自身有高度，所以換更大屏幕時(shí)，圖片仍然顯示不完全，給swiper根據(jù)圖片設(shè)置高度
// 設(shè)計(jì)稿iphone6,假設(shè)圖片高度150px，則swiper設(shè)置高度300rpx
swiper {
height: 300rpx;
}
懶加載獲取到數(shù)據(jù)總數(shù)后 判斷列表長(zhǎng)度===total時(shí)return但是沒有結(jié)束
需要把請(qǐng)求過來的數(shù)據(jù)里的數(shù)據(jù)總數(shù)進(jìn)行類型轉(zhuǎn)換 Number(res.total)才能進(jìn)入判斷
粘性
cnpm i @miniprogram-component-plus/sticky
使用mp-slideview組件時(shí)，添加的提示文字消失不見
// 例如： 左滑可以刪除功能，但是刪除兩個(gè)字顯示不出來
標(biāo)簽中間的內(nèi)容有圖片的時(shí)候如果圖片模式 mode=“widthFix” 會(huì)導(dǎo)致左滑顯示的刪除按鈕上內(nèi)容不顯示
可以設(shè)置 mode="aspectFit" 自己定義圖片大小
封裝請(qǐng)求
// 封裝文件夾util/request.js文件
// isHeader判斷是否需要獲取響應(yīng)頭中的數(shù)據(jù)
function request(obj, isHeader) {
// 顯示loading
return new Promise((resolve, reject) => {
wx.showLoading({
title: '正在加載中',
})
wx.request({
...obj,
url: 'http://localhost:5000' + obj.url,
success: (res) => {
// console.log(res.header["X-Total-Count"]);
if (isHeader) {
resolve({
list: res.data,
total: res.header["X-Total-Count"]
})
} else {
resolve(res.data);
}
},
fail: (err) => {
reject(err)
},
complete: () => {
// 隱藏loading
wx.hideLoading({
success: (res) => { },
})
}
})
})
}
export default request;
封裝權(quán)限管理
// 調(diào)用時(shí)傳入一個(gè)回調(diào)函數(shù)
function CheckAuth(callback) {
if (wx.getStorageSync('tel')) {
// 直接執(zhí)行回調(diào)函數(shù)
callback()
} else {
// 是否存在token
if (wx.getStorageSync('token')) {
// 跳轉(zhuǎn)綁定手機(jī)頁面
wx.navigateTo({
url: '/pages/telform/telform',
})
} else {
// 跳轉(zhuǎn)綁定微信頁面
wx.navigateTo({
url: '/pages/auth/auth',
})
}
}
}
export default CheckAuth;
// 在生命周期onShow中調(diào)用例子，傳入一個(gè)回調(diào)函數(shù)作為參數(shù)
CheckAuth(() => {
let { nickName } = wx.getStorageSync('token')
let tel = wx.getStorageSync('tel')
request({
url: url
}).then(res => {
console.log(res)
this.setData({
list: res
})
})
})
