这节中我们使用taro-cli为我们生成的项目添加功能。
1.png
新建页面
在page下新建test1文件夹，先把index下的模板文件复制过去。
QQ图片20190222190135.png
声明页面
- 修改app.js，在config中的page下新增test1页面路径：
pages: [
'pages/index/index',
'pages/test1/index',
],
- 在config下新增tabBar节点：
tabBar: {
list: [
{
pagePath: "pages/index/index",
text: "首页",
iconPath: "./images/tab/home.png",
selectedIconPath: "./images/tab/home-active.png"
},
{
pagePath: "pages/test1/index",
text: "测试1",
iconPath: "./images/tab/home.png",
selectedIconPath: "./images/tab/home-active.png"
}]
}
其中的图片需要放在相应的路径下。
修改test1页面
- 在test1页面的index.js中加入构造方法：
constructor(props) {
super(props);
};
- 修改页面模板：
render () {
return (
<View className='test1'>
<Text>Hello test1!</Text>
<Button onClick={this.request}>点我发请求</Button>
</View>
)
}
由于用到了Button元素，因此在页面最顶层引入button。
import { View, Text, Button } from '@tarojs/components'
- 按钮上加入了点击事件，因此加入方法。
// 发送请求
request(){
const params = {
url: "https://www.baidu.com/",
data: {},
method: "POST",
success: (data) => {console.log(data)},
fail: (data) => {console.log(data)}
};
Taro.request(params)
}
修改index页面
- 修改页面模板：
render () {
return (
<View className='index'>
<Text>Hello world!</Text>
<Button onClick={this.toPage}>跳转页面</Button>
</View>
)
}
- 按钮上加入了点击事件，因此加入方法。
// 跳转页面
toPage() {
if (Taro.getEnv() == Taro.ENV_TYPE.WEB) {
Taro.navigateTo({
url: '/pages/test1/index',
})
} else {
Taro.switchTab({
url: '/pages/test1/index',
})
}
}
运行
npm run dev:h5
点击跳转页面可以跳到第二个页面，在第二个页面点击发送请求可以在network中看到相应请求。
