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