react項目如何運行在微信公眾號

說明:項目是create-react-app結合antd-mobile寫的H5,在微信公眾號裡運行。

1、使用a標簽預覽或下載PDF。寫法如下,手機上點擊無反應,電腦上點擊網頁崩潰。

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

原因是瀏覽器監測到訪問非安全訪問,給攔截下來瞭。於是根據報錯提示,新增target和rel兩個屬性,寫法如下:

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

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

不過,在安卓上有以下幾種情況:

a) 手機自帶有QQ瀏覽器,直接就打開PDF。(這種情況是正常預覽)

b) 手機上沒有QQ瀏覽器,但是有其他瀏覽器,會彈出一個框,提示下載QQ瀏覽器或用其他瀏覽器打開。(這種也是正常預覽下載)

c) 手機上沒有QQ瀏覽器,但是有其他瀏覽器,點擊PDF文件的時候,能夠看到一個加載條加載效果,但是過後既不預覽,也不提示。(這種是非正常的,微信禁止瞭)在a標簽上加一個download屬性可出現效果b)。

<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函數。使用如下:

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運行在微信公眾號的資料請關註WalkonNet其它相關文章!

推薦閱讀:

    None Found