5分钟快速上手多端开发框架Taro

li21 发布于2019-08-22 18:10 / 550人阅读

摘要：第一步安装链接安装完成后在命令行输入，显示版本号即安装成功，如下图第二步安装在命令行输入或在这里我用的是，感谢阿里提供的国内镜像安装完成后入下图所示输入，会显示当前安装的版本，如下图第三步使用命令创建模板项目打开目标文件夹后输入命令

第一步：安装node.js（链接https://nodejs.org/en/）

安装完成后在命令行输入node -v，显示版本号即安装成功，如下图

第二步：安装 @tarojs/cli

在命令行输入npm install -g @tarojs/cli或yarn global add @tarojs/cli
在这里我用的是cnpm install -g @tarojs/cli，感谢阿里提供的国内镜像
安装完成后入下图所示

输入taro -V,，会显示当前安装的taro版本，如下图

第三步：使用命令创建模板项目

打开目标文件夹后输入命令taro init myApp（myApp为项目名称，由用户指定）
然后会提示输入项目介绍以及选择项目模板，如下图

创建完模板后会自动执行npm install安装项目所需的依赖包，如下图

等待依赖完成后就可以开始书写你的代码啦~~~

第四步：项目构建

项目初始化完成后就可以在page目录下编写你自己的代码了，下面以一个todo list为例

index.js

{

import Taro, { Component } from "@tarojs/taro"
import { View, text, Input } from "@tarojs/components"
import "./index.scss"

export default class Index extends Component {
  config = {
    navigationBarTitleText: "首页"
  }

  constructor() {
    super()
    this.state = {
      list: [
        "get up",
        "write",
        "sleep",
      ],
      inputVal: ""
    }
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmout () { }

  componentDidShow () { }

  componentDidHide () { }

  addItem() {
    let { list, inputVal } = this.state
    if(inputVal == "") return
    else{
      list.push(inputVal)
    }
    this.setState({
      list,
      inputVal: ""
    })
  }

  delItem(index) {
    let { list } = this.state
    list.splice(index, 1)
    this.setState({
      list
    })
  }

  inputHandler(e) {
    this.setState({
      inputVal: e.target.value
    })
  }

  render () {
    let { list, inputVal } = this.state

    return (
      
        
        添加
        
          Todo list
          {
            list && list.map((item, index) => {
              return 
                {index + 1}.{item}
                删除
              
            })
          }
        
      
    )
  }
}

}

如果要构建成h5代码，只需要输入taro build –type h5 –watch即可将代码编译成h5版本，即可在http://localhost:8080/访问

如果要构建成小程序代码，只需要输入taro build –type weapp –watch即可将代码编译成小程序版本，在微信开发者工具中选择项目中的dist文件夹即可以预览

GPU云服务器云服务器机器学习快速上手 java快速开发框架 android快速开发框架服务器快速开发框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95580.html

Taro，快速上手教程（一）

摘要：个人所有文章同步到前言最近公司准备开发几款可以在微信小程序端和端同时运行的一套商城，接着就是任务下发喽，但是有一点，时间紧任务重，直接说其他的不管，反正几个星期之内必须上线，头疼。个人所有文章同步到：https://github.com/zhengzhuan... 前言最近公司Boss准备开发几款可以在微信小程序端和H5端同时运行的一套商城，接着就是任务下发喽，但是有一点，时间紧任...

pakolagij 2019-08-23 12:28 评论0 收藏0
新的小程序开发框架？- Taro的深度实践体验

摘要：作为两个小程序开发框架都使用过，并应用在生产环境里的人，自然是要比较一下两者的异同点。在这里与当前很流行的小程序开发框架之一进行简单对比，主要还是为了方便大家更快速地了解，从而选择更适合自己的开发方式。前言前阵子，来自我们凹凸实验室的遵循 React 语法规范的多端开发方案 - Taro终于对外开源了，欢迎围观star（先打波广告）。作为第一批使用了Taro开发的TOPLIFE小程...

maochunguang 2019-08-22 18:24 评论0 收藏0
Taro 优秀学习资源汇总

摘要：多端统一开发框架优秀学习资源汇总官方资源项目仓库官方文档项目仓库官方文档微信小程序官方文档百度智能小程序官方文档支付宝小程序官方文档字节跳动小程序官方文档文章教程不敢阅读包源码带你揭秘背后的哲学从到构建适配不同端微信小程序等的应用小程序最 Awesome Taro 多端统一开发框架 Taro 优秀学习资源汇总 showImg(https://segmentfault.com/img/r...

toddmark 2019-08-23 18:02 评论0 收藏0
【Copy攻城狮日志】CML之5分钟入门多端统一框架

摘要：开局一张图，故事全靠编是啥变色龙又是啥自从有小程序以来，小程序的第三方框架便孕育而生，从原始时代的只基于微信小程序多如今多端统一开发框架，可以说前端技术从年到年又发生了天翻地覆的变化。 Created 2019-4-6 21:57:17 by huqi Updated 2019-4-7 22:54:55 by huqi showImg(https://segmentfault.c...

MycLambert 2019-08-23 16:47 评论0 收藏0