Taro

程序员文章站 2022-07-03 14:15:21

...

Taro

学习视频地址：????技术胖Taro免费****

笔记参考文章地址：????技术胖Taro教程博客

1.Taro框架简介

Taro的优点：

Taro

目前Taro支持的终端：

微信小程序
H5 移动端Web页面
百度小程序
支付宝小程序
快应用
ReactNative(生成原生的移动端app应用)
字节跳动小程序
QQ轻应用

2.Taro开发环境搭建和Hello World

Taro是一套遵循React语法规范的多端开发解决方案,使用Taro，只书写一套代码，再通过Taro的编译工具，讲源代码分别编译出可以再不同端（微信小程序，H5，RN等）运行代码。

Taro

开发环境搭建

1.安装脚手架

npm方法：

npm install -g @tarojs/cli

yarn方法：

yarn global add @tarojs/cli

2.创建项目并初始化项目

使用下面的命令来创建项目：

taro init myDemo1

在创建项目的时候会让你选择一些信息，比如项目描述，框架是基于React还是Vue，css使用的是sass还是less，模板是选择Redux还是默认模板等等…在这里我选择的是基于React，less，默认模板(模板选择不一样对应生成的文件目录以及文件内容也会不一样)。

3.运行项目

运行到浏览器(h5端)：

npm run dev:h5

或者

yarn dev:h5

运行到小微信程序：

npm run dev:weapp

或者

yarn dev:weapp

运行到小程序的话，Taro编译工具会把你的代码重新编译成一份小程序的代码并存放在dist目录下。在微信开发者工具中直接导入项目(不是新建项目)并选择dist文件夹即可。Taro作为一个可以运行到多端的框架代码，在进行维护修改代码时只需要修改源代码即可不需要在运行端修改。

我们每次运行到浏览器端(或者其它端)的时候，都会出现红字，提示我们不是最新版本，可以在终端中输入下列命令进行升级：

taro update self

3.项目目录分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZlHYCb2v-1604818612331)(C:\Users\Aurora\AppData\Roaming\Typora\typora-user-images\image-20201104141726287.png)]

--config                 配置文件
  --dev.js               项目开发时所用的配置
  --index.js             项目默认的基本配置
  --prod.js              项目打包时所用的配置
--dist                   dist目录用来用来存放对应的运行端的特殊代码，里面的代码不需要改
--node_modules           整个项目所需要的包
--src                    代码文件
  --pages                针对小程序设计的页面文件夹
--.editorconfig          设置语法格式的文件
--.eslintrc              配置eslint所要的配置
--.gitignore             在配置git时指定哪些目录不需要上传
--package.json           整个项目的配置文件
--project.config.json    项目信息的配置文件

官方给出的目录结构说明：

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

4.Taro使用React Hooks新特性

在/src/page/index/index.js页面，可以看到目前的代码全部都是React的基本语法，比如：继承components,比如React经典的生命周期，比如原来使用的state和setState赋值。

首先在/src/page/index/index.js中引入useState：

import React, { useState } from 'react'

注意，引入useState的时候其实from 'react'和from '@tarojs/taro'都可以，所以form不用进行更改，只需要将原来{ Component }换成{ useState }即可。app.js也不需要更改。

import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
import './index.less'

function Index(){

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

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

}

export default Index

5.Taro中子组件的编写和传值

1.编写子组件

打开/myDemo1/src/pages/index文件夹，在文件下面建立一个child.jsx文件：

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

接着在父组件index中把子组件child引入进来并渲染到页面上即可：

import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
import './index.less'
import Child from './child' //引入子组件

function Index(){

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

  return ( 
    <View>
        <Text>{userName}</Text>
        <Child></Child> //渲染子组件到页面
    </View>
  )

}

export default Index

2.向子组件传值

父组件向子组件传值用到的是props，首先在父组件中：

<Child username={userName}></Child>

大括号内的是在useState中声明的变量，前面的username可自定义。

在子组件中：

