Taro前端技術框架

本文轉載自查看原文 2021-03-17 16:15 489 taro多端開發/ 微信小程序/ 前端/ 小程序/ Trao

taro技術框架

(1) 簡介

Taro 是一套遵循 React 語法規范的多端開發解決方案。

現如今市面上端的形態多種多樣，Web、React-Native、微信小程序等各種端大行其道，當業務要求同時在不同的端都要求有所表現的時候，針對不同的端去編寫多套代碼的成本顯然非常高，這時候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。

使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節跳動/QQ小程序、快應用、H5、React-Native 等）運行的代碼。

(2) 特性以及優點

(2.1) 支持多種框架

Taro 目前支持React、Nerv、Vue三類框架，在未來 Taro 將開放拓展能力，使得開發者可以通過 Taro 拓展更多的框架支持。

(2.2) 快速開發微信小程序

Taro 立足於微信小程序開發，眾所周知小程序的開發體驗並不是非常友好，比如小程序中無法使用 npm 來進行第三方庫的管理，無法使用一些比較新的 ES 規范等等，針對小程序端的開發弊端，Taro 具有以下的優秀特性

✅ 支持使用 npm/yarn 安裝管理第三方依賴

✅ 支持使用 ES7/ES8 甚至更新的 ES 規范，一切都可自行配置

✅ 支持使用 CSS 預編譯器，例如 Sass 等

✅ 支持使用 Redux 進行狀態管理

✅ 支持使用 MobX 進行狀態管理

✅ 小程序 API 優化，異步 API Promise 化等等

(2.3) 支持多端開發轉化

Taro 方案的初心就是為了打造一個多端開發的解決方案。目前 Taro 代碼可以支持轉換到微信/百度/支付寶/字節跳動/QQ小程序、快應用、 H5 端以及移動端（React Native）。

以上內容來自taro官方介紹文檔 , 詳細文檔:taro介紹文檔

(2.4)Taro優點

Taro是由京東凹凸實驗室推出的框架，目的就是解決多端混亂的局面，也是當下比較新興的一個框架。
當我們按照一種模式一種代碼進行開發，開發完成后，項目就有了在任何終端顯示的能力，這是一種想想都很爽的。那具體Taro有那些優點，請看下面的圖片。

(3) 搭建taro環境

(3.1)准備工作

搭建node.js環境不了解node.js的可以先簡單了解一下node.js認識
了解taro框架相關文檔 taro介紹文檔

(3.2) 搭建taro基礎環境

全局安裝@tarojs/cli
首先，你需要使用 npm 或者 yarn 全局安裝@tarojs/cli，或者直接使用npm:

# 使用 npm 安裝 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安裝 CLI
$ yarn global add @tarojs/cli
# OR 安裝了 cnpm，使用 cnpm 安裝 CLI
$ cnpm install -g @tarojs/cli

注意事項
值得一提的是，如果安裝過程出現sass相關的安裝錯誤，請在安裝mirror-config-china后重試。

$ npm install -g mirror-config-china

(3.3) taro react 搭建小程序

新建一個文件夾

初始化創建

taro init 項目名

進行配置，根據需求配置

之后等待所有依賴安裝完畢。

開發
在命令行執行

$ npm run dev:weapp

taro編譯成小程序代碼：

下載安裝微信開發者工具，導入新項目中的dist文件夾即可進行調試，展示效果

當看到“監聽文件修改中…”的提示后，我們就可以打開微信開發者工具，用微信掃碼登錄后界面如下：

點擊那個碩大的➕號，開始導入我們剛才創建的項目的dist文件夾

導入成功后，在微信開發者工具中即可預覽調試：

(3.4) taro 目錄詳細

注意：

根據項目初始化配置不同的模板，最后生成的略有不同
npm run dev:weapp執行該命令，taro源碼會被編譯成小程序代碼，全部在dist文件夾中

目錄詳解：

(3.4.1) dist目錄

這個目錄是我們在代碼效果預覽時自動生成的，每次進行預覽都會根據我們預覽的終端不同，編譯成不同代碼，比如你使用yarn dev:h5那生成的就是web的代碼，如果你使用yarn dev:weapp那生成的就是小程序的代碼。
每次編譯時都會刪除以前的代碼，這個小伙伴么要注意一下。

(3.4.2) config目錄

這個就是項目的一些配置，這些配置以后我們會不斷深入學習，但是現在你還不了解，就不要進行配置。否則會影響項目的運行。

(3.4.3) node_modules目錄

項目所需的依賴包，就是我們使用npm install進行安裝的包，一般你不需要修改。

(3.4.3) src目錄

這個是最重要的，這個是我們的源碼目錄，開發的所有代碼都在這個里邊。

(4) 升級腳手架

當提示我們不是最新版本，我們可以使用命令進行升級，命令的具體意思是升級taro到大版本的最新版

命令進行升級:

taro update self

