项目初期的技术选型

这次项目是个电商小程序，需要在微信、支付宝等多个平台上线。考虑到跨平台的需求，我们决定用Taro框架来开发。Taro号称是多端统一的解决方案，支持React语法，看起来挺适合我们的需求。

配置和初始化

安装Taro CLI，然后通过taro init命令初始化项目。这一步还算顺利，跟着官方文档走就行。记得选择React作为模板，因为团队里大部分人都熟悉React。

踩坑一：路由配置

一开始，我们按着React Router的思路来配置路由。结果发现，在Taro中，路由配置有点不同。我们需要在app.js里配置页面路由：

// app.js
import Taro, { Component } from '@tarojs/taro'
import Index from './pages/index'

class App extends Component {
  config = {
    pages: [
      'pages/index/index',
      'pages/detail/detail'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

  componentDidMount() {}

  componentDidShow() {}

  componentDidHide() {}

  componentDidCatchError() {}

  render() {
    return 
  }
}

Taro.render(, document.getElementById('app'))

这个配置看起来简单，但刚开始没搞懂为什么要在config里写这些路径。后来查了下文档，原来这是Taro的规范，需要在app.js中声明所有页面的路径。这个小坑让我折腾了半天才发现问题。

踩坑二：组件样式

接下来，我们开始写组件。在React中，我们可以直接用CSS模块化或者styled-components来管理样式。但在Taro中，有些地方需要特别注意。比如，我们在某个组件中用了内联样式：

// index.jsx
import React from 'react'
import './index.scss'

const Index = () => {
  return (
    
Hello Taro
  )
}

export default Index

结果发现，这种写法在某些平台上（如支付宝）不起作用。后来发现，Taro对内联样式的处理有限制，建议使用外部样式文件。于是，我们把内联样式移到了SCSS文件中：

// index.scss
.red-text {
  color: red;
}

// index.jsx
import React from 'react'
import './index.scss'

const Index = () => {
  return (
    
Hello Taro
  )
}

export default Index

这样改完后，问题解决了。这个小坑让我意识到，Taro虽然支持React语法，但在一些细节上还是有区别的。

最大的坑：性能问题

项目进行到中期，我们遇到了一个大问题：页面加载慢，特别是图片较多的页面。一开始以为是图片资源过大，优化了图片大小后，问题依旧存在。后来排查发现，是Taro的一些默认配置导致的性能瓶颈。

经过一番研究，我们发现Taro的默认配置里开启了useCache选项，这会导致页面数据缓存过多，从而影响性能。于是，我们调整了配置：

// config/index.js
module.exports = {
  // 其他配置...
  useCache: false,
  // 其他配置...
}

关闭useCache后，性能有所提升，但还是不够理想。进一步排查发现，Taro的useDidShow生命周期函数在页面切换时会触发多次，导致不必要的渲染。我们通过优化代码，减少了不必要的渲染次数：

// detail.jsx
import React, { useEffect } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'

const Detail = ({ id }) => {
  const [data, setData] = React.useState(null)

  useEffect(() => {
    if (id) {
      fetchData(id)
    }
  }, [id])

  const fetchData = async (id) => {
    const res = await Taro.request({
      url: https://jztheme.com/api/data/${id}
    })
    setData(res.data)
  }

  useDidShow(() => {
    // 这里可以放一些页面显示时的操作
  })

  return (
    

      {data ? 
{data.title}
 : 
Loading...
}
    
  )
}

export default Detail

通过这些调整，性能问题得到了显著改善。虽然还有一些小问题，但总体来说已经可以接受。

最终的解决方案

经过几轮优化，我们终于完成了项目的开发。整个过程中，虽然遇到了不少坑，但好在都一一解决了。最后，我们还做了一些额外的优化，比如使用懒加载来提升图片加载速度：

// detail.jsx
import React, { useEffect, useState } from 'react'
import Taro from '@tarojs/taro'

const Detail = ({ id }) => {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    if (id) {
      fetchData(id)
    }
  }, [id])

  const fetchData = async (id) => {
    const res = await Taro.request({
      url: https://jztheme.com/api/data/${id}
    })
    setData(res.data)
    setLoading(false)
  }

  return (
    

      {loading ? 
Loading...
 : (
        

          
{data.title}
           setLoading(false)} />
          
{data.content}
        
      )}
    
  )
}

export default Detail

通过懒加载，图片在进入视口时才加载，大大提升了页面的初始加载速度。

回顾与反思

总的来说，这次使用Taro开发多端小程序的经历既有挑战也有收获。Taro确实简化了很多跨平台的工作，但也带来了一些新的问题。特别是在性能优化方面，需要注意很多细节。

如果下次再用Taro开发，我会更加注意以下几点：

• 更早地关注性能问题，提前优化。
• 尽量避免使用内联样式，使用外部样式文件。
• 合理使用Taro的生命周期函数，减少不必要的渲染。

以上是我的项目经验，希望对你有帮助。如果有更好的实现方式，欢迎评论区交流。