小白入門上手Taro開發

開發環境搭建

一、須要安裝的軟件【點擊對應連接下載便可】

Windows / Maccss

環境依賴html

nodejs [推薦安裝LTS版本]

編碼工具/編輯器vue

webstorm [須要破解碼，淘寶花幾塊錢買一個吧]
vscode

小程序端工具node

微信小程序 [推薦安裝穩定版本]
頭條小程序
百度小程序
支付寶小程序
QQ小程序
快應用
若是你下載完，會看到以下截圖

二、開發環境配置

node 安裝成功以後
打開【終端】查看下node的版本
node -v, 出現v xx.xx.x 的相關信息，表明你安裝成功了
在終端執行以下步驟

# 全局安裝taro的命令行工具
npm install @tarojs/cli -g

# 出現👽 Taro v x.x.x 證實安裝成功
taro 
複製代碼

三、簡單 Hello World 項目體驗

project 是你生成項目的名字，能夠是你想稱呼的。例如 example、test、demo等
而後一路回車，首次走默認的便可

# taro init 以後，見下圖1，init成功以後，見下圖2
taro init project

cd project

# 安裝依賴，避免init 項目過程當中依賴安裝不完整的狀況
npm install
複製代碼

-[注意]：若是你npm install 出現錯誤，別慌，按照以下操做走一波。react

rm -rf node_modules package-lock.json
npm install
複製代碼

圖1：圖2:git

四、生成項目目錄介紹

.es6

├── babel.config.js             # Babel 配置
├── .eslintrc.js                # ESLint 配置
├── config                      # 編譯配置目錄
│   ├── dev.js                  # 開發模式配置
│   ├── index.js                # 默認配置
│   └── prod.js                 # 生產模式配置
├── package.json                # 項目的核心。它包含名稱、描述和版本之類的信息，以及運行、開發以及有選擇地將項目發佈到 NPM 所需的信息。
├── dist                        # 打包目錄
├── project.config.json         # 小程序項目配置
├── src # 源碼目錄
│   ├── app.config.js           # 全局配置
│   ├── app.less                 # 全局 樣式
│   ├── app.js                  # 入口組件
│   ├── index.html              # H5 入口 HTML
│   └── pages                   # 頁面
│       └── index
│           ├── index.config.js # 頁面配置
│           ├── index.less       # 頁面 CSS
│           └── index.jsx       # 頁面組件，若是是 Vue 項目，此文件爲index.vue
複製代碼

.github

五、本地開發環境啓動

注：npm run dev:h5/weapp/tt 等都是本地開發熱更新，改代碼預覽實施生效.
打開終端，cd 到你項目工程的目錄，分別執行以下命令。
使用webstorm 編輯器，可使用另外一種方式啓動。如

使用vscode 編輯器，點擊右側上方菜單欄目【Terminal】--【New Terminal】-- 就會在當前項目路徑下方打開一個終端面板。，輸入以下對應命令便可啓動對應端的服務。

H5web

cd your project
npm run dev:h5
複製代碼

見以下圖，證實啓動服務成功,服務啓動成功以後，會自動在瀏覽器打開該listening網址 http://0.0.0.0:10089

效果圖如：

weapp 微信小程序npm

npm run dev:weapp
複製代碼

執行完如上命令以後，會把代碼轉換成小程序端可運行代碼在dist目錄下

見下圖，證實服務啓動成功

生成的文件目錄如：
打開下載好的微信開發工具
點擊小程序--》導入項目---》目錄【打開項目所在路徑，到dist/便可】---》AppID有就填寫你本身真是的值，沒有就是默認 --》最後點擊導入就會打開。如

效果圖如：

tt 頭條小程序/抖音小程序

npm run dev:tt
複製代碼

執行完如上命令以後，會把代碼轉換成小程序端可運行代碼在dist目錄下

見下圖，證實服務啓動成功

生成的文件目錄如
- 打開下載好的字節跳動開發工具
點擊小程序--》導入---》【打開項目所在目錄,到dist/便可】如

效果圖如：

百度百度小程序

npm run dev:swan
複製代碼

執行完如上命令以後，會把代碼轉換成小程序端可運行代碼在dist目錄下

