Taro的学习使用

什么是Taro?

Taro 是由京东《凹凸实验室》开发的一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。
链接: 社区链接
多端使用

1.Taro的使用:

1.1安装Taro:

//使用 npm 安装 CLI
npm install -g @tarojs/cli
// OR 使用 yarn 安装 CLI
yarn global add @tarojs/cli
//OR 安装了 cnpm,使用 cnpm 安装 CLI
cnpm install -g @tarojs/cli

1.2查看版本信息:

npm info @tarojs/cli

在这里插入图片描述
1.3初始化项目;

taro init myApp
//生成案例代码
npx @tarojs/cli init myApp

以下是taro init myApp命令的步骤:
taro init myApp
1.4安装依赖: yarn;
1.5yarn dev:weapp
运行中的问题:
找不到依赖 “@tarojs/plugin-platform-weapp”,请先在项目中安装

npm install @tarojs/cli@3.0.5

UnhandledPromiseRejectionWarning: TypeError: Cannot read property ‘isSupportRecursive’ of undefined


2.Taro的写法Vue/React:

Taro 3 支持开发者使用的是真实的 Vue/Vue3 和 React 等框架。
react的写法:

import React, { Component } from 'react'
import { View, Text } from '@tarojs/components'

export default class Index extends Component {
  state = {
    msg: 'Hello World!'
  }

  componentWillMount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View className='index'>
        <Text>{this.state.msg}</Text>
      </View>
    )
  }
}

vue的写法

<template>
  <view class="index">
    <text>{{msg}}</text>
  </view>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World!'
    }
  },
  created () {},
  onShow () {},
  onHide () {}
}
</script>

Taro–>uniapp对比:

Taro和uniapp都支持跨端跨框架,相对于uniapp,Taro框支持更多写法,支持开发者使用多种框架,uniapp的写法只支持vue。但是uniapp可以直接打包安卓、IOS,而Taro支持打包RN,可以通过RN打包成安卓、IOS。目前我只用Taro的React写过微信小程序,所以相对来说,微信小程序的适配运行还不错。后面用再补充吧

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值