taro是由京东凹凸实验室推出的框架,目的是为了解决多段混乱的局面,也是当下比较新兴的一个框架。
当我们按照一种模式一种代码进行开发,开发完成之后,项目就有了再任何终端显示的能力,这是一种想想都很爽的体验。那么taro具有哪些优点,请看下面的图片。
![image.png](https://img-blog.csdnimg.cn/img_convert/0f873a02ed723226c1ae03023d0e0b4f.png#clientId=uae406f8b-c2e5-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=818&id=ueda29aa4&margin=[object Object]&name=image.png&originHeight=818&originWidth=1500&originalType=binary&ratio=1&rotation=0&showTitle=false&size=1181909&status=done&style=none&taskId=u084f2faf-a6a2-4b36-8fe0-eb47789bbf5&title=&width=1500)
1、微信小程序
2、H5移动端web页面
3、百度小程序
4、支付宝小程序
5、快应用
6、reactnative
7、字节跳动小程序
8、qq轻应用
taro是目前支持小程序最多的前端框架之一,说明我们能够轻易地生成媲美原生app的应用。所以说公司的应用想要推广全网,占用最多的流量入口的话,使用taro是完全没有问题。
当然uni-app也有这样类似的功能,生成多端应用的功能。并且还有专属的编辑器,调试起来很方便,下面我们就放一个taro和uni-app以及其他框架的对比图:
![image.png](https://img-blog.csdnimg.cn/img_convert/585006a042c0500b50b3bc5990f7aa07.png#clientId=uae406f8b-c2e5-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=660&id=ueaa9a89d&margin=[object Object]&name=image.png&originHeight=660&originWidth=1365&originalType=binary&ratio=1&rotation=0&showTitle=false&size=88844&status=done&style=none&taskId=ud176fb2f-c1ee-4e77-928a-294b36b26f0&title=&width=1365)
由此可见,Taro 的强大之处,以及Taro框架在前端的技术的占比会越来越高。而且用统一的框架、统一的API、统一的代码规范以及统一的代码结构,是多么棒的开发体验。
一次开发就可以完成所有主流平台的布局,人力和时间成本压缩到最低,感觉节省了一个亿哦。
下边我们就一起来揭秘Taro这神奇的面纱吧
学习这个前端框架,你需要一些前置知识:
HTML、CSS,JavaScript这三个是基础知识,最起码要了解能作出简单的静态页面
理解MVVM框架,如果会React框架是最好的
了解ES6相关语法,作为一个当下流行的框架以及2020年的前端开发用ES6让代码规范起来,对项目开发和管理更加的方便
Taro是一套遵循React语法规范的多端开发解决方案,使用Taro,只书写一套代码,再通过Taro的编译工具,讲源代码分别编译出可以再不同端(微信小程序,H5,RN等)运行代码。
所以说这里的Taro编译工具是非常重要的,这里附带一张图。![image.png](https://img-blog.csdnimg.cn/img_convert/85db9cfd98f4d7eb57e8a8b620028fee.png#clientId=uae406f8b-c2e5-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=546&id=uaafc1aad&margin=[object Object]&name=image.png&originHeight=546&originWidth=528&originalType=binary&ratio=1&rotation=0&showTitle=false&size=267435&status=done&style=none&taskId=u67d2c56b-3afa-4e93-ae5a-38fef34a36a&title=&width=528)
npm的安装方式
npm install -g @tarojs/cli
yarn的安装方式
yarn global add @tarojs/cli
打开命令行后,输入上边的命令。
taro init taro-dome
这里有个小坑就是如果你使用npm来安装脚手架的时候,有很大机率会失败,这些失败多是因为国内网络环境限制的。有两种解决方案,第一是"fangqiang"来进行安装,第二种是使用yarn来进行暗转,我这里就使用了yarn。
通过上边的创建项目,我们的项目已经建立好了,然后就是运行项目,命令如下:
cd taro-dome
npm run dev:h5
在这里运行的是h5模式的,如果要运行小程序的根据package.json中的script设置可知相应的运行方式。![image.png](https://img-blog.csdnimg.cn/img_convert/ba10bc84c1b35c581242562fb30545ad.png#clientId=uae406f8b-c2e5-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=634&id=u0fc421db&margin=[object Object]&name=image.png&originHeight=634&originWidth=808&originalType=binary&ratio=1&rotation=0&showTitle=false&size=138230&status=done&style=none&taskId=u1e498881-b3f9-4952-8668-3e43a8436b5&title=&width=808)
运行后页面会在浏览器显示Hello World,默认的端口为10086,如图:![image.png](https://img-blog.csdnimg.cn/img_convert/cc8f68689db61651a7c5cf7d0b06c32a.png#clientId=uae406f8b-c2e5-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=302&id=u688a40a4&margin=[object Object]&name=image.png&originHeight=302&originWidth=833&originalType=binary&ratio=1&rotation=0&showTitle=false&size=32604&status=done&style=none&taskId=u21860b89-49a3-4259-895a-cd740c4f7b4&title=&width=833)
Taro可以生成多端代码,在上一节只生成了h5的显示,这次我们就先来进行生成小程序代码,并进行预览。
npm run dev:weapp
输入完命令后,taro编译器自动为我们生成小程序代码到dist目录中。![image.png](https://img-blog.csdnimg.cn/img_convert/63fe54a447aa296e3a2b7cb6a765e914.png#clientId=uae406f8b-c2e5-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=388&id=uda461acf&margin=[object Object]&name=image.png&originHeight=388&originWidth=455&originalType=binary&ratio=1&rotation=0&showTitle=false&size=31075&status=done&style=none&taskId=u67daf35d-5cf2-4cf9-9ee6-b6ce325f7c4&title=&width=455)
这里边的app.js、app.json以及app.wxss 这都是微信小程序所对应的文件,有过微信小程序开发的肯定觉得很熟悉,这就是Taro的强大之处,也是Taro框架的开发者肯定是个webpack开发的大牛,编译生成对应的终端的代码,而不是一个壳子嵌套。
注意坑点
千万不要在微信开发者工具中修改dist目录,因为这个文件是由taro编译而来的;
如果要修改在taro的原项目修改,然后通过编译将修改的内容编译到dist文件中
在目录介绍前肯定会有疑惑,taro是多端统一框架,前面我们利用编辑工具生成了H5和微信小程序的代码,那么其他的支付宝小程序、百度小程序等又是如何生成的呢?
这些答案都在项目的package.json文件的scripts部分当中:
"scripts": {
"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt",
"build:h5": "taro build --type h5",
"build:rn": "taro build --type rn",
"build:qq": "taro build --type qq",
"build:quickapp": "taro build --type quickapp",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch",
"dev:qq": "npm run build:qq -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch"
}
我们就以dev为例解释下dev: 后边的都是哪一个平台的
weapp 微信小程序
h5 手机web用于公众号和浏览器等
swan 百度小程序
alipay 支付宝小程序
tt 字节跳动小程序
qq QQ小程序
jd 京东小程序
quickapp 快应用
rn React Native
这些类型执行都和微信小程序的一样,都是将: 后的改成相对应的模式即可
npm run dev:weapp
或
yarn dev:weapp
下面就介绍一下taro的项目目录结构
dist目录
这个目录在上面生成的微信小程序代码时已经看到了,是我们在预览时自动生成的,每次进行预览都会根据我们的预览终端不同,编译成不同的代码,每次编译时都会删除上面的代码。重新生成新的
config目录
这个就是项目的一些配置,这些配置以后会不断深入学习,但是现在还不了解,可以先不进行配置,否则会影响项目运行
node_modules
项目所需要的依赖,就是使用npm install 进行安装的包,一般是不需要进行修改的
src目录
这个是最重要的,是我们项目的源码目录,开发代码都在里面
** **
├── dist 编译结果目录
├── config 配置目录
| ├── dev.js 开发时配置
| ├── index.js 默认配置
| └── prod.js 打包时配置
├── src 源码目录
| ├── pages 页面文件目录
| | ├── index index 页面目录
| | | ├── index.js index 页面逻辑
| | | └── index.css index 页面样式
| ├── app.css 项目总通用样式
| └── app.js 项目入口文件
└── package.json
// showCount的count来自参数
const [count,setCount] = useState(xxx);
function showCount©{ console.log© }
·一定要加入eslint-plugin-react-hooks这个插件,并且重视它的警告<br />·使用useRef来保存你的引用并在re-render的时候主动更新ref的对应属性,这样可以避免“引用是旧”的这个烦人的问题,但这种方式hack味道浓郁。
### 使用Hooks来改写Index组件
在src/pages/index/index.jsx文件:
```css
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'
export default class Index extends Component {
componentWillMount () { }
componentDidMount () { }
componentWillUnmount () { }
componentDidShow () { }
componentDidHide () { }
config = {
navigationBarTitleText: '首页'
}
render () {
return (
<View className='index'>
<Text>Hello world!</Text>
</View>
)
}
}
修改成hooks方式:
import Taro, { useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'
function Index(){
const [userName] = useState('Hello Taro!')
return (
<View>
<Text>{userName}</Text>
</View>
)
}
export default Index
使用Taro 的一个好处就是要可以用组件化的方式进行编程,所以编写组件在Taro中是每天都需要作的工作。
下边我们先来创建一个自组件,然后进行组件的传值,Taro的组件传值跟React的一样利用props,因此如果你对React的组件传值比较熟悉的化,这里很容易理解。
child.jsx组件
import { View, Text } from '@tarojs/components'
function Child(){
return (
<View><Text>我是子组件</Text></View>
)
}
然后在Index组件中引入,这里给出全部代码方便学习
import Taro, { useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'
import Child from "./child"
function Index(){
const [userName] = useState('Hello Taro!')
return (
<View>
<Text>{userName}</Text>
<Child></Child>
</View>
)
}
export default Index
在上边说过,Taro的传值跟React的一样,父组件向子组件传值是通过props进行;
在Taro中也是可以这样传值的,现在修改index.jsx代码,把userName传递给子组件。
import Taro, { useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'
import Child from "./child"
function Index(){
const [userName] = useState('Hello Taro!')
return (
<View>
<Text>{userName}</Text>
<Child userInfo={userName} ></Child>
</View>
)
}
export default Index
传递后,子组件要增加props参数,然后才能用props进行接收。
import { View, Text } from '@tarojs/components'
function Child(props){
return (
<View>
<Text>我是子组件</Text>
<View><Text>接收来自父组件的值:{props.userInfo}</Text></View>
</View>
)
}
export default Child
这个组件间的传值非常的简单,当我们会用组件的形式编写页面和组件时,你就可以作一些小东西了。
但现在你可以看到,我们把页面和组件放到了一个文件夹下,并且都使用了jsx扩展名。
那Taro时如何区分那些是组件,那些是页面的?
其实它是通过自身的路由来区分的,只要配置路由的,就是页面,没配置的就默认是组件。
下边我们来看下Taro中的路由吧!
Taro中的路由和React 的路由不同,它是通过app.jsx中的pages来配置的,并且谁配置在第一个数组位置,谁就是默认打开的首页。
![image.png](https://img-blog.csdnimg.cn/img_convert/5ffdca3889e56155ab693c288681c19a.png#clientId=u0ac0d69f-3654-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=271&id=u980eaf19&margin=[object Object]&name=image.png&originHeight=271&originWidth=578&originalType=binary&ratio=1&rotation=0&showTitle=false&size=49191&status=done&style=none&taskId=ue8b56b04-41f8-4b1c-897e-eb6ce8c07c8&title=&width=578)
在/src/pages/文件夹下,建立一个/blog文件夹,在文件夹下面建立一个blog.jsx文件,写入下面的代码:
import {View , Text} from '@tarojs/components'
function Blog(){
return (
<View>
<Text>Blog Page</Text>
</View>
)
}
export default Blog
有了页面之后就可以到/src/app.jsx下,然后在pages的数组里面加入代码。
pages: [
'pages/blog/blog',
'pages/index/index'
],
这里需要注意一点,就是你不需要用import引入Blog页面,这个Taro为我们自动做好了。修改完成后,可以到浏览器中看一下,可以看到默认页面已经变成了Blog页面了。
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是不支持的。(注意)
做个Demo,我们从Blog页面,跳转到Index页面,我们的程序如何来编写。
为了方便学习这里给出blog.jsx的全部代码:
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
这样我们就实现了Taro中路由的跳转。
Taro中进行传参,一般会使用查询字符串的形式,也就是在跳转的url上,加一个?问号的形式,然后后边跟上参数。
现在我们就在Blog.jsx页面用,useState的形式声明一个变量,再通过跳转把值带到Index.jsx页面。
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
在参数已经可以传递了,那如何在Index.jsx进行接收那,其实也非常简单。只要使用this.$router.params就可以进行接收。
当然我们要接收参数,可以在useEffect()中进行(useEffect是React Hooks的方法,不了解的同学请去了解下),
useEffect(()=>{
setBlogTitle(this.$router.params.blogTitle)
},[])
为了更好的学习,这给出接收的全部代码,index.jsx的代码:
import Taro, { useState ,useEffect} from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import Child from './child.jsx'
import './index.less'
function Index(props){
const [userName ,setUserName] = useState('Hello World!!!!')
const [blogTitle,setBlogTitle] = useState('')
useEffect(()=>{
setBlogTitle(this.$router.params.blogTitle)
},[])
return (
<View>
<Text>{userName}</Text>
<Child userName={userName}></Child>
<View>{blogTitle}</View>
</View>
)
}
export default Index
多个参数和多个参数的接收,传递的时候只要用&进行链接就可以了,比如下面这样。(有前端开发经验的同学,对这个肯定不会陌生)
Taro.navigateTo({url:'/pages/index/index?blogTitle='+blogTitle+'&introduce='+introduce})
为了学习方便,这里给出blog,jsx的全部代码:
import Taro ,{useState}from '@tarojs/taro'
import {View , Text ,Button} from '@tarojs/components'
function Blog(){
introduce
const [blogTitle,setBlogTitle]=useState('JSPangBlog')
const [introduce,setIntroduce]=useState('111111')
const gotoIndex=()=>{
Taro.navigateTo({url:'/pages/index/index?blogTitle='+blogTitle+'&introduce='+introduce})
}
return (
<View>
<Text>Blog Page</Text>
<Button onClick={gotoIndex}>我要去Index页面</Button>
</View>
)
}
export default Blog
接收参数跟单参数接收方法一样,不作过多介绍,直接给出代码,
import Taro, { useState ,useEffect} from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import Child from './child.jsx'
import './index.less'
function Index(props){
const [userName ,setUserName] = useState('Hello World!!!!')
const [blogTitle,setBlogTitle] = useState('')
const [introduce,setIntroduce]=useState('')
useEffect(()=>{
setBlogTitle(this.$router.params.blogTitle)
setIntroduce(this.$router.params.introduce)
},[])
return (
<View>
<Text>{userName}</Text>
<Child userName={userName}></Child>
<View>{blogTitle}</View>
<View>{introduce}</View>
</View>
)
}
export default Index
JavaScript的引入和React的引入方式差不多,比如现在我们定义了一个方法叫做XieDaJiao(谢大脚),然后再定义一个方法叫liuying(刘英)。
在/src目录下,新建一个/tools文件夹,然后在文件夹下边建立一个index.js文件,输入下面的代码。
export function xiedajiao(){
console.log('我是谢大脚')
}
export function liuying(){
console.log('我是刘英')
}
建立完成后,我们在blog.jsx文件中引入这个,需要用ES的解构的方式引入:
import {xiedajiao,liuying} from '../../tools'
然后使用的方法,也是利用在useEffect中运行,如下:
useEffect(()=>{
xiedajiao()
liuying()
},[])
Taro引入图片的方式有两种: import xxx from ‘…’ 然后用将xxx放到相应的src的方式和直接在src中用require方式
下方是blog.jsx的代码,是用import的方式:
import Taro ,{useState ,useEffect}from '@tarojs/taro'
import {View , Text ,Button,Image} from '@tarojs/components'
import {xiedajiao,liuying} from '../../tools'
import newbbd from '../../static/newbbd0001.jpg'
function Blog(){
useEffect(()=>{
xiedajiao()
liuying()
},[])
const [blogTitle,setBlogTitle]=useState('JSPangBlog')
const [introduce,setIntroduce]=useState('111111')
const gotoIndex=()=>{
Taro.navigateTo({url:'/pages/index/index?blogTitle='+blogTitle+'&introduce='+introduce})
}
return (
<View>
<Text>Blog Page111</Text>
<Button onClick={gotoIndex}>我要去Index页面</Button>
<View>
<Image src={newbbd} width="100px" height="100px" />
</View>
</View>
)
}
如果想用require的方式,将Image组件的src属性改为:
<Image src={require('../../static/newbbd0001.jpg')} width="100px" height="100px" />
更多资源的引入方式,可以来看下Taro资源引入的文档: http://taro-docs.jd.com/taro/docs/static-reference.html
对了,Taro更新比较快,还要记得更新Taro项目哦
Taro 提供了更新命令来更新 CLI 工具自身和项目中 Taro 相关的依赖
更新 Taro CLI 工具
yarn global add @tarojs/cli@latest
我们在使用taro语法应注意的事项
function myFunction () { } const myVar = ‘hello’
字符串拼接操作符 (Infix operators) 之间要留空格 如
const message = 'hello, ’ + name + ‘!’
检查 NaN 的正确姿势是使用 isNaN() 如
if (isNaN(price)) { }
合法的字符串和type of 进行比较 如
typeof name === ‘undefined’
24. 数组的注意事项:
const { a: { b } } = foo
3) 不要扩展原生对象 如
Object.prototype.age = 21 //不行
const user = { name: ‘Jane Doe’, age: 30, username: ‘jdoe86’ } // ✓ 正确
const user = {
name: ‘Jane Doe’,
age: 30,
username: ‘jdoe86’
}
不使用不必要的对象值作为计算属性 如
const user = { name: ‘John Doe’ } //对
避免使用 arguments.callee 和 arguments.caller
嵌套的代码块中禁止再定义函数
禁止使用 Function 构造器
const sum = new Function(‘a’, ‘b’, ‘return a + b’) // ✗ 错误
自调用匿名函数 (IIFEs) 使用括号包裹
const getName = function () { }() // ✗ 错误
const getName = (function () { }()) // ✓ 正确
const getName = (function () { })() // ✓ 正确
使用 Promise 或者 async functions 来实现异步编程
function* helloWorldGenerator() { // ✗ 错误
yield ‘hello’;
yield ‘world’;
return ‘ending’;
}
类名注意事项:
类名要以大写字母开头
const dog = new Animal() // ✓ 正确
2)避免对类名重新赋值
class Dog extends Mammal {
constructor () {
super() // ✓ 正确
}
}
3)使用 this 前请确保 super() 已调用
class Dog extends Animal {
constructor () {
this.legs = 4 // ✗ 错误
super()
}
}
class Car {
constructor () { // ✗ 错误
super()
}
class Dog {
bark () {}
bark () {} // ✗ 错误
}
function Animal () {}
const dog = new Animal // ✗ 错误
const dog = new Animal() // ✓ 正确
new Character() // ✗ 错误
const character = new Character() // ✓ 正确
throw ‘error’ // ✗ 错误
throw new Error(‘error’) // ✓ 正确
9) catch 中不要对错误重新赋值
try {
// …
} catch (e) {
e = ‘new value’ // ✗ 错误
}