見下圖，證實服務啓動成功

生成的文件目錄如
- 打開下載好的百度開發工具
點擊小程序--》加號 ➕ ---》導入項目---》【打開項目所在目錄，到dist/便可】--》無AppID,點擊測試號

如

效果圖如：

注意若是你不知道對應端的小程序應該啓動什麼命令，以下：

npm run dev:tt # 頭條
npm run dev:weapp # 微信
npm run dev:swan # 百度
npm run dev:alipy # 支付寶
npm run dev:qq # QQ
npm run dev:jd # 京東
npm run dev:h5 # H5
npm run dev:quickapp # 快應用
複製代碼

初識、寫 Taro

1、簡單的文本渲染

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

export default class Index extends Component {
  constructor() {
    super();
    this.state = {
      defaultValue: 'Hello World!!'
    };
  }

  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  render() {
    const { defaultValue } = this.state

    return (
      <View className='home'> {/* 文本渲染 */} <Text style={{ color: 'red' }}>{defaultValue}</Text> </View>
    );
  }
}

// 如上代碼，便可在對應端的服務中，看到 Hello Worl 的文字展現。就如上我介紹的各端展現效果中的hello world 字樣
// 好奇的同窗可能注意到了，咱們的變量用{}包裹起來了，是的。react的JSX語法是能夠在裏面進行事件綁定，表達變量，實現簡單 JS 邏輯等，也就是說在 JS 裏寫 HTML。
// **而變量、簡單 JS 邏輯都是須要用 {} 包裹起來** 這裏是關鍵。

複製代碼

2、JSX 數組只能使用 Array.map

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

const testData = [
  {
    label: '星期一',
    id: 1,
    value: 'Monday',
  },
  {
    label: '星期二',
    id: 2,
    value: 'Tuesday',
  },
  {
    label: '星期三',
    id: 3,
    value: 'Wednesday',
  },
];

export default class Index extends Component {
  constructor() {
    super();
  }

  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  render() {
    return (
      <View className='home'> {testData.map((item) => { return ( <View key={item.id} className='home__week'> <Text>{item.label}</Text> <Text>{item.value}</Text> </View> ); })} </View>
    );
  }
}
// 由於這裏渲染的是數組，因此試圖層你會看到testData數組變量每個object的label、value值

複製代碼

3、綁定點擊事件

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



export default class Index extends Component {
  constructor() {
    super();
     this.state = {
      defaultValue: 'Hello World!!',
      number: 0,
    }
  }

  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  handleClick1 = () => {
    this.setState({
      defaultValue: "一、二、三、變了！！！",
    });
    console.log("你如今點擊我了");
  };
  
