React + TypeScript + Taro前端开发小结

前言

项目是一个段落,我们先记录一下。本文以一个前端新手的视角,记录了React、Taro相关技术的开发心得,遇到的问题和解决方法。

一直说要学React(这篇博客:第一次学React的代码让我头疼),这个项目要做H5前端+小程序,终于可以用React了~

在使用React的开发框架之前就听说过京东的Taro,就这样吧,直接打开代码。

关于反应

是的,感觉比Vue的模板写法自由多了。 Taro文档里的例子都是类组件,但是“前端老师”一开始推荐我用组件,现在全部用组件,react应该是这样写的,真香~

因为我写了一段时间,react 对我很友好,至少我可以无缝上手声明式 UI。

但是感觉React的生态太大了,更新太快了,有点碎片化。很多第三方库的官方文档跟不上更新速度(批评mobx,不容易伤人)

一开始是看某知乎大V的React and Redux书,应该是我懒的原因。我不认为这很容易理解。果然技术强的高手不一定擅长教学? ~

参考关于

第一次用,但是作为一个天天用C#写后端的人,感觉处处熟悉~

不管怎样,它比 JS 好用 10,000 倍,而且类型提示很棒

我目前没有深入使用它。以后我会写博客来记录下我所拥有的。

参考Taro框架经验

框架是一个不错的框架,但是文档不是很完善,有些部分写的不是很清楚。感觉很多文档都是从微信小程序文档里抄来的。对于没有开发过微信小程序也没有看过微信官方文档的人来说,不是很友好。 (不过官方文档还是需要看的,不看的话,很多问题都找不到。)

然后Taro官方提供了一个UI库叫做,你用的话还是可以用的,但是更新太慢了。它的项目主页显示,上一次更新时间是去年(2021)6月份,到现在已经快一年了。时间没有移动。最新的稳定版还在2.x,Taro框架已经更新到第3版了。

因为我使用的Taro框架是3.x版本,所以只能硬着头皮上3的beta版本,导致出现一些奇怪的问题,头大。

除了这个接口库之外,Taro 官方还提供了另一个库,叫做 NutUI,不过它是基于 Vue 的。我不能使用这个项目。这个库非常勤奋地更新。上次更新是6小时前,Star也有。 4.2k,超过 3.9k。 ~~(好像React在京东不流行)~。

我还看到有一个名为 .貌似不错,更新很用心,不过Star才300多,不敢用~下次试试

我在使用时还参考了这些项目/代码/文档:

接下来进入正题,说一下遇到的一些问题/坑以及一般的解决方法。

页面路由问题

Taro 封装了路由相关的方法。等我做完项目,有时间翻看微信小程序文档,发现这东西跟小程序的路由很像。

PS:我讨厌这种路由设计。我不知道是谁想出了这个小程序。如果页面太多,维护起来也不容易~

在 app..ts 文件中配置路由,如下所示:

export default defineAppConfig({
  pages: [
    'pages/index/index',
    'pages/info/place',
    'pages/supply/index',
    'pages/user/login',
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',

图片[1]-React + TypeScript + Taro前端开发小结-唐朝资源网

navigationBarTextStyle: 'black' }, })

然后在你想跳转的地方使用Taro.({url: ‘pages/user/login’})

这里有个坑!太郎的热更新并不完美。添加新页面后,热更新不会生效。必须重启 yarn dev:h5 才能看到效果。一开始我是懵逼的~

地址参数问题

这个问题在我之前的博客:+Taro前后端分离项目实现企业微信登录有提到Taro本身提供()来为我们读取地址中的参数

比如我们在上面的路由跳转中添加了参数:Taro.({url: ‘pages/user/login?title=hello’})

那么我们需要像这样获取pages/user/login页面中的参数

import {useEffect} from "react"
import {useRouter} from "@tarojs/taro"
export default function () {
    const router = useRouter()
    
    useEffect(() => {
        console.log(router.params.title)
    }, [])
}

