登录
当前位置： 首页 > 工具软件 > Taro > 使用案例 >

Taro

时经纬
2023-12-01

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♪(･ω･)ﾉ 不足之处请多多指教

 类似资料：

相关阅读

相关文章

相关问答

微信小程序 - Taro开发微信小测试,配置tabBar 无效?前端 - Taro vue微信小程序，使用px作为单位更换机型后没有自适应该怎么办呢？
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.