  render() {
  	const { defaultValue, number } = this.state;
    return (
      <View className='home'> {/* 文本渲染 */} <Text style={{ color: "red" }}>{defaultValue}</Text> {/* 綁定點擊事件，寫法1 */} <View className='home__btn'> <Text onClick={this.handleClick1} className='home__btn--txt'> 點擊我改變defaultValue </Text> </View> {/* 綁定點擊事件,寫法2,不推薦，根據實際場景，例如error從新請求數據 onClick={()=>this.fetchData()} */} <View onClick={() => { // 操做state自身最好使用以下方式 this.setState((prevState) => { return { number: prevState.number + 1, }; }); }} style={styles.viewStyle} > <Text style={styles.viewStyleFont}>{number}</Text> </View> </View>
    );
  }
}

// 一、這裏介紹了兩種綁定點擊事件的方法，以後你能夠在任意你須要事件行爲的元素上進行onClick的綁定。

// 二、你看到這個代碼塊咱們多了兩個區域的代碼，一個是咱們聲明瞭一個變量，這是用於你給標籤元素綁定樣式的一種行爲，能夠用一個根級變量託管各個小變量，而後在想要添加樣式的標籤上如掛載就行。例如：
// <Text style={styles.viewStyleFont}>{number}</Text>。Text就是你要掛載到的標籤。viewStyleFont就是要添加的樣式變量。

const styles = {
  viewStyle: {
    background: 'pink',
    color: '#fff'
  },
  viewStyleFont: {
    fontSize: '14px'
  }
}

複製代碼

// 這也是常規一種樣式處理方案，給標籤綁定class，而後找到對應的class去寫對應的樣式。
// 若是你有疑問，記得css 是這麼綁定的如 <div class="container"></div>
// 由於HTML 的 class 屬性是 Javascript 的保留字，因此須要寫成 className。哈哈哈。
// 因此根據如上代碼，className='home'，我在root標籤給定一個className 的變量，
// 接下來包含在綁定這個home的標籤內的任意元素，都是他的子孫元素。那這裏呢咱們使用BEM命名規範。
// BEM命名規範 ： https://juejin.cn/post/6844903672162304013
// __block 用來進行與子元素的鏈接。
// & 符號表示對父選擇器home的引用
// less 是css的一種預處理器擴展語言。方便咱們快速開發。
// 關於 less 和 & ：https://www.jianshu.com/p/127b0974cfc3
// 關於less 的瞭解 ：https://less.bootcss.com/

.home {
  padding: 16Px;

// 以下這種寫法會編譯輸出成 .home__week
  &__week {
    display: flex;
    justify-content: space-between;
    font-size: 16Px;
  }
  // & 就是引用了父親綁定的class：home。以下這種寫法會編譯輸出成 .home__btn,這就是和咱們綁定的home__btn同樣啦。

  &__btn {
    width: 163Px;
    height: 38Px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(242,20,12,1) 0%,rgba(242,39,12,1) 70%,rgba(242,77,12,1) 100%);
    border-radius: 26Px;
    &--txt {
        font-size: 14Px;
        color: rgba(255,255,255,1);
    }
  }
}
複製代碼

state [小白及初學者可忽略]

上述操做修改了state,簡單說下，不要直接修改state，例如，this.state.defaultValue = '一、二、3'，由於此種方式不會從新渲染組件，不走render，若是安裝了elsint校驗，會過不去的。

State的更新多是異步的，立馬執行以後，是沒法直接獲取到最新的 state ,React 其實會維護着一個 state 的更新隊列，每次調用 setState 都會先把當前修改的 state 推動這個隊列，在最後，React 會對這個隊列進行合併處理，而後去執行回調。根據最終的合併結果再去走下面的流程（更新虛擬dom，觸發渲染真實dom）,react不是真實意義上的異步，taro是。

state使用的三種方式

第一種
this.setState({ number: this.state.number + 1 }) // this.state.number 0 
第二種
this.setState({ number: this.state.number + 1 },() => {
    console.log("callback: ", this.state.number); // 2
 });
第三種
this.setState(prevState => {
  console.log("func: " + prevState.number); // 1
      return {
        number: prevState.number + 1
      };
    },()=>{
      console.log('now '+ this.state.number) // 2
 });

複製代碼

4、父子組件通訊

props 傳值通訊
子組件

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

export default class Child extends Component {
  static defaultProps = {
    langName: '',
    enName: '',
    onNameEvent: () => {},
  };

  constructor() {
    super();
  }

  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  emitNameEvent = (langName) => {
    this.props.onNameEvent(langName);
  };

  // 界面描述
  render() {
    const { langName, enName } = this.props;

    return (
      <View style={styles.container}> <Text onClick={() => this.emitNameEvent(langName)}>{langName}</Text> <Text>{enName}</Text> </View>
    );
  }
}

const styles = {
  container: {
    width: '100%',
    display: 'flex',
    justifyContent: 'space-between',
  },
};
複製代碼

父組件

import React, { Component } from 'react'
import { View, Text } from '@tarojs/components'
import Child from './components/test';

const testData = [
  {
    label: '星期一',
    id: 1,
    value: 'Monday',
  },
  {
    label: '星期二',
    id: 2,
    value: 'Tuesday',
  },
  {
    label: '星期三',
    id: 3,
    value: 'Wednesday',
  },
];

export default class Index extends Component {
  constructor() {
    super();
  }

  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  render() {
    return (
      <View className='home'> {testData.map((item) => { return ( <View key={item.id} className='home__week'> <Child langName={item.label} enName={item.value} onNameEvent={(name) => { console.log('拿到子組件的name',name) }} /> </View> ); })} </View>
    );
  }
}
複製代碼

4、生命週期介紹

組件的生命週期，指的是一個 React 組件從掛載，更新，銷燬過程當中會執行的生命鉤子函數。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentWillMount() {}
 
