测试平台分支-小程序端-2-第一个接口（下）地址导航

怪盗LYL

发布于 2022-11-08 10:22:18

2320

发布于 2022-11-08 10:22:18

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

最近一直在加班，所以没时间更新，房子也要到期了搬家，等稳定下来再持续更新。

安装uni-ui

实在没想好选什么ui，就选择用uniapp官方出的插件了。
首先是安装：uni-ui支持 HBuilderX直接新建项目模板、npm安装和单独导入个别组件等多种使用方式
通过 uni_modules 导入全部组件：

使用hbuilderx导入就可以了

安装以后记得重新运行程序。

代码编写

简单写了下超链接：

发现uniapp的超链接在小程序里是没法直接跳转的，所以需要其他办法

新建一个out页面：

小程序跳转页面必须在page.json里面配置上，

		{			"path": "pages/out/out",			"style": {				"navigationBarTitleText": "超链接"
			}
		}

使用 uni.navigateTo进行页面跳转，拼接跳转参数。

<template>	<view class="view_body" >
		<div style="" class="mydiv">
			<!-- <web-view src="https://www.baidu.com/"></web-view> -->
		<ul>
			<li v-for="i in v_hrefs"  style='list-style:none;'>
				<uni-icons type="link" size="20" color="#e84393"></uni-icons>
				<a class='mya' @click="toout(i.url)">{{i.name}}</a>
				<uni-icons type="closeempty" size="20" color="#e84393" @click="delete_link(i.id)"></uni-icons>
			</li>
		</ul>
		</div>
	</view></template><script>
	export default {		data() {			return {				title: '首页',				v_hrefs:[{id: 12, name: "百度", url: "https://www.baidu.com/", author: "616"},{id: 14, name: "AcFun", url: "https://www.acfun.cn/", author: "616"}]
			}
		},		onLoad() {		this.geturl()
		},		methods: {			toout(url){
				uni.navigateTo({					url: '../out/out?url='+url
				});
			},			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)							this.v_hrefs=response.data.all_href;
						}
				  })
			},			delete_link(id) {
				axios.post('api/delete_href/', {					id: id,
				}, {					headers: {						'content-type': 'application/json',						// "AUTHORIZATION": 'jwt ' + this.$cookies.get("login-token") //token换成从缓存获取
					}
				}).then(res => {					if (res.data.status == 200) {						this.$message.info('删除成功');						document.location.reload();
					} else {						let self = this
						self.$alert(res.data.error, '删除失败', {							confirmButtonText: '确定',							callback: action => { // eslint-disable-line no-unused-vars
								document.location.reload();
							}
						})
					}
				}).catch(err => {					this.status_check(err)
				})
			}
		}
	}</script><style>
	.view_body {		display: flex;		flex-direction: column;		align-items: center;		justify-content: center;		background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F15%2F20200315200108_cbvkf.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658246359&t=1b069d76bb4fba1da86749c52874ac3d');		width:100%;		height:100%;		position:fixed;		background-size:100% 100%;
	}	.mydiv {		text-align: center;		/* background-color: #eaeaea; */
		height: 80%;		width: 75%;
	}	.mydiv li {			float: left;			width: 25%;
		}	.mya{			display: inline-block;			text-decoration: none;			color: transparent;			background: linear-gradient(to top, black, #fd59f1);
			-webkit-background-clip: text;			font-size: large;
		}</style>

接收页面使用onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数 console.log(option); //打印出上个页面传递的参数。 this.out_src = option.url }
使用web-view组件用来承载网页的容器。

<template>	<web-view id='out' :src="out_src" ></web-view></template><script>
	export default {		data() {			return {				out_src: ''
			}
		},		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option); //打印出上个页面传递的参数。
			this.out_src = option.url
		}
	}</script><style></style>