Taro静态资源引入

Taro的静态资源引入方式和以前的使用Webpack的方式稍有不同，我们就以引入JavaScript文件和Image图片文件为例，讲解Taro中引入静态资源的正确方法。

JavaScript资源的引入方法

JavaScript资源的引入其实和原来差不多，比如现在我们定义了一个方法叫做Zhangsan，然后再定义一个方法叫LiSi。
在/src目录下，新建一个/tools文件夹，然后在文件夹下边建立一个index.js文件，输入下面的代码。

export function zhangSan(){
    console.log('我是张三')
}
export function liSi(){
    console.log('我是李四')
}

这时候我们如果想在blog.jsx下使用这两个方法，可能你会错误的使用.

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

正确的引入方式应该是:

import {zhangSan,liSi} from '../../tools'

使用方法如下：

useEffect(()=>{
    zhangSan()
    liSi()
},[])

图片的引入

会了JS的引入和使用，再来看一下最长使用的图片如何引入。这里是不可以直接使用的。
我们通常的做法

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

这种方式是没办法引入成功的，因为我们的程序最终是要通过Taro编译器进行编译的，编译后的文件目录会进行改变，你所引用的图片就会失效。
正确的引入方式是先用import进行引入，然后在使用src属性，这里给出blog.jsx的全部代码。

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

如果你觉的这样比较麻烦，你也可以直接使用require在Image组件中直接使用，代码如下：

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