  componentDidMount() {}

  componentWillUpdate(nextProps, nextState) {}
    
  componentWillReceiveProps(nextProps) {}  
  
  componentDidUpdate(prevProps, prevState) {}

  shouldComponentUpdate(nextProps, nextState) {}

  componentWillUnmount() {}
  
  render() {
    return (
    <View> <Text>Hello, world!</Text> <Text>如今的時間是 {this.state.date.toLocaleTimeString()}.</Text> </View>
    );
  }
}
複製代碼

上述組件中生命週期一一簡單敘述

初始化階段

constructor，顧名思義，組件的構造函數。通常會在這裏進行 state 的初始化，事件的綁定等

掛載階段

componentWillMount，組件掛載到dom以前調用。是當組件在進行掛載操做前，執行的函數，通常緊跟着 constructor 函數後執行

componentDidMount，是當組件掛載在 dom 節點後執行。全程只執行一次，通常會在這裏執行一些異步數據的拉取等動做

更新階段

shouldComponentUpdate，比較當前組件的this.props/this.state和傳入的nextProps/nextState,是否須要重渲染的判斷，未改變返回false，當前組件更新中止。若組件的state與props發生改變則返回true，當前組件的更新開始。能夠減小組件沒必要要的渲染，優化組件性能。渲染優化。
componentWillReceiveProps，傳入的參數（nextProps）爲父組件傳遞給子組件的新props,經過本做用域中的this.props與傳過來的nextProps進行比較來得出是否要從新調用render進行渲染，能夠有效減小無效渲染次數，並提升週期的開發效率。你能夠在這裏根據新的 props 來執行一些相關的操做，例如某些功能初始化等
componentWillUpdate，當組件在進行render更新以前的預渲染函數。[基本不用]
componentDidUpdate，當組件完成更新時，會執行的函數，傳入兩個參數是 prevProps 、prevState，爲組件更新前的props和state，須要重點注意的是，更新階段內不準使用setState方法進行state值的修改，不然會引發render的循環重渲染。 [基本不用]

卸載階段

componentWillUnmount，當組件準備銷燬時執行。在這裏通常能夠執行一些回收的工做，例如 - clearInterval(this.timer) 這種對定時器的回收操做，清除componentDidMount中手動建立的DOM元素等，以免引發內存泄漏。

5、綁定樣式

方式一：行內

{/* 例如文本渲染,設置文字顏色 */}
<Text style={{ color: 'red' }}>{defaultValue}</Text>
複製代碼

方式2、行內綁定變量

{/* 綁定點擊事件,寫法2 */}
  <View style={styles.viewStyle}>
    <Text style={styles.viewStyleFont}>{number}</Text>
  </View>
        
 const styles = {
  viewStyle: {
    background: 'pink',
    color: '#fff',
  },
  viewStyleFont: {
    fontSize: '14px',
  },
};
複製代碼

方式3、綁定class樣式類名
樣式命名，遵循BEM規範

{/* 手寫按鈕 */}
 <View className='home__btn'>
   <Text onClick={this.handleClick1} className='home__btn--txt'> 點擊我改變Hello World </Text>
  </View>
複製代碼

.home {
  padding: 16Px;
  &__btn {
    width: 163Px;
    height: 38Px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(242,20,12,1) 0%,rgba(242,39,12,1) 70%,rgba(242,77,12,1) 100%);
    border-radius: 26Px;
    &--txt {
        font-size: 14Px;
        color: rgba(255,255,255,1);
    }
  }
}
複製代碼

入門

漸進式入門教程【這篇教程適合對喜歡邊學邊作或小程序開發徹底沒有了解的開發者】

深刻學習

[React、Vue兩大框架根據實際使用技術棧學習]

進階

結語

taro 官方文檔
若是你以爲我上述安裝即便囉嗦，可直接看官方文檔安裝及使用篇
優秀學習資源彙總