react项目如何运行在微信公众号

这篇文章主要介绍了react项目如何运行在微信公众号，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下

1、使用a标签预览或下载PDF。写法如下，手机上点击无反应，电脑上点击网页崩溃。
2、使用antd-mobile长列表listView做长列表加载。（提供给各位一个做移动端长列表的备选方案）
4、echarts画地图和柱图
5、使用useRef绑定值做操作，可以直接绑定在DOM上。
6、封装组件小理念

说明：项目是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='请输入手机号' />

									        )

									}