精华内容
下载资源
问答
  • Taro

    2020-11-08 14:58:12
    Taro 学习视频地址:????技术胖Taro免费视频教程 笔记参考文章地址:????技术胖Taro教程博客 1.Taro框架简介 Taro的优点: 目前Taro支持的终端: 微信小程序 H5 移动端Web页面 百度小程序 支付宝小程序 快应用 ...

    Taro

    学习视频地址:👉技术胖Taro免费视频教程

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

    1.Taro框架简介

    Taro的优点:

    Taro优点

    目前Taro支持的终端:

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

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

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

    开发环境搭建

    1.安装脚手架

    npm方法

    npm install -g @tarojs/cli
    

    yarn方法

    yarn global add @tarojs/cli
    

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

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

    taro init myDemo1
    

    在创建项目的时候会让你选择一些信息,比如项目描述,框架是基于React还是Vuecss使用的是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经典的生命周期,比如原来使用的statesetState赋值。

    首先在/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

    2021-05-07 16:37:10
    Taro 是一个开放式跨端跨框架解决方案 官网 拉了taro试了下 有自己的api文档和uniapp类似,也有自己配套的ui框架,遇到一个问题vue3的模板下引入taro-ui-vue是有问题,网上也没看到有解决方案。后续项目有接触taro会...

    在这里插入图片描述
    Taro 是一个开放式跨端跨框架解决方案 官网

    拉了taro试了下 有自己的api文档和uniapp类似,也有自己配套的ui框架,遇到一个问题vue3的模板下引入taro-ui-vue是有问题,网上也没看到有解决方案。后续项目有接触taro会更新···

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,524
精华内容 1,809
关键字:

taro