前端框架----taro4资源引入

资源引入

引入函数

import 属于ES6语法
如下目录：
pages/index/index.tsx
在index.tsx中引入js资源

import { myFunc } from '../../test'

pages同级目录下创建test.js：

export function myFunc(){
	console.log("my func");
}
export function test(){}
//也可以 导出对象
export default {
	myFunc,
	test
}

引入图片资源

import { Image } from '@tarojs/components'

<Image src = {require("../dog.jpg")}></Image>

//也可以,使用变量接收一下
import img from '../dog.jpg'
<Image src = {require(img)}></Image>

引入css样式

import './index.scss'
<Image className="img" src = {require(img)}></Image>

 
 

index.scss:

.index{
	.img{
		width:200PX;/*小写的px默认转为rem*/
	}
}

条件渲染

true?<Image src = {require("../dog.jpg")}></Image>:null
//也可以封装到一个函数中

数组的遍历

{
	arr.map((e,idx)=>{
		return <View key={idx}>{e.title}</View>
	})
}
//key唯一标识 虚拟DOM

组件组合

import {Test} from './test.js'
...
return (<Test>
	<Text>内部文本</Text>
</Test>)

//内部的Text组件没显示
//需在Test组件虚拟DOM中增加{this.props.child}
<View>
	测试组件{this.props.child}
</View>
//也可以属性传值，收集到props

事件

pages/event/index.tsx

import Taro,{Component,Config} from '@tarojs/taro'
import {View,Text} from '@tarojs/components'
const isH5 = process.env.TARO_ENV //当前运行环境'h5'
export default class Event extends Component{
	
	handleClick(){
		console.log(arguments)
		//'p1',event对象
		//this 绑定到组件对象
		event.stopPropagation()//阻止事件冒泡到父元素
	}
	return (
		<View>
			<Button onClick={this.handleClick.bind(this,'p1')}>点击事件</Button>
		</View>
	)
}

 
 
 
 
后续。。。
taro微信小程序
上一篇：前端框架----taro3 路由