import React from 'react'
import { View, Text } from '@tarojs/components'
function Child(props){
  return ( 
  <View><Text>我是子组件,父组件给我传递的值是{props.username}</Text></View>
  )
}
export default Child

6.Taro路由配置和跳转

1.路由配置

在app.js的配置文件app.config.js中的pages属性表示的是Taro的路由信息，并且谁配置在第一个数组位置，谁就是默认打开的首页。

首先在src/pages下新建一个文件夹blog，在blog文件夹下新建一个blog.jsx：

import React from 'react'
import {View,Text} from '@tarojs/components'

function Blog(){
    return (
        <View>
            <Text>Blog Page</Text>
        </View>
    )
}
export default Blog

接着在app.config.js中的pages属性中增加一项blog并且放在第一个位置，那么运行之后就能看到Blog页面。

export default {
  pages: [
    'pages/blog/blog',
    'pages/index/index'
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  }
}

如果没有看到想要的效果，重新npm run dev:h5再运行一遍试试。

2.路由跳转

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是不支持的

这些API都和微信小程序中的语法类似。

例如现在想要实现的功能是从博客页面blog.jsx跳转回首页index.jsx：

首先在blog.jsx引入Taro(实现路由跳转必需)和按钮组件：

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

接着直接在function中声明跳转的方法：

const gotoIndex=()=>{
	Taro.navigateTo({url:'/pages/index/index'})
}

最后绑定到按钮上：

<Button onClick={gotoIndex}>我要去Index页面</Button>

全部代码：

import React from 'react'
import Taro from '@tarojs/taro'
import { View , Text , Button } from '@tarojs/components'

function Blog(){

    const gotoIndex=()=>{
        Taro.navigateTo({
            url:'/pages/index/index'
        })
    }

    return (
        <View>
            <Text>Blog Page</Text>
            <Button onClick={gotoIndex}>我要去Index页面</Button>
        </View>
    )
}
export default Blog

这样就实现了路由的跳转。

7.Taro路由参数的传递和接收

首先在blog.jsx中定义一个数据blogTitle：

const [blogTitle,setBlogTitle] = useState('JSPan---Taro教程')

然后在路由跳转处向跳转页面传递参数：

Taro.navigateTo({
	url:'/pages/index/index?blogTitle=' + blogTitle //这里采用字符串拼接的方式传递参数
})

在跳转页(接收参数页面)：

import React, { useState,useEffect } from 'react' //引入useEffect
...
const [blogTitle,setBlogTitle] = useState('') //同样声明一个数据用于接收传递过来的参数
...
useEffect(()=>{
	setBlogTitle(Taro.Current.router.params.blogTitle)
},[])
...
return ( 
    <View>
        <Text>{userName}</Text>
        <Child username={userName}></Child>
        <View>{blogTitle}</View>
    </View>
)

传递参数：url:'路由地址?参数键=' + 参数值，如果碰到多个参数中间用&连接即可。例如url: '/pages/index/index?blogTitle=' + blogTitle +'&introduce=' + introduce

接收参数：Taro.Current.router.params.键值

8.Taro静态资源的引入

1.引入JS资源

在/src目录下，新建一个/tools文件夹，然后在文件夹下边建立一个index.js文件，随便写两个方法并暴露出去：

export function xiedajiao(){
    console.log('我是谢大脚')
}

export function liuying(){
    console.log('我是刘英')
}

加入要在blog.jsx中引入使用这两个方法：

import { xiedajiao , liuying } from '../../tools'

function Blog(){
...
	useEffect(()=>{
        xiedajiao();
        liuying();
    },[])
}

