安装以后记得重新运行程序。
{ "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>