taro学习总结

1、taro是使用react编写一套代码，多端使用（微信小程序，百度小程序，h5开发，react native）

2、安装

npm install -g @tarojs/cli

3、使用taro创建项目名为demo-text

taro init demo-text  

4、创建完成后，进入demo-text目录，使用编译成h5代码，执行如下命令

yarn dev:h5

想要生成微信小程序代码

yarn dev:weapp

编译完成后，在微信开发者工具中使用导入项目就可以了。

5、注意，不要在编译过的代码中修改，要从源头修改。

6、使用react-hooks来编写taro页面，例如：将page/index.jsx

import Taro, { useEffect } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'

function Index(){
  useEffect(()=>{
    console.log('使用hooks编写');
  })
  return (
    <View>
      <Text>我是hooks页面</Text>
    </View>
  )
}
export default Index;

注意：为了让taro顺利多端编译，最好使用自带的标签，否则编译会出现奇怪的现象。

7、子父组件之间进行值的传递，和hooks穿值类似：

父组件：
import Taro, { useEffect, useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

import './index.less'
import Child from './Child.jsx'

function Index(){
  useEffect(()=>{
    console.log('使用hooks编写');
  })
  const [user, changeUser]=useState('领哥');
  return (
    <View>
      <Text>我是hooks页面</Text>
      <Child name={user} />
    </View>
  )
}
export default Index;


子组件：
import Taro, { useEffect } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'

function Child(props){
  useEffect(()=>{
    console.log('使用hooks编写');
  })
  return (
    <View>
      <Text>我是hooks页面-传过来值为{props.name}</Text>
    </View>
  )
}
export default Child;

8、路由跳转，路由的配置是在app.jsx中配置的，写在上边的默认加载页，如下：

config = {
    pages: [
      'pages/blog/index',
      'pages/index/index'
    ],
    window: {
      backgroundTextStyle: 'light', // 配置小程序字体样式，背景样式的
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

Taro提供了6个相关的导航API，我们可以使用这些API进行跳转，需要注意的是这些有些是小程序专用的。

• navigateTo: 最基本的跳转方式，可以返回上级页面。三端都支持的，小程序、H5、React Native。
• redirectTo：不记录上集页面，直接跳转。三端都支持的，小程序、H5、React Native。
• switchTab： Tab之间进行切换，这个要配合Taro的导航栏一起使用，三端都支持的，小程序、H5、React Native。
• navigateBack: 返回上一级页面，这个在小程序中常使用，三端都支持的，小程序、H5、React Native。
• relaunch：关闭所有额面，打开到应用内某个页面。三端都支持的，小程序、H5、React Native。
• getCurrentPages:获取当前页面信息所用，这个H5是不支持的。（注意）

例如：

import Taro, { useEffect, useState } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'


function Blog(){
  useEffect(()=>{
    console.log('使用hooks编写');
  })
  const goHome=()=>{
    Taro.navigateTo({url: '/pages/index/index'});
  }
  const [user, changeUser]=useState('领哥');
  return (
    <View>
      <Text>我是blog页面</Text>
      <Button onClick={goHome}>去往主页</Button>
    </View>
  )
}
export default Blog;

9、路由跳转参数的传递

import Taro, { useEffect, useState } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'

function Blog(){
  useEffect(()=>{
    console.log('使用hooks编写');
  })
  const [user, changeUser]=useState('领哥');
  const [blog, setBlog]=useState('跳转穿值');
  const goHome=()=>{
    Taro.navigateTo({url: `/pages/index/index?blog=${blog}`});
  }
  return (
    <View>
      <Text>我是blog页面</Text>
      <Button onClick={goHome}>去往主页</Button>
    </View>
  )
}
export default Blog;


接收参数页面：
import Taro, { useEffect, useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

import './index.less'
import Child from './Child.jsx'

function Index(){
  useEffect(()=>{
    console.log('使用hooks编写');
    setBlog(this.$router.params.blog);
  })
  const [blog, setBlog]=useState('');
  const [user, changeUser]=useState('领哥');
  return (
    <View>
      <Text>我是hooks页面 {blog}</Text>
      <Child name={user} />
    </View>
  )
}
export default Index;

10、静态资源的引入

引入less，css和react一样，使用图片和微信小程序一样，要使用Images包裹，其中src的路径是有两种方式的，一种是require，另一种是先使用import引入，再放进src中

import imgs from '../../static/timg.jpg'

<Image src={require('../../static/timg.jpg')} />
<Image src={imgs} />

11、接口调用：使用Taro.request({url: ‘http://www.baidu.com’}).then(res=>console.log(res))

import Taro, { useEffect, useState } from '@tarojs/taro'
import { View, Text, Button, Image } from '@tarojs/components'

import imgs from '../../static/timg.jpg'

function Blog(){
  const [list, setList]=useState([]);
  const getDataApi=()=>{
    Taro.request({
      url:'https://5d47d6bd992ea9001444cb28.mockapi.io/api/data/list',
    }).then(res=>{
      setList(res.data);
      console.log(res.data)
    })
  }
  return (
    <View>
      <Text>
          {
            list.map(item=>{
              return <Text>{item.name}</Text>
            })
          }
      </Text>
      <Button onClick={getDataApi}>点击调用接口</Button>
      <Image src={require('../../static/timg.jpg')} />
      <Image src={imgs} />
    </View>
  )
}
export default Blog;