Taro多端統一框架學習（四）靜態資源的引入

JavaScript資源引入的方法

JavaScript的引入和React的引入方式差不多，比如現在我們定義了一個方法叫做XieDaJiao（謝大腳），然後再定義一個方法叫liuying（劉英）。

在/src目錄下，新建一個/tools文件夾，然後在文件夾下邊建立一個index.js文件，輸入下面的代碼。

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

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

建立完成後，我們在blog.jsx文件中引入這個，需要用ES的解構的方式引入：

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

然後使用的方法，也是利用在useEffect中運行，如下：

useEffect(()=>{
    xiedajiao()
    liuying()
},[])

引入圖片的方式

Taro引入圖片的方式有兩種： import xxx from ‘…’ 然後用將xxx放到相應的src的方式和直接在src中用require方式
下方是blog.jsx的代碼，是用import的方式：

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'

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

如果想用require的方式，將Image組件的src屬性改爲：

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

更多資源的引入方式，可以來看下Taro資源引入的文檔：http://taro-docs.jd.com/taro/docs/static-reference.html