Taro介绍

Taro是一个开放式跨端跨框架解决方案，支持使用React、Vue.js、Nerv等框架来开发小程序、H5、react Native等应用。

特性

多端转换支持

可以支持转换到 H5、ReactNative 以及任意小程序平台。

目前官方支持转换的平台如下：

H5
ReactNative
微信小程序
京东小程序
百度小程序
支付宝小程序
字节跳动小程序
QQ 小程序
钉钉小程序
企业微信小程序
支付宝 IOT 小程序
飞书小程序

Taro开发环境

1、安装@tarojs/cli（脚手架工具）

npm的安装方式

npm install -g @tarojs/cli

终端输入命令 taro，出现类似内容说明安装成功

yarn的安装方式

yarn global add @tarojs/cli

2、用脚手架创建项目

taro init myDemo1

目录结构

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

Taro使用React Hooks新特性

升级脚手架工具

在终端中输入下列命令进行升级。

taro update self

Taro中子组件的编写和传值

编写子组件代码：

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

import引入这个组件。

import Child from './child.jsx'

引入后就可以直接用标签的形式进行使用

父组件向子组件传值

通过props进行传值

父组件：把userName传递给子组件。

import Taro, {  useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import Child from './child.jsx'
import './index.less'function Index(){const [userName ,setUserName] = useState('Hello World!!!!')return ( <View><Text>{userName}</Text><Child userName={userName}></Child></View>)}export default Index

子组件要增加props参数，然后才能用props进行接收。

import { View, Text } from '@tarojs/components'
function Child(props){return ( <View><Text>我是子组件，父组件向我传值为:{props.userName}</Text></View>)
}
export default Child

Taro路由配置

通过app.jsx中的pages来配置。配置在第一个数组位置的，就是默认打开的首页。

配置路由

到/src/app.jsx下，然后在pages的数组里面加入代码。

pages: ['url','url'
],

页面间的跳转

navigateTo: 最基本的跳转方式，可以返回上级页面。三端（小程序、H5、React Native）都支持。
redirectTo：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。三端（小程序、H5、React Native）都支持。
switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，Tab之间进行切换，配合Taro的导航栏一起使用，三端（小程序、H5、React Native）都支持。
navigateBack: 返回上一级页面，这个在小程序中常使用，三端（小程序、H5、React Native）都支持。
relaunch：关闭所有页面，打开到应用内的某个页面，三端（小程序、H5、React Native）都支持。
getCurrentPages:获取当前页面信息所用，这个H5是不支持的。
EventChannel：页面间事件通信通道，只支持小程序。

编写跳转方法，可以直接在function中进行声明.

const 方法名=()=>{Taro.navigateTo({url:'/url'})
}

在事件中触发gotoIndex方法即可发生跳转

Taro页面间传递参数

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

在跳转的url上，加一个?问号，后边跟上参数。

import Taro ,{useState}from '@tarojs/taro'
import {View , Text ,Button} from '@tarojs/components'
function Blog(){const  [blogTitle,setBlogTitle]=useState('JSPang Blog')const gotoIndex=()=>{Taro.navigateTo({url:'/pages/index/index?blogTitle='+blogTitle})}return (<View><Text>Blog Page</Text><Button onClick={gotoIndex}>我要去Index页面</Button></View>)
}
export default Blog

接收传递参数并显示在页面上

使用this.$router.params进行接收。

useEffect(()=>{
setBlogTitle(this.$router.params.blogTitle)
},[])

多参数的传递和接收

用&进行链接

Taro.navigateTo({url:'/url?参数+'&参数})

Taro静态资源引入方式

JavaScript资源的引入方法

import {方法名,方法名} from 'url'

图片的引入方式

先用import进行引入，然后在使用src属性

也可以使用require在Image组件中直接使用，代码如下：

<Image src={require('url')}/>

Taro请求远程数据

使用Taro.request获取远程接口数据

Taro.request({url:'接口地址 '}).then(res=>{console.log(res.data)})

Taro（多端开发框架）快速入门相关推荐

csp虚拟专用服务器,CSP应用服务端开发快速入门手册.doc
CSP应用服务端开发快速入门手册.doc CSP应用服务端开发快速入门手册CSP应用服务端开发快速入门手册包括以下几个主题:环境搭建创建工程EO建模BO建模数据初始化部署测试1. 环境搭建JDK:1. ...
开源即时通讯IM框架MobileIMSDK的Uniapp端开发快速入门
► 相关链接: ① MobileIMSDK-Uniapp端的详细介绍 ② MobileIMSDK-Uniapp端的开发手册new(* 精编PDF版) 一.理论知识准备您需要对Uniapp和Vue开发 ...
Qt应用程序开发框架-快速入门篇
文章目录一.Qt介绍及安装二.QtCreator介绍三.QtDesigner介绍四.Qt信号和槽一.Qt介绍及安装 Qt是一个1991年由Qt Company开发的跨平台C++图形用户界面应 ...
taro多端开发框架
@taro多端开发基础知识 Taro 是一个开放式跨端跨框架解决方案 Taro 3 可以支持转换到 H5.ReactNative 以及任意小程序平台. 目前官方支持转换的平台如下: H5 ReactN ...
qq位置如何用启动百度地图定位服务器,腾讯位置服务API快速入门
前言之前项目有个需求,在网页上显示微信发送过来的位置信息,该开始想用百度地图,后来发现腾讯地图相对简单一点快速入门申请Key 引入js 把###替换成你申请的key 定义容器设置好宽高度设置 ...
C++网络编程快速入门（二）：Linux下使用select演示简单服务端程序
目录 select参数解释 select使用规范 select使用缺点基本流程实例代码通信效果演示往期文章 select参数解释 extern int select (int __nfds, ...
OsharpNS轻量级.net core快速开发框架简明入门教程-代码生成器的使用
OsharpNS轻量级.net core快速开发框架简明入门教程教程目录从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...
OsharpNS轻量级.net core快速开发框架简明入门教程-基于Osharp实现自己的业务功能...
OsharpNS轻量级.net core快速开发框架简明入门教程教程目录从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...
【笔记-uni app】《uni-app 快速入门从零开始实现新闻资讯类跨端应用》
uni-app 快速入门从零开始实现新闻资讯类跨端应用第12章项目发行与打包 12-03 App端发行打包一.发行,原生app-云打包把包提交给dcloud的服务器,通过dcloud打包完后 ...
超图移动端 imobile 三维快速入门
IMobile for Android +IServer 在线服务三维服务快速入门本文将使用超图提供的组件进行移动端三维场景的基础入门,数据为通过Iserver发布的三维服务,因此本文分为两部分: ...

Taro（多端开发框架）快速入门

Taro介绍

特性

多端转换支持

Taro开发环境

1、安装@tarojs/cli（脚手架工具）

2、用脚手架创建项目

目录结构

Taro使用React Hooks新特性

升级脚手架工具

Taro中子组件的编写和传值

父组件向子组件传值

Taro路由配置

配置路由

页面间的跳转

Taro页面间传递参数

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

接收传递参数并显示在页面上

多参数的传递和接收

Taro静态资源引入方式

JavaScript资源的引入方法

图片的引入方式

Taro请求远程数据

Taro（多端开发框架）快速入门相关推荐

最新文章

热门文章

Taro（多端开发框架）快速入门

Taro介绍

特性​

多端转换支持​

Taro开发环境

1、安装@tarojs/cli（脚手架工具）

2、用脚手架创建项目

目录结构

Taro使用React Hooks新特性

升级脚手架工具

Taro中子组件的编写和传值

父组件向子组件传值

Taro路由配置

配置路由

页面间的跳转

Taro页面间传递参数

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

接收传递参数并显示在页面上

多参数的传递和接收

Taro静态资源引入方式

JavaScript资源的引入方法

图片的引入方式

Taro请求远程数据

Taro（多端开发框架）快速入门相关推荐

最新文章

热门文章

特性

多端转换支持