uniapp跳转外部链接

uniapp跳转外部链接

  • 回顾
  • 实现思路
  • 测试

回顾

项目需求:从页面中跳转到优惠券的领取页

分析:那不就是需要跳转外链嘛,这还不简单,直接window.location.href + url 不就结束啦

过程:结果是跳转失败,无法实现。然后想着通过webview是否可行?说干就干。诶,成了! 下面是实现思路

实现思路

在uniapp项目中新建文件
uniapp跳转外部链接_第1张图片

在pages.json中进行配置

uniapp跳转外部链接_第2张图片

注意:目前我的项目有做分包处理,所以这里是在subPackages中配置

在新建的文件中引入code

<template>
    <view>
        <web-view :src="url"></web-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            url: ''
        }
    },
    onLoad(item) {
        this.url = decodeURIComponent(item.url)
        // 传入需要跳转的链接 使用web-view标签进行跳转
    },
    methods: {

    }
}
</script>
<style></style>

然后在需要配置跳转的方法或函数

uniapp跳转外部链接_第3张图片
因为我的业务代码中含有其他业务,所以截图并不完整哦。具体参考下面code

let pathUrl = '需要跳转的link'
uni.navigateTo({ 
	url: '你项目的webview路径?url='+ pathUrl
})

针对这里的link,需要注意是如果需要在小程序中去进行跳转外链,那么link得是https

测试

尝试触发该方法
done✅
冲冲冲

你可能感兴趣的:(项目,uniapp,uni-app,vue.js,javascript)