-
Taro
2020-11-08 14:58:12Taro 学习视频地址:????技术胖Taro免费视频教程 笔记参考文章地址:????技术胖Taro教程博客 1.Taro框架简介 Taro的优点: 目前Taro支持的终端: 微信小程序 H5 移动端Web页面 百度小程序 支付宝小程序 快应用 ...Taro
学习视频地址:👉技术胖Taro免费视频教程
笔记参考文章地址:👉技术胖Taro教程博客
1.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还是Vue,css使用的是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经典的生命周期
,比如原来使用的state
和setState
赋值。首先在
/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
2019-05-10 09:26:25因为公司项目,需要做一微信小程序,所以现需要学习taro。。。。。 话不多说,你就知道我是哪个公司的了,啦啦啦,公司自研的多端(微信、支付宝、百度、今日头条小程序)/统一框架,溜了几眼,貌似很优秀呢, ...因为公司项目,需要做一微信小程序,所以现需要学习taro。。。。。
话不多说,你就知道我是哪个公司的了,啦啦啦,公司自研的多端(微信、支付宝、百度、今日头条小程序)/统一框架,溜了几眼,貌似很优秀呢,
github源码拷贝一番。。。。。。。。
由于涉及到开发,,,,,,我得学啊,我想死啊。。。。。
不过他这种吧,貌似也不错,一次代码,多端运行。。。。。
我无力抗争,我愿意学。。。。。
学吧。。。。。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
一taro官方文档
https://nervjs.github.io/taro/docs/README.html
1安装
npm install -g @tarojs/cli
2使用taro命令创建项目
taro init 项目名
【
/输入项目介绍
/是否需要使用TypeScript
/请选择css预处理器(Sass/Less/Stylus)
/请选择模板(
】
3安装依赖(仅在依赖包安装失败时使用)
npm install
4多端?
进入项目目录开始开发,目前已经支持 微信/百度/支付宝/字节跳动小程序、H5 以及 ReactNative 等端的代码转换,针对不同端的启动以及预览、打包方式并不一致
5编译---预览?打包?
6.下载微信小程序开发者工具
配置项目。。。。。。
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
7.使用h5编译预览项目
npm run dev:h5编译项目
npm run build:h5打包项目
-
三维地图GIS大数据可视化
-
常见二叉树面试题
-
数据库操作 - NO SQL 数据库 - MongoDB
-
算法导论二(排序和顺序统计量)——编程大牛的必经之路
-
信息安全专家最爱用的17个渗透测试工具
-
常见算法思想——回溯法
-
Unity游戏开发之数字华容道
-
根据hibernate配置文件生成数据库.zip
-
win10+cuda10.2+cudnn7.6.5.txt
-
visual c++编写.scr屏幕保护程序 黑客帝国屏保 源代码.zip
-
FPGA在雷达系统设计中的应用技术研究.pdf
-
仿真钢琴-javascript实战
-
子shell 概念分解
-
SQL Server 2016 高可用灾备技术合集
-
windows系统认识
-
ssh2(事务,AOP,IoC即DI)+EhCache+oscache+proxool+MySQL+SiteMesh+Gzip例子
-
量化高频交易系统tick数据采集
-
Spring Boot2.X仿朋友圈PC版系统实战_架构1.0
-
stalist_B1c_B2a
-
商务部CECBC区块链专委会副主任、数字经济商学院院长吴桐:建立完善稳健的基础设施 加速区块链与产业深度融合