引入这两个方法的时候，不能写import tools from `../../tools，因为你写的工具类/tools/index.js并不是有一个类，而是两个单独的方法。

2.引入图片资源

通常的图片引入方法是设置Image标签的src属性，例如：

<Image src="../../static/newbbd0001.jpg" width="100px" height="100px" />

这种方式是没办法引入成功的，因为我们的程序最终是要通过Taro编译器进行编译的，编译后的文件目录会进行改变，你所引用的图片就会失效。

正确的引入方式是先用import进行引入，然后再使用src属性：

import reactimg from '../../static/timg.jpg'
...
<View>
    <Image src={reactimg}></Image>
</View>

另外还有一种方式就是：

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

9.Taro列表渲染和三元运算符

1.列表渲染

先在blog.jsx中声明一个数组对象：

const girls = [
    {id:1,name:'谢大脚'},
    {id:2,name:'刘英'},
    {id:3,name:'王小蒙'},
    {id:4,name:x'香秀'}
]

然后在return中渲染出列表：

{ 
	girls.map((item,index)=>{
        return (
        	<View key={index}>{item.id}:{item.name}</View>
        )
    }) 
}

2.在jsx中使用逻辑判断(使用三元运算符)

错误示例：

const zhujueNum = 1
...
<view>
    {
        if(zhujueNum===1){
            return ('玉田')
        }else{
            return('刘能')
        }
    }
</view>

在Taro中，不能使用if...else...

正确示例：

// 使用三元运算符
<view>
	男主角是：{zhujueNum==1?'玉田':'刘能'}
</view>

或者

// 使用短路运算符
<view>
    男主角是：{zhujueNum==1 && '玉田' || '刘能'}
</view>

10.Taro请求远程数据

Taro请求远程数据用到的方法是Taro.request获取远程接口数据，并渲染到页面上。

1.获取数据

const testHandler= ()=>{
    Taro.request({
        url:'https://apiblog.jspang.com/default/getArticleList'
    }).then(res=>{
        console.log(res.data)
    })
}
...
<Button onClick={testHandler}>获取接口数据</Button>

2.渲染到页面上

const  [articleList,setArticleList] = useState([])
...
const testHandler= ()=>{
        Taro.request({
            url:'https://apiblog.jspang.com/default/getArticleList'
        }).then(res=>{
            console.log(res.data)
            setArticleList(res.data.list) //将获取到的接口数据赋值给变量articleList
        })
    }
...
// 渲染到页面
{
    articleList.map((item,index)=>{
    	return (<View key={index}>- {item.title} </View>)
    })
}

})
}
…
获取接口数据


#### 2.渲染到页面上

```jsx
const  [articleList,setArticleList] = useState([])
...
const testHandler= ()=>{
        Taro.request({
            url:'https://apiblog.jspang.com/default/getArticleList'
        }).then(res=>{
            console.log(res.data)
            setArticleList(res.data.list) //将获取到的接口数据赋值给变量articleList
        })
    }
...
// 渲染到页面
{
    articleList.map((item,index)=>{
    	return (<View key={index}>- {item.title} </View>)
    })
}

Taro

Taro

1.Taro框架简介

2.Taro开发环境搭建和Hello World

1.安装脚手架

2.创建项目并初始化项目

3.运行项目

3.项目目录分析

4.Taro使用React Hooks新特性

5.Taro中子组件的编写和传值

1.编写子组件

2.向子组件传值

6.Taro路由配置和跳转

1.路由配置

2.路由跳转

7.Taro路由参数的传递和接收

8.Taro静态资源的引入

1.引入JS资源

2.引入图片资源

9.Taro列表渲染和三元运算符

1.列表渲染

2.在jsx中使用逻辑判断(使用三元运算符)

10.Taro请求远程数据

1.获取数据

2.渲染到页面上

taro开发微信小程序的实践

Taro多端自定义导航栏Navbar+Tabbar实例

详解微信小程序（Taro）手动埋点和自动埋点的实现

Taro开发微信小程序的初体验

使用taro开发微信小程序遇到的坑总结

Taro集成Redux快速上手的方法示例

Taro Next H5 跨框架组件库实践

taro框架微信小程序端应用实践

《微信小程序项目开发实战：用WePY、mpvue、Taro打造高效的小程序》（笔记1）WePY开发环境的安装

taro开发微信小程序的实践