uniapp H5 跳转应用外页面

当我们在开发中遇到跳转外部链接时，以上方式就不能满足了。今天在开发中就遇到了，在官方文档上看到了web-view，需要新建组件，然后在页面中引入在使用uni.navigateTo来实现页面跳转，感觉有点麻烦，就没采用。最终使用window.location.href来实现的。需求是在H5中循环列表绑定点击事件，分别跳转不同的外部链接，链接是后端提供的接口中有字段。这样就可以实现了跳转外部链接了。.

小青年一枚

9262人浏览 · 2022-07-26 16:18:43

小青年一枚 · 2022-07-26 16:18:43 发布

在uniapp中页面路由分为以下几种：

navigateTo 保留当前页面跳转到应用内某个页面
navigateBack 关闭当前页面返回上一页面
redirectTo 关闭当前页面跳转到应用内某个页面
relaunch 关闭所有页面打开应用内某个页面
switchTab 跳转到底部tabbar页面关闭非tabbar页面

当我们在开发中遇到跳转外部链接时，以上方式就不能满足了。今天在开发中就遇到了，在官方文档上看到了web-view，需要新建组件，然后在页面中引入在使用uni.navigateTo来实现页面跳转，感觉有点麻烦，就没采用。最终使用window.location.href来实现的。
需求是在H5中循环列表绑定点击事件，分别跳转不同的外部链接，链接是后端提供的接口中有字段。接下来就看下代码：

<view v-for="(item,index) in footLink" :key="item.id"  class="footer-item" @click="link(item)">
  <image :src="item.iconAddress" />
</view>



<script>
export default {
	data() {
		return {
        
        }
    },
    methods:{

		link(item){
			let linkUrl = item.linkUrl;
			// #ifdef H5
			window.location.href = linkUrl
			// #endif
	    },
	
    }
};
</script>

这样就可以实现了跳转外部链接了。

从app内跳转到浏览器

linkClick(){
                setTimeout(function(){
                plus.runtime.openURL('http://www.baidu.com');
                },1000)
            }