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;

你可能感兴趣的:(taro学习总结)