使用Taro统一多端开发之页面跳转和发送请求(附源码)

大家好,如果您还对网站跳转系统源码不太了解,没有关系,今天就由本站为大家分享网站跳转系统源码的知识,包括使用Taro统一多端开发之页面跳转和发送请求(附源码)的问题都会给大家分析到,还望可以解决大家的问题,下面我们就开始吧!

1.png

新建页面

在page下新建test1文件夹,先把index下的模板文件复制过去。

QQ图片20190222190135.png

声明页面

修改app.js,在config中的page下新增test1页面路径:

pages:[\n’pages/index/index’,\n’pages/test1/index’,\n],\n

在config下新增tabBar节点:

tabBar:{\nlist:[\n{\npagePath:”pages/index/index”,\ntext:”首页”,\niconPath:”./images/tab/home.png”,\nselectedIconPath:”./images/tab/home-active.png”\n},\n{\npagePath:”pages/test1/index”,\ntext:”测试1″,\niconPath:”./images/tab/home.png”,\nselectedIconPath:”./images/tab/home-active.png”\n}]\n}\n

其中的图片需要放在相应的路径下。

修改test1页面

在test1页面的index.js中加入构造方法:

constructor(props){\nsuper(props);\n};\n

修改页面模板:

render(){\nreturn(\n<ViewclassName=’test1′>\n<Text>Hellotest1!</Text>\n<ButtononClick={this.request}>点我发请求</Button>\n</View>\n)\n}\n

由于用到了Button元素,因此在页面最顶层引入button。

import{View,Text,Button}from’@tarojs/components’\n

按钮上加入了点击事件,因此加入方法。

//发送请求\nrequest(){\nconstparams={\nurl:”https://www.baidu.com/”,\ndata:{},\nmethod:”POST”,\nsuccess:(data)=>{console.log(data)},\nfail:(data)=>{console.log(data)}\n};\nTaro.request(params)\n}\n

修改index页面

修改页面模板:

render(){\nreturn(\n<ViewclassName=’index’>\n<Text>Helloworld!</Text>\n<ButtononClick={this.toPage}>跳转页面</Button>\n</View>\n)\n}\n

按钮上加入了点击事件,因此加入方法。

//跳转页面\ntoPage(){\nif(Taro.getEnv()==Taro.ENV_TYPE.WEB){\nTaro.navigateTo({\nurl:’/pages/test1/index’,\n})\n}else{\nTaro.switchTab({\nurl:’/pages/test1/index’,\n})\n}\n}\n

运行

npmrundev:h5

好了,文章到这里就结束啦,如果本次分享的网站跳转系统源码和使用Taro统一多端开发之页面跳转和发送请求(附源码)问题对您有所帮助,还望关注下本站哦!

Published by

风君子

独自遨游何稽首 揭天掀地慰生平