react項目如何運行在微信公眾號
說明:項目是create-react-app結合antd-mobile寫的H5,在微信公眾號里運行。
1、使用a標簽預覽或下載PDF。寫法如下,手機上點擊無反應,電腦上點擊網(wǎng)頁崩潰。
<a href='pdf或圖片路徑'> PDF或圖片名稱 </a>
原因是瀏覽器監(jiān)測到訪問非安全訪問,給攔截下來了。于是根據(jù)報錯提示,新增target和rel兩個屬性,寫法如下:
<a href='pdf或圖片路徑' target='_blank' rel="noreferrer"> PDF或圖片名稱 </a>
在電腦上和iOS上均可正常查看。
不過,在安卓上有以下幾種情況:
a) 手機自帶有QQ瀏覽器,直接就打開PDF。(這種情況是正常預覽)
b) 手機上沒有QQ瀏覽器,但是有其他瀏覽器,會彈出一個框,提示下載QQ瀏覽器或用其他瀏覽器打開。(這種也是正常預覽下載)
c) 手機上沒有QQ瀏覽器,但是有其他瀏覽器,點擊PDF文件的時候,能夠看到一個加載條加載效果,但是過后既不預覽,也不提示。(這種是非正常的,微信禁止了)在a標簽上加一個download屬性可出現(xiàn)效果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開始不提供地圖輪廓數(shù)據(jù),選用v4.9.0版本,好處是既有地圖輪廓數(shù)據(jù),地圖上省份名稱也居中了。地圖上的浮層是在tooltip里面配置,可以不專門添加position,它默認顯示的位置是靈活的。
b) 畫柱圖
v4版本無排序的API,如果柱圖數(shù)據(jù)需要排序,盡量跟后端同學溝通,讓其排好序把數(shù)據(jù)返給你。如果沒溝通好,我們這邊也可以處理,寫一個排序函數(shù)即可。
5、使用useRef綁定值做操作,可以直接綁定在DOM上。
寫后臺系統(tǒng)的話,通常都是直接引入UI組件,但是在移動端就對UI有要求,在UI庫引入組件改樣式也挺麻煩。以Input標簽舉例:
UI庫的Input組件可以輕松實現(xiàn)雙向綁定,但是有自帶樣式,要跟設計畫的輸入框樣式保持一樣就比較艱難。
原生的html標簽——input??梢宰远x樣式,但是雙向綁定就沒有了,比如登錄頁,需要輸入賬戶密碼,使用js的方法可以拿到賬戶密碼,但是需要自己寫很多代碼。這個時候,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標簽上*/ <input value={phone} ref={inputRef} onChange={changePhone} maxLength={11} placeholder='請輸入手機號' /> ) }
6、封裝組件小理念
單一職責原則:一個組件只做一件事。如果組件變得復雜,就再拆分成小組件。
以上就是react項目如何運行在微信公眾號的詳細內(nèi)容,更多關于react運行在微信公眾號的資料請關注腳本之家其它相關文章!
相關文章
React?Native實現(xiàn)Toast輕提示和loading效果
這篇文章主要介紹了React Native實現(xiàn)Toast輕提示和loading效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09react基于Ant Desgin Upload實現(xiàn)導入導出
本文主要介紹了react基于Ant Desgin Upload實現(xiàn)導入導出,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-01-01react-native使用leanclound消息推送的方法
這篇文章主要介紹了react-native使用leanclound消息推送的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08利用React-router+Webpack快速構建react程序
目前 React、Webpack 等技術如火如荼,你是不是還在愁苦如何把這些雜亂的知識怎么學習一下,開啟一段新的前端開發(fā)之路呢?那么這篇將給大家運用示例代碼詳細的介紹使用React-router和Webpack如何快速構建一個react程序,感興趣的朋友們下面來一起看看吧。2016-10-10使用React hook實現(xiàn)remember me功能
相信大家在使用 React 寫頁面的時候都遇到過完成 Remember me 的需求吧!本文就將這個需求封裝在一個 React hook 中以供后續(xù)的使用,覺得有用的同學可以收藏起來以備不時之需,感興趣的小伙伴跟著小編一起來看看吧2024-04-04在Ant Design Pro登錄功能中集成圖形驗證碼組件的方法步驟
這篇文章主要介紹了在Ant Design Pro登錄功能中集成圖形驗證碼組件的方法步驟,這里的登錄功能其實就是一個表單提交,實現(xiàn)起來也很簡單,具體實例代碼跟隨小編一起看看吧2021-05-05