专栏首页极乐技术社区实战教程 | 初次使用Taro、react、hook开发小程序

实战教程 | 初次使用Taro、react、hook开发小程序

前言

首次开发小程序,谈谈自己对taro的看法以及遇到的一些坑和注意点,本次开发使用了Taro的框架,公司专家对框架做了bug修复,打成了私包,采用react+hook的方式去开发业务,16.8.0发布hook之后,一直采用hook的方式编写react,因此在整体react版本>16.8.0的情况下,我都会使用hook去写,强烈推荐读者也逐渐从类组件转成函数组件,会比写类组件很舒服。

Taro简介

Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

官网:docs.taro.zone/docs/README

目前Taro已经更新到3.x版本,相较于 Taro 1/2 采用了重运行时的架构,让开发者可以获得完整的 React/Vue 等框架的开发体验,但是带来的性能成本很大。总的来说对于初学者,taro实现了一套代码多端小程序复用的需求,还是很好的解决方案,值得入手学习,但确实也有不少本身框架的坑等着你。

Hook

Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。喜欢函数式编程的不妨使用hook来编写组件。

官方文档:zh-hans.reactjs.org/docs/hooks-…

通常开发过程中常用的React hook主要有以下几个:useStateuseCallback、useMemo、useEffect

Taro也提供了很多的hook(包括很多的生命周期和功能):

Taro Hook指南:taro-docs.jd.com/taro/docs/h…

读者可以根据需要,从中选择你想要功能对应的hook。

常用的Taro Hook:

useShareAppMessage

小程序分享

useShareAppMessage(res => {

return {

title: '自定义转发标题',

path: '/page/user?id=123'

}

})

useRouter

获取路由中参数

useReachBottom

配合页面配置onReachBottomDistance可以实现触底加载更多,方便快捷

useReachBottom(() => { console.log('onReachBottom')})

其他hook参考官网。

Hook使用注意点

useEffect

依赖最好不要超过三个,适当时候可以拆分成多个useEffect,保证每个副作用执行的时机和次数,如果使用了redux,为了避免缓存影响,可以适当的在useEffect后返回一个函数,执行初始化页面redux的操作。

useState

有时我们初始化state时会利用外部传参:

const { children } = props;

const hasChildren = children && children.length > 0;

const [isParent, setIsParent] = useState(hasChildren);

注意,state只会初始化一次,假如数据发生变化,第一次children为空,第二次有数据,state的值不会再发生变化,这时候需要结合useEffect重新给isParent赋值。

小程序接口API注意点

小程序的api存在不同版本的兼容性问题,因此在使用Api的时候一定要看清是什么版本开始支持的,比如微信的获取头像和昵称的api在微信>=7.0.9的版本中做了调整,在使用前记得兼容。

