Taro

最新推荐文章于 2023-11-01 16:51:50 发布

xiaoliuya····

最新推荐文章于 2023-11-01 16:51:50 发布

阅读量514

点赞数

分类专栏： Taro

本文链接：https://blog.csdn.net/weixin_46643178/article/details/114005636

版权

Taro 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Taro的安装脚手架

1.安装-----yarn global add @tarojs/cli

------------npm install -g @tarojs/cli

2…安装完成后,使用脚手架创建项目:

taro init 文件名创建项目

3.运行:

浏览器:yarn dev:h5

微信小程序: yarn dev:weapp — 引入dist

百度: yarn dev:swan

支付宝小程序: yarn dev:alipay

QQ小程序: yarn dev:qq

京东小程序: yarn dev:jd

4.配置的管理体系:

├── config                    # 项目配置
│   ├── dev.js                # 开发环境配置文件
│   ├── index.js              # 主配置文件
│   └── prod.js               # 生产环境配置文件
├── package.json
├── project.config.json       # 微信小程序项目配置
└── src                       # 项目源码目录
    ├── app.scss              # 根组件样式
    ├── app.jsx               # 根组件 app
    ├── index.html            # 等待被嵌入代码的 HTML 文档
    └── pages                 # 页面目录
        └── index             # index 页面模块
            ├── index.scss    # index 页面样式
            └── index.jsx     # index 页面组件

5.升级脚手架的方法:

taro update self

验证Hooks的新特性:index.jsx

import Taro, {  useState } from '@tarojs/taro'

6.使用hooks里面的useState

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

function Index(){
const [useName,setUsename]=useState('lxy.vcom')
return(
  <View>
  <Text>{useName}</Text>
  </View>
)
}
export default Index;

7.编写子组件:

7.1在pages/index 下面创建Child.jsx的文件:打开文件编写组件

import {View,Text} from '@tarojs/components'
function Child(props){
    return(
        <View>
            {/* Child父组件前面的是什么对应的props.是什么 */}
            <Text>我是子组件</Text>
        </View>
    )
}
export default Child;

7.2通过导入到index.jsx页面中用import进入这个组件:

import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
// 通过导入子组件
import Child from './Child.jsx'  ---------!!!!!导入这个
import './index.less'
function Index(){
const [useName,setUsename]=useState('lxy.vcom')
return(
  <View>
  <Text>{useName}</Text>
  <Child></Child>     --------------------- !!!引入这个
  </View>
)
}
export default Index;

8.父组件向子组件传值:通过props进行

8.1修改index.jsx的代码把useName传给子组件

import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
// 通过导入子组件
import Child from './Child.jsx'
import './index.less'
function Index(){
const [useName,setUsename]=useState('lxy.vcom')
return(
  <View>
  <Text>{useName}</Text>
  <Child userchild={useName}></Child>         -------!!!!
  </View>
)
}
export default Index;

8.2子组件要增加props参数才能用到props的接收

import React from 'react'
import {View,Text} from '@tarojs/components'
function Child(props){
    return(
        <View>
            {/* Child父组件前面的是什么对应的props.是什么 */}
    <Text>我是子组件 父组件向我传值:{props.userchild}</Text>
        </View>
    )
}
export default Child;

只要配置路由的，就是页面，没配置的就默认是组件

9.配置路由：

由于用到Taro3.0 所以要index.config.js他的标题否则他跑不了

export default {
  navigationBarTitleText: '测试页'
}

9.1 在`/src/pages/`文件夹下，建立一个`/test`文件夹，在文件夹下面建立一个`index.jsx`文件

import {View,Text} from '@tarojs/components'
import React from 'react'
function Test(){
    return (
        <View>
            <Text>
                新建的文件
            </Text>
        </View>
    )
}
export default Test;

9.1在index.config配置路由:

那个在前面就执行哪一个文件

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

10页面的跳转:

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是不支持的。（注意）

10.1跳转需要用到Taro组件用import进行引入用一个button组件

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

通过点击进行方法的声明

   const gotoIndex=()=>{
        // 可以返回到上一级
        Taro.navigateTo({url:'/pages/index/index'})
    }

