服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - React - react项目如何运行在微信公众号

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

2022-03-03 17:00阿凡凡没有提 React

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

说明:项目是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

延伸 · 阅读

精彩推荐
  • Reactreact项目从新建到部署的实现示例

    react项目从新建到部署的实现示例

    这篇文章主要介绍了react项目从新建到部署的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们...

    juejin9462022-01-21
  • ReactReact Hooks常用场景的使用(小结)

    React Hooks常用场景的使用(小结)

    这篇文章主要介绍了React Hooks常用场景的使用,根据使用场景分别进行举例说明,帮助你认识理解并可以熟练运用 React Hooks 大部分特性,感兴趣的可以了解...

    我是你的超级英雄5942022-02-28
  • ReactReact事件机制源码解析

    React事件机制源码解析

    这篇文章主要介绍了React事件机制源码解析的相关资料,帮助大家更好的理解和学习使用React框架,感兴趣的朋友可以了解下...

    ZHANGYU10762022-02-25
  • React简单分析React中的EffectList

    简单分析React中的EffectList

    这篇文章主要简单分析了React中的EffectList,帮助大家更好的理解和学习使用React进行前端开发,感兴趣的朋友可以了解下...

    zhangyu8182022-02-24
  • ReactReact三大属性之Refs的使用详解

    React三大属性之Refs的使用详解

    这篇文章主要介绍了React三大属性之Refs的使用详解,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下...

    xiaoznz8912022-03-02
  • React必须要会的50个React面试题

    必须要会的50个React面试题

    如果你是一位有抱负的前端程序员并准备面试,那么这篇文章很适合你。本文是你学习和面试 React 所需知识的完美指南。...

    疯狂的技术宅9082022-02-23
  • ReactReact useMemo和useCallback的使用场景

    React useMemo和useCallback的使用场景

    这篇文章主要介绍了React useMemo和useCallback的使用场景,帮助大家更好的理解和学习使用React框架,感兴趣的朋友可以了解下...

    woking4952022-02-25
  • React编写简洁React组件的小技巧

    编写简洁React组件的小技巧

    这篇文章主要介绍了编写简洁React组件的小技巧,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下...

    KooFE前端团队7602022-02-25