Taro的学习笔记

送你一个undfinded
768 阅读3分钟

Taro

Taro项目目录:

  • .temp:临时目录
  • config:配置文件目录
  • dist:生成H5小程序目录(不要更改里面的文件)
  • node_modules:node包
  • Src:项目源文件编写,根据路由配置区分
  • .editorconfig:编译器配置文件
  • .eslintrc:eslintrc编译器配置
  • .gitgnore:配置到此处不进行版本管理
  • package.json:项目配置文件
  • project.config.json:项目名字及其他配置

其中config目录中的

  • dev.js 开发进行配置
  • index.js 默认配置
  • prod.js 打包配置

taro update seft更新Taro到最新版本指令

Taro使用React Hooks新特性

代码例子

import Taro,{useState} from '@tarojs/taro'
import {View,Text} from '@tarojs/components'
import './index.less'
function Index(){
    const [userName,setUserName] = useState ('jspang.com')
    return(
        <View><Text>{userName}</Text></View>
    )
}
export default Index ; //默认导出

Taro子组件的编写和传值

新建子组件 child.jsx页面

代码例子

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

// 引入子组件:

import child from './child.jsx'
 function(){
...  
  return(
...
  child>aaa</child>
...
  • 子组件赋值
// 父组件传递:
 <child userName={userName}></child>
// 子组件接收:
function child(props){
   return(
    <View><Text>子组件:{props.userName}</Text></View>
)}
export default child

Taro路由和跳转

Taro项目目录中的Src目录下的app.jsx文件中配置路由代码

  • 代码示例
class App extends Components{
    config = {
      pages:[
       'pages/index/index', // pages数组这个就是Taro的路由
       'pages/index/index'  //谁在最上面就是默认打开页面
  ]
 }
}

路由跳转的五种方法

  • navigateTo 支持三端跳转Rn,小程序,H5 可以返回上一页
  • redirectTo 没有返回上一页功能
  • switchTab 支持三端跳转,顶部栏
  • navigateBack 返回上一级页面
  • relaunch 关闭所有页面打开其他页面
  • getCurrentPages 获得当前页面参数

Taro 路由跳转代码示例

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}>Go To Index</Button>
    </View>
 )
}
export default Blog;

Taro路由传参和接收

代码示例

import {useState,//添加useEffect} from '@tarojs/taro'
function Blog(){
     const [blogTitle,setBlogTitle]=useState('jspangBlog')  //声明
     const [introduce,setIntroducee]=useState('jspang_com')//传递多个参数
     
     const gotoIndex=()=>{
     Taro.navigateTo({url:'/pages/index/index?blogTitle='+blogTitle})
     Taro.navigateTo({url:'/pages/index/index?blogTitle='+blogTitle+'&introduce='+introduce})//传递多个参数 拼接字符串传参
  }
 }
}
function Index(){
     const [blogTitle,setBlogTitle]=useState('')  
     const [introduce,setIntroduce]=useState('')
useEffect(()=>{   //Hooks方法加空数组后,页面载入第一次时刷新只执行一次
     setBlogTitle(this.$route.params.blogTitle)
     setIntroduce(this.$route.params.introduce)
  },[])
return(  //渲染页面
     <View>{blogTitle}</View>
     <View>{introduce}</View>
 )
}

Taro静态资源引入

引入工具类

新建一个tools文件夹 在其中新建一个index.js

  • 代码如下
export function xiedajiao(){
     console.log('1111')
 }
  • 引入到项目文件
import {xiedajiao} from '../../tools' //引入
useEffect(()=>{
   xiedajiao()  //直接引入方法到useEffect中
},[])      // 结果会在网页的f12中显示出打印的1111

Image引入的两种方法

  1. import newbdd from '../../static/bbd12.jpg' // 在函数中
  2. <Image src={require('路径')} />

渲染列表

组建数组

const girls = [
      {id:1,name:'a'},
      {id:1,name:'b'},
      {id:1,name:'c'},
      {id:1,name:'d'}]

渲染方式

      {
        girls.map((item.index)=>{
        return(
           <View key={index}>{item.id}:{item.name}</View>
           //尽量加上key
          }
      }

Taro三元运算符

  • Taro中不能用if else 只能用三元运算符或短路运算符进行判断
//声明 let zhujiaoNum =1
//判断 
1. <View>男主:{zhujiaoNum ===1?'a':'b'}</View>
2. <View>男主:{zhujiaoNum ===1&&'a'||'b'}</View>

Taro的请求远程数据

通过按钮触发获取列表

<Button onClick={testHandler}>获取列表</Button>

声明触发的箭头函数

const testHandler=()=>{
    Taro.request({url:'网址'
}).then(res=>{
    console.log(res,data)
 })
}

渲染请求的数据到页面

//声明: const[articleList,setArticleList]=useState([])

重新赋值:

...then(res=>{
   ...
   setArticleList(res.data.List)
...
遍历ArticleList
   {
    articleList.map((item.index)=>{
    return(
       <View key={index}>- {item.title}</View>
      )
   })
}
   }
avatar
文章
阅读
粉丝