绑定点击事件

    <Button onClick={gotoIndex}>跳转到index页面</Button>

完整的代码:

import Taro from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
import React from 'react'
function Test() {
    const gotoIndex = () => {
        //这里的url的路径对应配置的路由的路径
        // 可以返回到上一级
        Taro.navigateTo({url: '/pages/index/index' })
        
        // 不可以返回到上一级
        // Taro.reLaunch({url:'/pages/index/index'})

        //返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
        //Taro.navigateBack({url:'/pages/index/index'})
    }
    return (
        <View>
            <Text>
                新建的文件
            </Text>
            <Button onClick={gotoIndex}>跳转到index页面</Button>
        </View>
    )
}
export default Test;

11.Taro页面间的传递参数

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

在跳转的url上，加一个?问号的形式，然后后边跟上参数。 test文件里面

定义一个useState 以及url的路径

Taro.navigateTo({ url: '/pages/index/index?transfer=' + transfer})

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

function Test() {
    const [transfer, setTransfer] = useState('lxysss')
    const [trans, setTrans] = useState('trans.more.number')
    const gotoIndex = () => {
        Taro.navigateTo({ url: '/pages/index/index?transfer=' + transfer})
    }
    return (
        <View>
            <Text>
                新建的文件
            </Text>
            <Button onClick={gotoIndex}>跳转到index页面</Button>
        </View>
    )
}
export default Test;

使用Current.router.params进行接收。 index父组件进行接收

通过定义一个useState接收一个空的通过方法用useEffect进行接收setTransfer(Taro.getCurrentInstance().router.params.transfer)

import React, { useEffect, useState } from 'react'
import { View, Text } from '@tarojs/components'
// 通过导入子组件
import Child from './Child.jsx'
import Taro from '@tarojs/taro'

