說(shuō)明：項(xiàng)目是create-react-app結(jié)合antd-mobile寫(xiě)的H5，在微信公眾號(hào)里運(yùn)行。

1、使用a標(biāo)簽預(yù)覽或下載PDF。寫(xiě)法如下，手機(jī)上點(diǎn)擊無(wú)反應(yīng)，電腦上點(diǎn)擊網(wǎng)頁(yè)崩潰。

<a href='pdf或圖片路徑'>
  PDF或圖片名稱
</a>

原因是瀏覽器監(jiān)測(cè)到訪問(wèn)非安全訪問(wèn)，給攔截下來(lái)了。于是根據(jù)報(bào)錯(cuò)提示，新增target和rel兩個(gè)屬性，寫(xiě)法如下：

<a href='pdf或圖片路徑' target='_blank' rel="noreferrer">
  PDF或圖片名稱
</a>

在電腦上和iOS上均可正常查看。

不過(guò)，在安卓上有以下幾種情況：

a) 手機(jī)自帶有QQ瀏覽器，直接就打開(kāi)PDF。（這種情況是正常預(yù)覽）

b) 手機(jī)上沒(méi)有QQ瀏覽器，但是有其他瀏覽器，會(huì)彈出一個(gè)框，提示下載QQ瀏覽器或用其他瀏覽器打開(kāi)。（這種也是正常預(yù)覽下載）

c) 手機(jī)上沒(méi)有QQ瀏覽器，但是有其他瀏覽器，點(diǎn)擊PDF文件的時(shí)候，能夠看到一個(gè)加載條加載效果，但是過(guò)后既不預(yù)覽，也不提示。（這種是非正常的，微信禁止了）在a標(biāo)簽上加一個(gè)download屬性可出現(xiàn)效果b)。

<a href='pdf或圖片路徑' target='_blank' rel="noreferrer" download>
  PDF或圖片名稱
</a>

另外，如果需要直接預(yù)覽PDF的話，可以使用react-pdf-js插件，缺點(diǎn)是，當(dāng)pdf文件稍微有點(diǎn)大的時(shí)候，加載顯示極慢，所以還是建議上面的方式。

2、使用antd-mobile長(zhǎng)列表listView做長(zhǎng)列表加載。（提供給各位一個(gè)做移動(dòng)端長(zhǎng)列表的備選方案） 

3、項(xiàng)目初的時(shí)候，一運(yùn)行起來(lái)就報(bào)各種缺babel插件的問(wèn)題，找了兩個(gè)多小時(shí)找到原因，webpack的配置文件中，plugins里多配置了兩個(gè)插件，而在項(xiàng)目中沒(méi)有安裝且不需要這兩個(gè)插件，所以，在配置里去掉后再運(yùn)行，就沒(méi)有報(bào)錯(cuò)了。

4、echarts畫(huà)地圖和柱圖

a) 畫(huà)中國(guó)地圖

v5開(kāi)始不提供地圖輪廓數(shù)據(jù)，選用v4.9.0版本，好處是既有地圖輪廓數(shù)據(jù)，地圖上省份名稱也居中了。地圖上的浮層是在tooltip里面配置，可以不專門添加position，它默認(rèn)顯示的位置是靈活的。

b) 畫(huà)柱圖

v4版本無(wú)排序的API，如果柱圖數(shù)據(jù)需要排序，盡量跟后端同學(xué)溝通，讓其排好序把數(shù)據(jù)返給你。如果沒(méi)溝通好，我們這邊也可以處理，寫(xiě)一個(gè)排序函數(shù)即可。

5、使用useRef綁定值做操作，可以直接綁定在DOM上。

寫(xiě)后臺(tái)系統(tǒng)的話，通常都是直接引入U(xiǎn)I組件，但是在移動(dòng)端就對(duì)UI有要求，在UI庫(kù)引入組件改樣式也挺麻煩。以Input標(biāo)簽舉例：

UI庫(kù)的Input組件可以輕松實(shí)現(xiàn)雙向綁定，但是有自帶樣式，要跟設(shè)計(jì)畫(huà)的輸入框樣式保持一樣就比較艱難。

原生的html標(biāo)簽——input?？梢宰远x樣式，但是雙向綁定就沒(méi)有了，比如登錄頁(yè)，需要輸入賬戶密碼，使用js的方法可以拿到賬戶密碼，但是需要自己寫(xiě)很多代碼。這個(gè)時(shí)候，useRef就是較好的選擇了，與useState，useEffect一樣，它是react的hooks函數(shù)。使用如下：

import { useState,useRef } from 'react'; //引入
​
const inputRef = useRef<any>(); //定義
const [phone, setPhone] = useState("");
​
export default const Login= () =>{
  const changePhone = () => {
    setPhone(inputRef?.current?.value)
  }
    return (
       /*綁定在input標(biāo)簽上*/
       <input value={phone} ref={inputRef} onChange={changePhone} maxLength={11} placeholder='請(qǐng)輸入手機(jī)號(hào)' />
        )
}

6、封裝組件小理念

單一職責(zé)原則：一個(gè)組件只做一件事。如果組件變得復(fù)雜，就再拆分成小組件。

以上就是react項(xiàng)目如何運(yùn)行在微信公眾號(hào)的詳細(xì)內(nèi)容，更多關(guān)于react運(yùn)行在微信公眾號(hào)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論