但是在读取微信登录服务器的回调参数时,却不起作用,而且无法检索。您必须自己匹配完整的链接 ..href。详情见我的博客:+ Taro前后端分离项目实现企业微信登录

芋头。不清除网址

这个看起来问题不大,但是也引起了一个小bug,就是我用微信登录后,退出时地址里的代码不会被清除,所以我可以用微信了再次不关闭页面。登录,代码还是老了,直接报错~

形成错误

说实话我不知道问题出在哪里

只有一页有这个问题。在最后一个输入框回车,表现是表单提交了,但是没有提交,页面变成重新刷新

我想不通

我不得不在最后添加一个隐藏的输入

 {
    }}
    disabled={true}
    border={false}
    style={{display: 'none'}}/>

图片[2]-React + TypeScript + Taro前端开发小结-唐朝资源网

网络请求封装

Taro 框架自带 Taro。可以用来请求,但是我用的时候,奇怪的是总是提示跨域。因为前期时间比较赶,所以没有深入,直接换成之前vue项目打包的axios。 ,果然axios好用~

(但是如果以后做小程序,应该还是要重构的,据说小程序不支持)

封装

感谢“前端老师coppy”提供的代码~

import {useState} from 'react'
export default function useYourState(state: T): [T, (state: Partial) => void] {
  const [_state, _setState] = useState(state);
  return [
    _state,
    (state: Partial) => {
      _setState((_state) => {
        return {
          ..._state,
          ...state
        };
      });
    }
  ];
}

这样你就不需要每次都添加…状态

使用前:

import {useState} from 'react'
export const LoginPage = observer(() => {
  const [state, setState] = useState({
    username: '',
    password: '',
  })
  
  setState({
      ...state,
      username: '', password: ''

图片[3]-React + TypeScript + Taro前端开发小结-唐朝资源网

}) }

使用后:

import useYourState from "@/utils/coppy_state";
export const LoginPage = observer(() => {
  const [state, setState] = useYourState({
    username: '',
    password: '',
  })
  
  setState({
      username: '', password: ''
  })
}

生产力提高了~

全局状态管理

我没有使用大名鼎鼎的 redux,而是使用了更简单的 mobx

但是找到的示例文档不是很好(比如官方中文文档:)

最后还是求助了“前端老师”,搞定了

坑:代码

不需要全局打包,直接使用全局变量,当然你也可以使用React

商店定义

import {makeAutoObservable} from "mobx";
import {User} from "@/models/user";
import * as auth from '@/utils/auth'
export class UserStore {
  isLogin = false
  user: User | null = null
  token = ''
  constructor() {
    makeAutoObservable(this)

图片[4]-React + TypeScript + Taro前端开发小结-唐朝资源网

} login(user: User, token: string) { this.user = user this.token = token this.isLogin = true // 保存登录数据到本地 auth.login(token, user.username) } logout() { this.isLogin = false this.user = null this.token = '' auth.logout() } } export const myUserStore = new UserStore()

组件使用

import {View} from "@tarojs/components"
import {AtButton} from "taro-ui";
import {observer} from "mobx-react-lite";
import {myUserStore} from "@/store/user";
import Taro from "@tarojs/taro";
import {useEffect} from "react";
export const UserPage = observer(() => {
  useEffect(() => {
    if (!myUserStore.isLogin) {
      Taro.redirectTo({url: '/pages/user/login'})
    }
  }, [])

图片[5]-React + TypeScript + Taro前端开发小结-唐朝资源网

return ( 用户中心 用户名:{myUserStore.user?.first_name} 退出登录 ) function logout() { myUserStore.logout() Taro.reLaunch({url: '/pages/index/index'}) } }) export default UserPage

参考 JSON 反序列化类

使用这个库:

模型定义,这个定义可以用JSON生成,网上有很多工具,比如:

export class User {
  username: string
  first_name: string
  last_name: string
  email: string
  date_joined: string
}

注意项目主页上的文档也是过期的,方法也过期了。你必须使用这个方法:

import {plainToInstance} from "class-transformer";
const user = plainToInstance(User, res.data.user)
myUserStore.login(user, res.data.token)

© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片