function Index() {

  const [transfer, setTransfer] = useState('')
  const [useName] = useState('lxy.vcom')
  useEffect(() => {
    // Current=Taro.getCurrentInstance()
    setTransfer(Taro.getCurrentInstance().router.params.transfer)
  return (
    <View>
      <Text>{useName}</Text>
      <Child userchild={useName}></Child>
      <View>{transfer}</View>
    </View>
  )
}
export default Index;

11.2多参数的传递和接收

传递多个参数和多个参数的接收用&进行链接同时也是定义一个useState 通过useEffect进行传

Taro.navigateTo({ url: '/pages/index/index?transfer=' + transfer + '&trans='+trans

这里的带的参数是useState 定义const前面的一个的参数

test的文件

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

function Test() {
    const [transfer, setTransfer] = useState('lxysss')
    const [trans, setTrans] = useState('trans.more.number')
    const gotoIndex = () => {
        Taro.navigateTo({ url: '/pages/index/index?transfer=' + transfer + '&trans='+trans })
    }
    return (
        <View>
            <Text>
                新建的文件
            </Text>
            <Button onClick={gotoIndex}>跳转到index页面</Button>
        </View>
    )
}
export default Test;

通过index进行也是定义一个

<View>{transfer}</View> <View>{trans}</View>

useSTate定义的const第一个进行渲染

import React, { useEffect, useState } from 'react'
import { View, Text } from '@tarojs/components'
// 通过导入子组件
import Child from './Child.jsx'
import Taro from '@tarojs/taro'

function Index() {

  const [transfer, setTransfer] = useState('')
  const [useName] = useState('lxy.vcom')
  const [trans, setTran] = useState(' ')

  useEffect(() => {
    // Current=Taro.getCurrentInstance()
    setTransfer(Taro.getCurrentInstance().router.params.transfer)
    setTran(Taro.getCurrentInstance().router.params.trans)
  }, [])
  return (
    <View>
      <Text>{useName}</Text>
      <Child userchild={useName}></Child>
      <View>{transfer}</View>
      <View>{trans}</View>
    </View>
  )
}
export default Index;

12.静态资源的引入：

12.1JavaScript资源的引入方式：

在/src目录下，新建一个/tools文件夹，然后在文件夹下边建立一个index.js文件。通过方法的方式


export function imhone() {
    console.log('小刘猪');
}

export function imgtwo() {
    console.log('图片2');
}

通过useEffect的方式进行

import Taro from '@tarojs/taro'
import { View, Text, Button,Image } from '@tarojs/components'
import React, { useEffect, useState } from 'react'
import images from '../../accect/tox.jpg'
//资源引入
import {imhone,imgtwo} from '../../toolsimg'

function Test() {
    const [transfer, setTransfer] = useState('lxysss')
    const [trans, setTrans] = useState('trans.more.number')
    const gotoIndex = () => {
        Taro.navigateTo({ url: '/pages/index/index?transfer=' + transfer + '&trans='+trans })
    }

    useEffect(()=>{
        imgtwo()
        imhone()
    },[])
    return (
        <View>
            <Text>
                新建的文件
            </Text>
            <Button onClick={gotoIndex}>跳转到index页面</Button>
        </View>
    )
}
export default Test;

12.2图片的引入方式

新建一个文件放图片，先用import进行引入，然后在使用src属性也可以通过require进行也可以通过src的在线进行引入

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

import images from '../../accect/tox.jpg'
//资源引入
import {imhone,imgtwo} from '../../toolsimg'

function Test() {
  
<View>
    
  <Image src={images} style='width:100px height:200px' lazyLoad='false' />
    
<Image src={require('../../accect/12.png')} style='margin-left:10px'></Image>
    
 <Image src='https://cdn.pixabay.com/photo/2021/01/24/20/21/cloud-5946381__340.jpg'/>
  </View>
 </View>
    )
}
export default Test;

13.构建数组对象进行jsx的渲染

通过map进行渲染:

 const contest = [
        { id: 1, name: '小红' },
        { id: 2, name: '小屁' },
        { id: 3, name: '小路' },
        { id: 4, name: '小晓' }
    ]
    
        {
                contest.map((item)=>{
                  return(
                    <View key={item.id}>{item.id}:{item.name}</View>
                  )
                })
            }

13.2逻辑处理通过三元表达式还有短路运算

    const logical = 1;

    <View>三元表达式的逻辑判断：{logical === 1 ? '晓刘' : '小红'}</View>
            <View>短路运算: {logical === 1 && '小赚' || '小力'}</View>

14.请求远程数据

14.1: 方法中使用Taro.request后去远端数据

通过useState去进行点击的时候内容出来:

JSX中编写一个``按钮，加上onClick事件

遍历数据

onst [remo,setRemo]=useState([])
    // 请求远程数据
    const getremote=()=>{
        Taro.request({
            url:'写一个请求地址'
        }).then(res=>{
            console.log(res.data);
            setRemo(res.data.list)
        })
    }
     {/*请求远程数据  */}
            <Button onClick={getremote}>获取数据列表</Button>
            {
                remo.map((item)=>{
               return(
                <View key={item.id} style='font-size:10px; margin:10px'>{item.title}</View>
               )
                })
            }
            / 请求远程数据
    const getremote=()=>{
        Taro.request({
            url:'https://apiblog.jspang.com/default/getArticleList'
        }).then(res=>{
            console.log(res.data);
            setRemo(res.data.list)
        })
    }
     {/*请求远程数据  */}
            <Button onClick={getremote}>获取数据列表</Button>
            {
                remo.map((item)=>{
               return(
                <View key={item.id} style='font-size:10px; margin:10px'>{item.title}</View>
               )
                })
            }

🍖Thanks♪(･ω･)ﾉ不足之处请多多指教

xiaoliuya····

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Taro

Taro的安装脚手架1.安装-----yarn global add @tarojs/cli------------npm install -g @tarojs/cli2…安装完成后,使用脚手架创建项目:taro init 文件名创建项目3.运行:浏览器:yarn dev:h5微信小程序: yarn dev:weapp — 引入dist百度: yarn dev:swan支付宝小程序: yarn dev:alipayQQ小程序: yarn dev:qq京东小程序: yarn dev:j
复制链接

扫一扫