Taro介绍

Taro是一个开放式跨端跨框架解决方案，支持使用React、Vue.js、Nerv等框架来开发小程序、H5、react Native等应用。

特性​

多端转换支持​

可以支持转换到 H5、ReactNative 以及任意小程序平台。

目前官方支持转换的平台如下：

• H5
• ReactNative
• 微信小程序
• 京东小程序
• 百度小程序
• 支付宝小程序
• 字节跳动小程序
• QQ 小程序
• 钉钉小程序
• 企业微信小程序
• 支付宝 IOT 小程序
• 飞书小程序

Taro开发环境

1、安装@tarojs/cli（脚手架工具）

npm的安装方式

npm install -g @tarojs/cli

终端输入命令 taro，出现类似内容说明安装成功

yarn的安装方式

yarn global add @tarojs/cli

2、用脚手架创建项目

taro init myDemo1

目录结构

├── dist                   编译结果目录
├── config                 配置目录
|   ├── dev.js             开发模式配置
|   ├── index.js           默认配置
|   └── prod.js            生产模式配置
├── src                    源码目录
|   ├── pages              页面文件目录
|   |   ├── index          index 页面目录
|   |   |   ├── index.js   index 页面逻辑
|   |   |   └── index.css  index 页面样式
|   ├── app.css            项目总通用样式
|   └── app.js             项目入口文件
└── package.json

Taro使用React Hooks新特性

升级脚手架工具

在终端中输入下列命令进行升级。

taro update self

Taro中子组件的编写和传值

编写子组件代码：

import { View, Text } from '@tarojs/components'
function Child(){
  return ( 
    <View><Text>我是子组件</Text></View>
  )
}
export default Child

import引入这个组件。

import Child from './child.jsx'

 引入后就可以直接用标签的形式进行使用

父组件向子组件传值

通过props进行传值

父组件：把userName传递给子组件。

import Taro, {  useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import Child from './child.jsx'
import './index.less'

function Index(){

  const [userName ,setUserName] = useState('Hello World!!!!')

  return ( 
    <View>
        <Text>{userName}</Text>
        <Child userName={userName}></Child>
    </View>
  )

}

export default Index

子组件要增加props参数，然后才能用props进行接收。

import { View, Text } from '@tarojs/components'
function Child(props){
  return ( 
  <View><Text>我是子组件，父组件向我传值为:{props.userName}</Text></View>
  )
}
export default Child

Taro路由配置

通过app.jsx中的pages来配置。配置在第一个数组位置的，就是默认打开的首页。

配置路由

到/src/app.jsx下，然后在pages的数组里面加入代码。

pages: [
    'url',
    'url'
],

页面间的跳转

• navigateTo: 最基本的跳转方式，可以返回上级页面。三端（小程序、H5、React Native）都支持。
• redirectTo：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。三端（小程序、H5、React Native）都支持。
• switchTab： 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，Tab之间进行切换，配合Taro的导航栏一起使用，三端（小程序、H5、React Native）都支持。
• navigateBack: 返回上一级页面，这个在小程序中常使用，三端（小程序、H5、React Native）都支持。
• relaunch：关闭所有页面，打开到应用内的某个页面，三端（小程序、H5、React Native）都支持。
• getCurrentPages:获取当前页面信息所用，这个H5是不支持的。
• EventChannel：页面间事件通信通道，只支持小程序。

编写跳转方法，可以直接在function中进行声明.

const 方法名=()=>{
    Taro.navigateTo({url:'/url'})
}

在事件中触发gotoIndex方法 即可发生跳转

Taro页面间传递参数

查询字符串的形式进行传参

在跳转的url上，加一个?问号，后边跟上参数。

import Taro ,{useState}from '@tarojs/taro'
import {View , Text ,Button} from '@tarojs/components'
function Blog(){

    const  [blogTitle,setBlogTitle]=useState('JSPang Blog')

    const gotoIndex=()=>{
        Taro.navigateTo({url:'/pages/index/index?blogTitle='+blogTitle})
    }
    return (
        <View>
            <Text>Blog Page</Text>
            <Button onClick={gotoIndex}>我要去Index页面</Button>
        </View>
    )
}
export default Blog

接收传递参数并显示在页面上

使用this.$router.params进行接收。

useEffect(()=>{
setBlogTitle(this.$router.params.blogTitle)
},[])

多参数的传递和接收

用&进行链接

Taro.navigateTo({url:'/url?参数+'&参数})

 Taro静态资源引入方式

JavaScript资源的引入方法

import {方法名,方法名} from 'url'

图片的引入方式

 先用import进行引入，然后在使用src属性

也可以使用require在Image组件中直接使用，代码如下：

<Image src={require('url')}/>

Taro请求远程数据

使用Taro.request获取远程接口数据

Taro.request({
        url:'接口地址 '
    }).then(res=>{
        console.log(res.data)
    })