(5) Taro + React Hooks新特性

我們就改造一下腳手架自動為我們生成的index.jsx頁面，讓他使用Hooks 新特性呈現。
打開/src/page/index/index.js頁面，可以看到目前的代碼全部都是React的基本語法，比如：繼承components,比如React經典的生命周期，比如原來使用的state和setState賦值。
為了驗證Hooks新特性可以使用，我們引入了useState.

  import Taro, {  useState } from '@tarojs/taro'

引入后就可以使用 function的形式函數的形式 來定義組件:

import Taro, {  useState } from '@tarojs/taro'//Hooks新特性
import { View, Text } from '@tarojs/components'//導入的View，Text皆為Taro封住好的底層渲染組件
import './index.less'

function Index(){

  const [userName ,setUserName] = useState('Hello World!!!!')//賦值

  return ( 
    <View>
        <Text>{userName}</Text>
    </View>
  )

}
export default Index
//最后需要暴露出該組件 export default

注意：
export default和export是有一定區別的，詳情點擊：
export，import ，export default

(6)Taro中子組件的編寫和傳值

(6.1)編寫子組件

打開/myDemo1/src/pages/index文件夾，在文件下面建立一個child.jsx文件，然后打開文件，編寫組件:

import { View, Text } from '@tarojs/components'
function Child(){
  return ( 
    <View><Text>我是子組件</Text></View>
  )
}
export default Child

編寫完成后這就是一個組件，使用也是非常簡單的，直接到index.jsx頁面中，用import進入這個組件。
導入命令：

import Child from './child.jsx'

需要注意的是這個Child要跟child.jsx中的fucntion的名稱一樣，否則在小程序中會有問題。引入后就可以直接用標簽的形式進行使用了

import Taro, {  useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import Child from './child.jsx' //子組件導入 注意組件名稱
import './index.less'

function Index(){

  const [userName ,setUserName] = useState('Hello World!!!!')

  return ( 
    <View>
        <Text>{userName}</Text>
        <Child></Child>//將組件用標簽的形式進行使用
    </View>
  )

}

export default Index

(6.2)父組件向子組件傳值

在react中父組件向子組件傳值是通過props進行，在Taro中也是可以這樣傳值的，現在修改index.jsx代碼，把userName傳遞給子組件。

import Taro, {  useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import Child from './child.jsx'
import './index.less'

function Index(){

  const [userName ,setUserName] = useState('Hello World!!!!')

  return ( 
    <View>
        <Text>{userName}</Text>
        <Child userName={userName}></Child>
    </View>
  )

}

export default Index

這邊傳遞后，子組件要增加props參數，然后才能用props進行接收
子組件接收參數：

import { View, Text } from '@tarojs/components'
function Child(props){
  return ( 
  <View><Text>我是子組件，父組件向我傳值為:{props.userName}</Text></View>
  )
}
export default Child

這就完成了父組件向子組件的傳值。當我們會用組件的形式編寫頁面和組件時，你就可以作一些小東西了。但現在你可以看到，我們把頁面和組件放到了一個文件夾下，並且都使用了jsx擴展名。那Taro時如何區分那些是組件，那些是頁面的？其實它是通過自身的路由來區分的，只要配置路由的，就是頁面，沒配置的就默認是組件。

(7) Taro路由配置

Taro中的路由設置跟React是不同的，它是通過app.jsx中的pages來配置的，並且誰配置在第一個數組位置，誰就是默認打開的首頁。

(7.1) 新建頁面

在/src/pages/文件夾下，建立一個/blog文件夾，在文件夾下面建立一個blog.jsx文件：

import {View , Text} from '@tarojs/components'
function Blog(){
    return (
        <View>
            <Text>Blog Page</Text>
        </View>
    )
}
export default Blog

(7.2) 配置路由

有了頁面之后就可以到/src/app.jsx下，然后在pages的數組里面加入新頁面路徑。

pages: [
    'pages/blog/blog',
    'pages/index/index'
],

這里需要注意一點，就是你不需要用import引入Blog頁面，這個Taro為我們自動做好了。修改完成后，可以到瀏覽器中看一下，可以看到默認頁面已經變成了Blog頁面了。

(7.3) 頁面間的跳轉

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是不支持的。（注意）

我們從Blog頁面，跳轉到Index頁面，程序如何來編寫:

使用跳轉需要使用Taro組件，所以先用import進行引入，然后再引入一個<Button>組件。

import Taro from '@tarojs/taro'
import {View , Text ,Button} from '@tarojs/components'

然后編寫跳轉方法，這里我們直接在function中進行聲明.

const gotoIndex=()=>{
    Taro.navigateTo({url:'/pages/index/index'})
}

有了這個方法后，再編寫一個按鈕，然后再onClick事件中觸發gotoIndex方法就可以了。

<Button onClick={gotoIndex}>我要去Index頁面</Button>

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

(8) Taro頁面間傳參

(8.1) 查詢字符串的形式進行傳值

在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

(8.2) 接收傳遞參數並展示

現在參數已經可以傳遞了，那如何在Index.jsx進行接收那，其實也非常簡單。只要使用this.$router.params就可以進行接收。

當然我們要接收參數，可以在useEffect()中進行:

//該方法 是react hooks中的新特性 需要兩個參數 一個回調函數 ，一個數組用來監測數組中的參數是否變化，如果變換就會執行該方法
useEffect(()=>{
setBlogTitle(this.$router.params.blogTitle)
},[])

頁面完整代碼：

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

(8.3) 多參數的傳遞和接收

我們再來看看如何傳遞多個參數和多個參數的接收，傳遞的時候只要用&進行鏈接就可以了，比如下面這樣。

 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接收參數，並且重新賦值當當前頁面的變量中
  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

(9) Taro 靜態資源引入

Taro的靜態資源引入方式和以前的使用Webpack的方式稍有不同，這里我們就以引入JavaScript文件和Image圖片文件為例。

(9.1) JavaScript 資源的引入

JavaScript資源的引入其實和原來差不多，比如現在我們定義了一個方法叫做XieDaJiao（謝大腳），然后再定義一個方法叫liuying（劉英）
在/src目錄下，新建一個/tools文件夾，然后在文件夾下邊建立一個index.js文件，輸入下面的代碼。

export function xiedajiao(){
    console.log('我是謝大腳')
}

export function liuying(){
    console.log('我是劉英')
}

這時候我們如果想在blog.jsx下使用這兩個方法，可能你會錯誤的使用.

import tools from `../../tools`

正確的引入方式應該是:

import {xiedajiao,liuying} from '../../tools'

使用方法如下：

useEffect(()=>{//該方法有點類似於初始化頁面加載數據
    xiedajiao()
    liuying()
},[])

(9.2) 圖片的引入方式

會了JS的引入和使用，再來看一下最長使用的圖片如何引入。這里是不可以直接使用的。

我們通常的做法：

<Image src="../../static/newbbd0001.jpg" width="100px" height="100px" />

這種方式是沒辦法引入成功的，因為我們的程序最終是要通過Taro編譯器進行編譯的，編譯后的文件目錄會進行改變，你所引用的圖片就會失效。

正確的引入方式是先用import進行引入，然后在使用src屬性:

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' //import先引入圖片

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>
    )
}
export default Blog

