热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

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

说明:项目是create-react-app结合antd-mobile写的H5,在微信公众号里运行。

1、使用a标签预览或下载PDF。写法如下,手机上点击无反应,电脑上点击网页崩溃。

原因是浏览器监测到访问非安全访问,给拦截下来了。于是根据报错提示,新增target和rel两个属性,写法如下:

在电脑上和iOS上均可正常查看。

不过,在安卓上有以下几种情况:

a) 手机自带有QQ浏览器,直接就打开PDF。(这种情况是正常预览)

b) 手机上没有QQ浏览器,但是有其他浏览器,会弹出一个框,提示下载QQ浏览器或用其他浏览器打开。(这种也是正常预览下载)

c) 手机上没有QQ浏览器,但是有其他浏览器,点击PDF文件的时候,能够看到一个加载条加载效果,但是过后既不预览,也不提示。(这种是非正常的,微信禁止了)在a标签上加一个download属性可出现效果b)。

另外,如果需要直接预览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(); //定义
const [phone, setPhone] = useState("");
​
export default const Login= () =>{
  const changePhOne= () => {
    setPhone(inputRef?.current?.value)
  }
    return (
       /*绑定在input标签上*/
       
        )
}

6、封装组件小理念

单一职责原则:一个组件只做一件事。如果组件变得复杂,就再拆分成小组件。

以上就是react项目如何运行在微信公众号的详细内容,更多关于react运行在微信公众号的资料请关注其它相关文章!


推荐阅读
  • 作为140字符的开创者,Twitter看似简单却异常复杂。其简洁之处在于仅用140个字符就能实现信息的高效传播,甚至在多次全球性事件中超越传统媒体的速度。然而,为了支持2亿用户的高效使用,其背后的技术架构和系统设计则极为复杂,涉及高并发处理、数据存储和实时传输等多个技术挑战。 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • 在处理分享功能时,以往通常会首先考虑使用第三方SDK,如友盟等。然而,通过实际项目经验发现,利用iOS原生的UIActivityViewController不仅可以实现高效、稳定的分享功能,还能更好地控制用户体验。本文将详细介绍如何利用iOS原生技术缓存HTML内容,并结合URL分享的最佳实践,帮助开发者在实际开发中提升应用性能和用户满意度。 ... [详细]
  • 2019年后蚂蚁集团与拼多多面试经验详述与深度剖析
    2019年后蚂蚁集团与拼多多面试经验详述与深度剖析 ... [详细]
  • 如何创建和使用快捷链接:掌握打开链接的快捷方式技巧 ... [详细]
  • 在使用关系型数据库时,通常需要通过用户名和密码进行身份验证才能访问数据。然而,MongoDB默认情况下并不强制要求这种身份验证机制,使得用户无需凭据即可访问并执行各种操作。虽然这一设计简化了初学者的上手过程,但也带来了显著的安全风险。为了提升MongoDB的连接安全性,本文将探讨多种策略与实践,包括启用身份验证、配置网络访问控制、加密通信以及定期审计安全设置,以确保数据库的安全性和数据的完整性。 ... [详细]
  • 如何将PHP文件上传至服务器及正确配置服务器地址 ... [详细]
  • 在执行 Vim/VM 命令时遇到错误提示:检测到名为
    在使用 Docker 时,通过 Vim 编辑 Dockerfile 文件时遇到了错误提示:“检测到名为 .dockerfile.swp 的交换文件”。这一问题通常是因为上次编辑该文件时意外中断,导致系统生成了临时的交换文件。为了解决这个问题,可以手动删除该交换文件或使用 Vim 的恢复功能来恢复未保存的更改。 ... [详细]
  • Python网络爬虫入门:利用urllib库进行数据抓取
    Python网络爬虫入门:利用urllib库进行数据抓取在数据科学和Web开发领域,Python凭借其简洁高效的特性成为首选语言。本文主要介绍了如何在Windows环境下使用Python的urllib库进行基本的网络数据抓取。考虑到命令行操作的不便,作者选择了Jupyter Notebook作为开发环境,不仅简化了配置过程,还提供了直观的数据处理和可视化功能。通过实例演示,读者可以轻松掌握urllib的基本用法,为深入学习网络爬虫技术打下坚实基础。 ... [详细]
  • 负载均衡基础概念与技术解析
    随着互联网应用的不断扩展,用户流量激增,业务复杂度显著提升,单一服务器已难以应对日益增长的负载需求。负载均衡技术应运而生,通过将请求合理分配到多个服务器,有效提高系统的可用性和响应速度。本文将深入探讨负载均衡的基本概念和技术原理,分析其在现代互联网架构中的重要性及应用场景。 ... [详细]
  • MySQL性能优化与调参指南【数据库管理】
    本文详细探讨了MySQL数据库的性能优化与参数调整技巧,旨在帮助数据库管理员和开发人员提升系统的运行效率。内容涵盖索引优化、查询优化、配置参数调整等方面,结合实际案例进行深入分析,提供实用的操作建议。此外,还介绍了常见的性能监控工具和方法,助力读者全面掌握MySQL性能优化的核心技能。 ... [详细]
  • 题目描述:小K不幸被LL邪教洗脑,洗脑程度之深使他决定彻底脱离这个邪教。在最终离开前,他计划再进行一次亚瑟王游戏。作为最后一战,他希望这次游戏能够尽善尽美。众所周知,亚瑟王游戏的结果很大程度上取决于运气,但通过合理的策略和算法优化,可以提高获胜的概率。本文将详细解析洛谷P3239 [HNOI2015] 亚瑟王问题,并提供具体的算法实现方法,帮助读者更好地理解和应用相关技术。 ... [详细]
  • Linux磁盘管理入门指南:MBR分区格式详解与安装步骤
    在 CentOS 7.x 环境下,本文详细介绍了 MBR 分区格式的基本概念及其安装步骤。实验中使用了 SAS 和 SATA 硬盘,其中 SAS 硬盘主要用于企业级应用和服务器,而 SATA 硬盘则广泛应用于个人计算机和低端服务器。文章通过具体操作示例,帮助读者更好地理解和掌握 Linux 磁盘管理的基本技能。 ... [详细]
  • 成功实现Asp.Net MVC3网站与MongoDB数据库的高效集成
    我们成功地构建了一个基于Asp.NET MVC3框架的网站,并实现了与MongoDB数据库的高效集成。此次更新不仅完善了基本的创建和显示功能,还全面实现了数据的增删改查操作。在创建功能方面,我们修复了之前代码中的错误,确保每个属性都能正确生成。此外,我们还对数据模型进行了优化,以提高系统的性能和稳定性。 ... [详细]
  • 可转债数据智能抓取与分析平台优化
    本项目旨在优化可转债数据的智能抓取与分析平台。通过爬取集思录上的可转债信息(排除已发布赎回的债券),并结合安道全教授提出的三条安全线投资策略,新增了建仓线、加仓线和重仓线,以提供更精准的投资建议。 ... [详细]
author-avatar
嗒嗒爱臭臭
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有