说明:项目是create-react-app结合antd-mobile写的H5,在微信公众号里运行。
原因是浏览器监测到访问非安全访问,给拦截下来了。于是根据报错提示,新增target和rel两个属性,写法如下:
在电脑上和iOS上均可正常查看。
不过,在安卓上有以下几种情况:
a) 手机自带有QQ浏览器,直接就打开PDF。(这种情况是正常预览)
b) 手机上没有QQ浏览器,但是有其他浏览器,会弹出一个框,提示下载QQ浏览器或用其他浏览器打开。(这种也是正常预览下载)
c) 手机上没有QQ浏览器,但是有其他浏览器,点击PDF文件的时候,能够看到一个加载条加载效果,但是过后既不预览,也不提示。(这种是非正常的,微信禁止了)在a标签上加一个download属性可出现效果b)。
另外,如果需要直接预览PDF的话,可以使用react-pdf-js插件,缺点是,当pdf文件稍微有点大的时候,加载显示极慢,所以还是建议上面的方式。
a) 画中国地图
v5开始不提供地图轮廓数据,选用v4.9.0版本,好处是既有地图轮廓数据,地图上省份名称也居中了。地图上的浮层是在tooltip里面配置,可以不专门添加position,它默认显示的位置是灵活的。
b) 画柱图
v4版本无排序的API,如果柱图数据需要排序,尽量跟后端同学沟通,让其排好序把数据返给你。如果没沟通好,我们这边也可以处理,写一个排序函数即可。
写后台系统的话,通常都是直接引入UI组件,但是在移动端就对UI有要求,在UI库引入组件改样式也挺麻烦。以Input标签举例:
UI库的Input组件可以轻松实现双向绑定,但是有自带样式,要跟设计画的输入框样式保持一样就比较艰难。
原生的html标签——input。可以自定义样式,但是双向绑定就没有了,比如登录页,需要输入账户密码,使用js的方法可以拿到账户密码,但是需要自己写很多代码。这个时候,useRef就是较好的选择了,与useState,useEffect一样,它是react的hooks函数。使用如下:
import { useState,useRef } from 'react'; //引入 ​ const inputRef = useRef(); //定义 const [phone, setPhone] = useState(""); ​ export default const Login= () =>{ const changePhOne= () => { setPhone(inputRef?.current?.value) } return ( /*绑定在input标签上*/ ) }
单一职责原则:一个组件只做一件事。如果组件变得复杂,就再拆分成小组件。
以上就是react项目如何运行在微信公众号的详细内容,更多关于react运行在微信公众号的资料请关注其它相关文章!