如果你覺的這樣比較麻煩，你也可以直接使用require在Image組件中直接使用，代碼如下：

<Image src={require('../../static/newbbd0001.jpg')} width="100px" height="100px" />

(10) Taro中JSX的列表渲染

(10.1) 構建數組

先使用JS的基本語法，構建一個數組：

const girls = [
    {id:1,name:'謝大腳'},
    {id:2,name:'劉英'},
    {id:3,name:'王小蒙'},
    {id:4,name:'香秀'}
]

(10.2) 在JSX中循環列表

有了列表數組后，我們就可以在JSX中進行循環了，循環也是非常簡單的，只要使用ES6的map循環就可以了。代碼如下：

 { girls.map((item,index)=>{
    return (
        <View>{item.name}</View>
    )
}) }

(10.2) 在JSX中使用邏輯判斷

使用三元運算符：

<view>
    男主角是：{zhujueNum==1?'玉田':'劉能'}
</view>

利用短路符來判斷:

 <view>
    男主角是：{zhujueNum==1 && '玉田' || '劉能'}
</view>

(11) Trao請求遠程數據

(11.1) 使用Taro.request獲取遠程數據

編寫一個testHandler方法，方法中使用Taro.request后去遠端數據，獲得數據。

const testHandler= ()=>{
    Taro.request({
        url:'https://apiblog.jspang.com/default/getArticleList'
    }).then(res=>{
        console.log(res.data)
    })
}

然后在JSX中編寫一個<Button>按鈕，加上onClick事件,代碼如下：

 <Button onClick={testHandler}>獲得遠程數據</Button>

這時候點擊按鈕時就應該可以在控制台輸出接口返回的數據。

(11.2) 遍歷數據

這次我們在得到數據后遍歷到JSX中，先用useState聲明一個articleList,代碼如下：

  const  [articleList,setArticleList] = useState([])

然后在return中使用map進行遍歷即可

{
    articleList.map((item,index)=>{
        return (<View key={index}>- {item.title} </View>)
    })
}

這樣我們就可以獲得遠程接口的數據，並渲染到頁面中。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 大前端及前端技術框架梳理微前端技術框架qiankun技術分享 Taro 框架實現原理 taro 引入dva框架 web前端技術框架選型參考個人技術總結---Android前端界面框架搭建微前端框架 qiankun 技術分析 2020年Web前端最新框架技術耗時1年的前端技術框架切換之旅個人技術總結--MUI框架的h5+前端開發