测试平台分支-小程序端-1-第一个接口（上）

怪盗LYL

发布于 2022-06-13 13:34:14

29000

代码可运行

文章被收录于专栏：测试开发真货测试开发真货

运行总次数：0

代码可运行

首先我们要配置两个页面，可以看下官网的项目结构，pages.json 配置页面路由、导航条、选项卡等页面类信息

添加两个导航条，我这里添加了一个首页一个我的，记得新建一个page下面的mine目录和vue文件。

{	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{			"path": "pages/index/index",			"style": {				"navigationBarTitleText": "首页"
			}
		},
		{			"path": "pages/mine/mine",			"style": {				"navigationBarTitleText": "我的"
			}
		}
	],	"globalStyle": {		"navigationBarTextStyle": "black",		"navigationBarTitleText": "uni-app",		"navigationBarBackgroundColor": "#F8F8F8",		"backgroundColor": "#F8F8F8"
	},	"tabBar": {		"color": "#333333",		"backgroundColor": "#F8F8F8",		"selectedColor": "#00B26A",		"list": [{				"pagePath": "pages/index/index",				"text": "首页",				// "iconPath": "static/images/tabbar/home.png",
				// "selectedIconPath": "static/images/tabbar/home-act.png"
			},
			{				"pagePath": "pages/mine/mine",				"text": "我的",				// "iconPath": "static/images/tabbar/mine.png", #默认展示图标
				// "selectedIconPath": "static/images/tabbar/mine_selected.png" #选中以后图标
			}
		]
	}
}

现在可以来写我们的第一个接口地址导航。onload 是监听页面加载的所以我们可以把调用写在这里，methods是放方法的。uniapp调用接口使用uni.request函数。

<script>	export default {		data() {			return {				title: 'Hello'
			}
		},		onLoad() {		this.geturl()
		},		methods: {			geturl(){
				uni.request({					url: 'http://127.0.0.1:8000/api/geturl', 
						data: {//参数
							id:1,
						},						header: {						'content-type': 'application/json',						// "AUTHORIZATION": 'jwt ' + this.$cookies.get("login-token") //token换成从缓存获取
						},						method:'GET',//请求方式，必须为大写
						success: response => {							console.log(response.data.all_href);
						}
				  })
			}
		}
	}
</script>