說明：項目是create-react-app結合antd-mobile寫的H5，在微信公眾號里運行。
1、使用a標簽預覽或下載PDF。寫法如下，手機上點擊無反應，電腦上點擊網頁崩潰。
|
1
2
3
|
<a href='pdf或圖片路徑'> PDF或圖片名稱</a> |
原因是瀏覽器監測到訪問非安全訪問，給攔截下來了。于是根據報錯提示，新增target和rel兩個屬性，寫法如下：
|
1
2
3
|
<a href='pdf或圖片路徑' target='_blank' rel="noreferrer"> PDF或圖片名稱</a> |
在電腦上和iOS上均可正常查看。
不過，在安卓上有以下幾種情況：
a) 手機自帶有QQ瀏覽器，直接就打開PDF。（這種情況是正常預覽）
b) 手機上沒有QQ瀏覽器，但是有其他瀏覽器，會彈出一個框，提示下載QQ瀏覽器或用其他瀏覽器打開。（這種也是正常預覽下載）
c) 手機上沒有QQ瀏覽器，但是有其他瀏覽器，點擊PDF文件的時候，能夠看到一個加載條加載效果，但是過后既不預覽，也不提示。（這種是非正常的，微信禁止了）在a標簽上加一個download屬性可出現效果b)。
|
1
2
3
|
<a href='pdf或圖片路徑' target='_blank' rel="noreferrer" download> PDF或圖片名稱</a> |
另外，如果需要直接預覽PDF的話，可以使用react-pdf-js插件，缺點是，當pdf文件稍微有點大的時候，加載顯示極慢，所以還是建議上面的方式。
2、使用antd-mobile長列表listView做長列表加載。（提供給各位一個做移動端長列表的備選方案）
3、項目初的時候，一運行起來就報各種缺babel插件的問題，找了兩個多小時找到原因，webpack的配置文件中，plugins里多配置了兩個插件，而在項目中沒有安裝且不需要這兩個插件，所以，在配置里去掉后再運行，就沒有報錯了。
4、echarts畫地圖和柱圖
a) 畫中國地圖
v5開始不提供地圖輪廓數據，選用v4.9.0版本，好處是既有地圖輪廓數據，地圖上省份名稱也居中了。地圖上的浮層是在tooltip里面配置，可以不專門添加position，它默認顯示的位置是靈活的。
b) 畫柱圖
v4版本無排序的API，如果柱圖數據需要排序，盡量跟后端同學溝通，讓其排好序把數據返給你。如果沒溝通好，我們這邊也可以處理，寫一個排序函數即可。
5、使用useRef綁定值做操作，可以直接綁定在DOM上。
寫后臺系統的話，通常都是直接引入UI組件，但是在移動端就對UI有要求，在UI庫引入組件改樣式也挺麻煩。以Input標簽舉例：
UI庫的Input組件可以輕松實現雙向綁定，但是有自帶樣式，要跟設計畫的輸入框樣式保持一樣就比較艱難。
原生的html標簽——input。可以自定義樣式，但是雙向綁定就沒有了，比如登錄頁，需要輸入賬戶密碼，使用js的方法可以拿到賬戶密碼，但是需要自己寫很多代碼。這個時候，useRef就是較好的選擇了，與useState，useEffect一樣，它是react的hooks函數。使用如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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標簽上*/ <input value={phone} ref={inputRef} onChange={changePhone} maxLength={11} placeholder='請輸入手機號' /> )} |
6、封裝組件小理念
單一職責原則：一個組件只做一件事。如果組件變得復雜，就再拆分成小組件。
以上就是react項目如何運行在微信公眾號的詳細內容，更多關于react運行在微信公眾號的資料請關注服務器之家其它相關文章！
原文鏈接：https://www.cnblogs.com/afafaa/p/14653210.html
