国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

5分鐘快速上手多端開發(fā)框架Taro

li21 / 605人閱讀

摘要：第一步安裝鏈接安裝完成后在命令行輸入，顯示版本號(hào)即安裝成功，如下圖第二步安裝在命令行輸入或在這里我用的是，感謝阿里提供的國(guó)內(nèi)鏡像安裝完成后入下圖所示輸入，會(huì)顯示當(dāng)前安裝的版本，如下圖第三步使用命令創(chuàng)建模板項(xiàng)目打開目標(biāo)文件夾后輸入命令

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

安裝完成后在命令行輸入node -v，顯示版本號(hào)即安裝成功，如下圖

第二步：安裝 @tarojs/cli

在命令行輸入npm install -g @tarojs/cli或yarn global add @tarojs/cli
在這里我用的是cnpm install -g @tarojs/cli，感謝阿里提供的國(guó)內(nèi)鏡像
安裝完成后入下圖所示


輸入taro -V,，會(huì)顯示當(dāng)前安裝的taro版本，如下圖

第三步：使用命令創(chuàng)建模板項(xiàng)目

打開目標(biāo)文件夾后輸入命令taro init myApp（myApp為項(xiàng)目名稱，由用戶指定）
然后會(huì)提示輸入項(xiàng)目介紹以及選擇項(xiàng)目模板，如下圖

創(chuàng)建完模板后會(huì)自動(dòng)執(zhí)行npm install安裝項(xiàng)目所需的依賴包，如下圖

等待依賴完成后就可以開始書寫你的代碼啦~~~

第四步：項(xiàng)目構(gòu)建

項(xiàng)目初始化完成后就可以在page目錄下編寫你自己的代碼了，下面以一個(gè)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: "首頁(yè)"
  }

  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}
                刪除
              
            })
          }
        
      
    )
  }
}

}

如果要構(gòu)建成h5代碼，只需要輸入taro build –type h5 –watch即可將代碼編譯成h5版本，即可在http://localhost:8080/訪問(wèn)

如果要構(gòu)建成小程序代碼，只需要輸入taro build –type weapp –watch即可將代碼編譯成小程序版本，在微信開發(fā)者工具中選擇項(xiàng)目中的dist文件夾即可以預(yù)覽

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/95580.html

相關(guān)文章

  • Taro，快速上手教程（一）

    摘要：個(gè)人所有文章同步到前言最近公司準(zhǔn)備開發(fā)幾款可以在微信小程序端和端同時(shí)運(yùn)行的一套商城，接著就是任務(wù)下發(fā)嘍，但是有一點(diǎn)，時(shí)間緊任務(wù)重，直接說(shuō)其他的不管，反正幾個(gè)星期之內(nèi)必須上線，頭疼。 個(gè)人所有文章同步到：https://github.com/zhengzhuan... 前言 最近公司Boss準(zhǔn)備開發(fā)幾款可以在微信小程序端和H5端同時(shí)運(yùn)行的一套商城，接著就是任務(wù)下發(fā)嘍，但是有一點(diǎn)，時(shí)間緊任...

    pakolagij 評(píng)論0 收藏0

  • 新的小程序開發(fā)框架？- Taro的深度實(shí)踐體驗(yàn)

    摘要：作為兩個(gè)小程序開發(fā)框架都使用過(guò)，并應(yīng)用在生產(chǎn)環(huán)境里的人，自然是要比較一下兩者的異同點(diǎn)。在這里與當(dāng)前很流行的小程序開發(fā)框架之一進(jìn)行簡(jiǎn)單對(duì)比，主要還是為了方便大家更快速地了解，從而選擇更適合自己的開發(fā)方式。 前言 前陣子，來(lái)自我們凹凸實(shí)驗(yàn)室的遵循 React 語(yǔ)法規(guī)范的多端開發(fā)方案 - Taro終于對(duì)外開源了，歡迎圍觀star（先打波廣告）。作為第一批使用了Taro開發(fā)的TOPLIFE小程...

    maochunguang 評(píng)論0 收藏0

  • Taro 優(yōu)秀學(xué)習(xí)資源匯總

    摘要：多端統(tǒng)一開發(fā)框架優(yōu)秀學(xué)習(xí)資源匯總官方資源項(xiàng)目倉(cāng)庫(kù)官方文檔項(xiàng)目倉(cāng)庫(kù)官方文檔微信小程序官方文檔百度智能小程序官方文檔支付寶小程序官方文檔字節(jié)跳動(dòng)小程序官方文檔文章教程不敢閱讀包源碼帶你揭秘背后的哲學(xué)從到構(gòu)建適配不同端微信小程序等的應(yīng)用小程序最 Awesome Taro 多端統(tǒng)一開發(fā)框架 Taro 優(yōu)秀學(xué)習(xí)資源匯總 showImg(https://segmentfault.com/img/r...

    toddmark 評(píng)論0 收藏0

  • 【Copy攻城獅日志】CML之5分鐘入門多端統(tǒng)一框架

    摘要：開局一張圖，故事全靠編是啥變色龍又是啥自從有小程序以來(lái)，小程序的第三方框架便孕育而生，從原始時(shí)代的只基于微信小程序多如今多端統(tǒng)一開發(fā)框架，可以說(shuō)前端技術(shù)從年到年又發(fā)生了天翻地覆的變化。 Created 2019-4-6 21:57:17 by huqi Updated 2019-4-7 22:54:55 by huqi showImg(https://segmentfault.c...

    MycLambert 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<