css滿屏問題
設置html<meta viewport-fit="cover " />
屏幕上安全距離: safe-area-inset-top 屏幕右安全距離: safe-area-inset-right 屏幕下安全距離: safe-area-inset-bottom 屏幕左安全距離: safe-area-inset-left
設置html<meta viewport-fit="contain" />
默認：viewprot-fit:contain;頁面內(nèi)容顯示在safe area內(nèi)
ios手機點擊頁面返回的時候都是返回到上一層頁面的頂部，而不是返回之前頁面滑動的位置
在頁面被銷毀的生命周期componentWillUnmount記錄頁面的scrollTop的數(shù)值然后在componentDidMount將之前記錄的scrollTop賦值給當前頁面元素
在頁面全局被設置了安全區(qū)域的時候，某一個頁面的按鈕需要在頁面的底部展示
設置button{position:fixed;buttom:0}在安卓手機和蘋果手機沒有小劉海的手機上是ok的，但是在ios11+的系統(tǒng)上按鈕并沒有設置到最底部，需要給當前頁面設置一個高度直接用100vh的時候，頁面會出現(xiàn)滾動條，如果設置了安全區(qū)域的話，需要把頂部的安全區(qū)域和底部的安全區(qū)域減掉
height:calc(100vh - env(safe-area-inset-top) -env(safe-area-inset-bottom) )//針對ios11.2+
height:calc(100vh - constant(safe-area-inset-top) - constant(safe-area-inset-bottom))//針對ios11.2
react項目中防止按鈕重復點擊，重復進入新頁面
就是按照正常思路來寫(額外加一個setTimeout)
this.state = { canClick:true } handleChange = ()=>{ const { canClick } = this.state; const that = this; if(canClick){ this.setState({canClick:false}) //邏輯代碼 //定時器異步恢復按鈕的可點擊性 setTimeout(()=>{ ttat.setState({ canClick:true }) },10) } }
react項目中使用echarts
如果echarts沒有tooltip，盡管設置了也不起作用，可能是需要單獨引入tootip的文件
import 'echarts/lib/component/tooltip';
echarts富文本用法:
formatter:'{className1|{value}}{className2|常量}'
柱狀圖數(shù)據(jù)多的情況下（超過100條）ios手機上不顯示圖表
搜了一下是因為渲染的柱狀圖的寬高的面積超過了canvas畫布的最大面積
Canvas area exceeds the maximum limit (width * height > 16777216).
解決方案：看了一下echarts的官網(wǎng)echarts4.0以上的可以用svg來畫圖表
import 'zrendered/lib/svg/svg' let myChart = echarts.init(chart,null, { renderer: 'svg});
或者
let myChart = echarts.init(chart,null, { devicePixelRatio: 2});
echarts雷達圖實現(xiàn)總值在最中間顯示，最里面的一層用白色打底，如果需要顯示層級關系則可以使用echarts的Z屬性，在series中有多個對象，每一個對象設置Z的值，可以參考官方文檔
option = { title: { text: '88', x: 'center', y: 'center', textStyle: { color: '#333', fontWeight: 'bolder', fontSize: 64, } }}
在定義的option中加一個title的屬性即可，至于中間的白色五邊形，可以設置每一個值都一樣然后設置區(qū)域顏色為白色
series:[{
type:"radar",
z:2,
animation:false,
silent:true//圖形是否不響應和觸發(fā)鼠標事件，默認為 false，即響應和觸發(fā)鼠標事件。
data:[{
value:[],
itemStyle:{
normal:{}
},
areaStyle:{color:"blue",opacity:0.6}
},//藍色區(qū)域
},{
type:"radar",
z:4,
animation:false,
silent:true//圖形是否不響應和觸發(fā)鼠標事件，默認為 false，即響應和觸發(fā)鼠標事件。
data:[
{
value:[],
itemStyle:{
normal:{}
},
areaStyle:{color:"#fff",opacity:1}
}//白色區(qū)域]
}]
網(wǎng)絡不好的情況下，在同一個canvas容器中切換不同數(shù)據(jù)的圖表切換的時候會出現(xiàn)圖表的動畫效果觸發(fā)兩次，原因：option的值從請求接口重新獲取，react的setState是異步賦值option,切換按鈕會導致按鈕的setState，觸發(fā)render，此時option還是原來的數(shù)據(jù)echarts會執(zhí)行setOption，因為echarts圖表設置animation:true,所以會出現(xiàn)動畫，等option的值被替換成最新的內(nèi)容的時候會觸發(fā)setOption，重新渲染的時候也會有動畫效果，所以才造成兩次動畫效果
解決方案：
1.可以把動畫效果屏蔽掉animation:false
2.設置兩種狀態(tài)currentSelect，lastedStatus
const option = {radar:{},series:[
{type:"radar"}
]}
handleChange = (type)=>{
this.setState({
currentSelect:type//記錄按鈕切換的狀態(tài)
})
this.loadMore(type)
}
loadMore = (type)=>{
func().then((res)=>{
if(res.code === 200){
option.series[0].data[0].value = res.data;
this.setState({
lastedStatus:type//記錄option更新狀態(tài)
option：option
})
}
})
}
render(){
if(this.state.currentSelect === this.state. lastedStatus){
myChart.setOption(this.state.option)
}
}
頁面切換的時候出現(xiàn)閃屏，頁面無法更新
用amtd-mobile的tabs將多個頁面拼湊成一個頁面就不會出現(xiàn)閃屏問題
但是切換tabs的時候有的頁面會更新不及時，我的解決方案：
<Tabs> {currentPage==="1"?<Page1 />:""} {currentPage==="2"?<Page2 />:""} {currentPage==="3"?<Page3 />:""} </Tabs>
在監(jiān)聽tabs切換的事件中更新currentPage的值
ios12的系統(tǒng)中設置echarts柱狀圖滾動的時候會破壞布局
設置了position：fiexd就會受到影響，可以嘗試先設置echarts的tooltip的triggerOn
如果還是不起作用將當前頁面的所有設置position:fiexed改為position:absolute(在不影響整體布局的情況下)
有的樣式在手機上不起作用
根據(jù)兼容性給樣式添加-webkit-
-webkit-flex:1; flex:1
h5頁面喚起app成功之后重新回到h5頁面依然會執(zhí)行下載app
先判斷h5運行的環(huán)境分為三種
var u = navigator.userAgent;
let isWeixin= u.toLowerCase().indexOf('micromessenger')!== -1;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
let hasApp=false;
if(isWeixin){
//提示需要在瀏覽器里面運行，因為微信自帶的瀏覽器無法用配置的url scheme喚起app
alert("請在瀏覽器運行詞鏈接")
}else{
if(isAndroid ){
window.location.href = "喚起app的url"http://URL Scheme方式喚起Activity或App
//判斷是否喚起成功，只有失敗的時候才會執(zhí)行下載apk的代碼
this.checkOpen((opened)=>{
if(!opened){ hasApp = false;//系統(tǒng)沒有此app，喚起失敗}else{
hasApp = true;
}
})
setTimeout(()=>{
let hidden = window.document.hidden;
if(typeof hidden === "undefined"||hidden === false&&!hasApp){
window.location.href = "下載apk的url地址"
}
},2000)
}
if(isIOS){ //ios等同于安卓的寫法}
}
//判斷是否喚起app
checkOpen = (cb)=>{
const clickTime = +(new Date());
function check(elseTime){
if(elseTime>3000||document.hidden){cb(true)}else{cb(false)}
}
let count = 0;let intHandle = null;
intHandle = setTiterval(()=>{
count++;
const elseTime = +(new Date()) - clickTime;
if(count>100||elseTime>3000){
clearInterval(intHandle );check(elseTime)
}
},20)
}
這個解決方案也是我百度參考了網(wǎng)上寫的文章：
http://www.itdecent.cn/p/21380058d609
https://www.cnblogs.com/shoestrong/p/9436722.html
另外一種方案就是借助callapp-lib插件,
在蘋果手機上可以設置timeout:0,可以避免長時間喚起app失敗自動跳轉App store的問題
安卓手機的話，測試了小米，三星，vivo，華為，只有華為手機還是在長時間喚起app沒跳轉之后自動下載app，其他的手機會刷新一下當前頁面
h5頁面實現(xiàn)slider兩邊滑動的效果
antd-mobile里面有個Range的組件，但是看了一下沒有tooltip顯示當前滑動的數(shù)值，在網(wǎng)上搜了一個適合react的滑動插件rc-slider，api上面介紹了該插件的多種用法，我在項目中使用的是Range
<Range min={0} max={1000} defaultValue={[creditScoreStart,creditScoreEnd]}
allowCross={false}
tipFormatter={value => `${value}`}
tipProps={
{"prefixCls": 'rc-slider-tooltip',
"placement": 'top',
"visible": true//設為true顯示數(shù)值的tooltip就會一直存在
}
}
value={[creditScoreStart,creditScoreEnd]}
onChange={(e)=>{
this.setState({
creditScoreStart:e[0],
creditScoreEnd:e[1]
})}}
marks={marks}
/>
api文檔上面tipProps屬性中沒有包含“visible”這個配置，但是源碼中是有這個配置的入口的，所以加了“visible”是起作用的
ant mobile 的 ListView 組件加載一定數(shù)據(jù)后，點擊詳情返回回到之前的滾動條的滾動位置(onEndReached上滑到底部和頁面初始話的時候請求數(shù)據(jù)，可以定義一個公共的方法this.loadMore()獲取數(shù)據(jù))
react項目中在不使用npm run eject的情況下按需引入Antd以及l(fā)ess
安裝customize-cra，引入react-app-rewired插件：react-app-rewired的作用就是在不eject的情況下,覆蓋create-react-app的配置
npm install react-app-rewired customize-cra babel-plugin-import
npm install less less-loader
在根目錄下面新建config-overrides.js，并修改相關配置
const { override, fixBabelImports,addLessLoader,addWebpackAlias } = require('customize-cra');
const path = require("path");
module.exports = override(
fixBabelImports("import", { //配置按需加載
libraryName: "antd-mobile",
libraryDirectory: "es",
style: true, //自動打包相關的樣式 默認為 style:'css'
}),
// 使用less-loader對源碼重的less的變量進行重新制定，設置antd自定義主題
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
},
}),
//增加路徑別名的處理
addWebpackAlias({
'root': path.resolve('./src')
})
);