本文分享自微信公众号 - 极乐技术社区(wxapp-union),作者:煲仔明

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-05-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Taro 小程序开发大型实战(一):熟悉的 React,熟悉的 Hooks

    正当移动互联网进入白热化阶段时,以微信小程序为代表的一类“轻应用”异军突起。它们无需下载,使用方便,“用完即走”,同时功能也较为完备,一经推出即得到了各大平台和...

    一只图雀
  • 一文看懂如何使用 React Hooks 重构你的小程序!

    一直关注小程序开发的朋友应该会注意到,最开始小程序就是为了微型创新型业务打造的一个框架,最多只能运行 1m 的包。可是后来发现很多厂商把越来越多的业务搬到了小程...

    极乐君
  • 全栈开发一款团购小程序应用

    目前Taro已经进入了3.x时代,可以让开发者使用完整的React、Vue等框架进行开发。笔者作为一个重度React使用者自然会在众多框架中选用Taro(之后会...

    nasawz
  • Taro 小程序开发大型实战(二):多页面跳转和 Taro UI 组件库

    在上一篇教程[1]中,我们用熟悉的 React 和 Hooks 搞定了“奥特曼俱乐部”的雏形。在这一篇文章中,我们将用 Taro 自带的路由功能实现多页面跳转,...

    一只图雀
  • 如何全栈开发一款团购小程序应用

    目前Taro已经进入了3.x时代,可以让开发者使用完整的React、Vue等框架进行开发。笔者作为一个重度React使用者自然会在众多框架中选用Taro(之后会...

    用户1172164
  • 一杯茶的时间,上手 Taro 京东小程序开发

    小程序世界纷争不断,巨型 App 都在纷纷构建自己的小程序流量入口,希望在造福商家、用户的同时,也能巩固自家流量壁垒,我们已经熟知了微信小程序、支付宝小程序,我...

    一只图雀
  • Taro 小程序开发大型实战(四):使用 Hooks 版的 Redux 实现应用状态管理(上篇)

    •熟悉的 React,熟悉的 Hooks[1]:我们用 React 和 Hooks 实现了一个非常简单的添加帖子的原型•多页面跳转和 Taro UI 组件库[2...

    一只图雀
  • Taro 小程序开发大型实战(五):使用 Hooks 版的 Redux 实现应用状态管理(下篇)

    这是使用 Hooks 版的 Redux 重构状态管理的下篇,在上篇中我们实现了 user 部分 的状态管理的重构,但受限于篇幅,我们还剩下 Footer 组件部...

    一只图雀
  • Github Daily - Taro 实战网易云音乐小程序

    嗨,我是 Martin,也叫老王。今天推荐一个 React 实战项目,使用的是京东的 Taro 框架。

    前端老王
  • Taro 实战网易云音乐小程序

    现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套...

    前端老王
  • Taro 小程序开发大型实战(八):尝鲜 LeanCloud Serverless 云服务

    在上两篇文章中,我们讲解了使用微信小程序云作为我们的小程序后台,然后我们跑通了我们的注册登录、创建帖子、获取帖子列表、获取帖子详情的全栈流程,如果只想了解微信小...

    一只图雀
  • 多端统一开发框架 Taro 1.0 正式发布

    Taro 是一个多端统一开发框架,它支持使用 React 的开发方式来编写可以同时在微信小程序、Web 、React Native 等多个平台上运行的应用,帮助...

    花叔
  • 小程序开发框架对比(wepy/mpvue/uni-app/taro)

    uni-app 团队投入两周完成了这个深度评测,下面我们就分享下,实际开发不同框架的测试例时遇到的问题,以及在各端的兼容测试结果。在本文里,我们团队基于真实测...

    码客张
  • Taro 支持使用 Vue3 开发小程序

    9 月 19 日凌晨,Vue3 在经过多个开发版本的迭代后,终于迎来了它的正式版本,"One Piece" 的代号也昭示了其开拓伟大航路的野心。

    一只图雀
  • React的移动端和PC端生态圈的使用汇总

    由于React的生态极为庞大,本文内容部分来自一些别人的汇总,至于原文只要还是能找到的,我都会贴上地址,谢谢前期贡献的作者,如果有没有被汇总到的,欢迎在下面补充...

    Peter谭金杰
  • Taro 小程序开发大型实战(六):尝鲜微信小程序云(上篇)

    如果你敲到这里,会发现我们之后的内容都是纯前端(小程序端)的逻辑,一个完整的可上线小程序应用应该还要有后端,在这篇文章中,我们将使用微信小程序云作为我们的后台,...

    一只图雀
  • React的移动端和PC端生态圈的使用汇总

    对于一项技术,我们不能停留在五分钟状态,特别喜欢一句话,用什么方式绘制UI界面一点不重要,重要的是底层的思维,解决问题和优化的思路。

    桃翁
  • React的移动端和PC端生态圈的使用汇总

    前端迷
  • Taro开发微信小程序之初体验

    糊糊糊糊糊了

扫码关注云+社区

领取腾讯云代金券