大家好,如果您还对网站跳转系统源码不太了解,没有关系,今天就由本站为大家分享网站跳转系统源码的知识,包括使用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统一多端开发之页面跳转和发送请求(附源码)问题对您有所帮助,还望关注下本站哦!
