当前位置:首页 > 技术分享 > 正文内容

uniapp打开外链并在webview跳转到app内部页面

admin2年前 (2022-09-09)技术分享10089

可是打开后又无法返回,想了一下之后,新建了一个页面,在页面中插入web-view,要在


<template>

    <view>

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

    </view>

</template>

 

<script>

    export default {

        data() {

            return {

                url: ''

            }

        },

        onLoad(e) {

             // 获取传递过来的链接

            this.url = e.url

        }

    }

</script>


pages.json里面配置这个新页面


{

"path": "pages/index/webview",

"style": {

"navigationBarTitleText": "",

"navigationBarBackgroundColor": "#FFFFFF",

"navigationBarTextStyle": "black",

"navigationStyle": "custom"

}

}

点击跳转新页面,把url通过地址栏传参过去。


navToLink(){

uni.navigateTo({

url: `/pages/index/webview?url=${this.url}`

})

}

然后就完美的打开了,并且可以无缝隙返回。


uniapp中webview跳转到app内部页面

官方文档:

https://ask.dcloud.net.cn/article/35083


第一步:在webview加载的页面引入Js

<!-- uni 的 SDK,必须引用。 -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

还有一个微信小程序的,如果不考虑微信小程序,则无需引入微信的 JS-SDK。


第二步:注意调用时机
在引用依赖的文件后,需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后,才能安全调用 uni 的 API。

document.addEventListener('UniAppJSBridgeReady', function() {  
    uni.getEnv(function(res) {  
        console.log('当前环境:' + JSON.stringify(res));  
    });  
});

第三步:实际调用

支持调用所有的 uni 路由方法,可以实现从 HTML 重新跳转回应用内的页面。

在 UniAppJSBridgeReady 后,调用路由方法跳转到应用内的页面。

官方例子:

document.addEventListener('UniAppJSBridgeReady', function() {  
    document.querySelector('.btn-list').addEventListener('click', function(evt) {  
        var target = evt.target;  
        if (target.tagName === 'BUTTON') {  
            var action = target.getAttribute('data-action');  
            if(action === 'navigateTo') {  
                uni.navigateTo({  
                    url: '/pages/component/button/button'  
                });  
            }  
        }  
    });  
});

自己使用,需要传参:

//uniappwebview跳转到app内部页面
document.addEventListener('UniAppJSBridgeReady', function () {
    document.querySelector('.jump-uniapp').addEventListener('click', function (evt) {
        var target = evt.target;
        var articleId = target.getAttribute('articleId');
        var userName = target.getAttribute('userName');
        //if (target.tagName === 'BUTTON') {
            //var action = target.getAttribute('data-action');
            //if (action === 'navigateTo') {
                uni.navigateTo({
                    url: '/pages/details/articleDetailWebView?id=' + articleId + "&userName=" + userName
                });
            //}
        //}
    });
});

参数就用自定义属于绑定好即可,然后使用target.getAttribute('xx')这种方式获取即可。一次成功!

最精简的写法

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', function() { 
    document.querySelector('.btn-list').addEventListener('click', function(evt) {
        uni.navigateTo({
            url: '/pages/index/index'
        });  
    });  
});
</script>
<button class="btn-list">查看详情</button>


扫描二维码推送至手机访问。

版权声明:本文由小刚刚技术博客发布,如需转载请注明出处。

本文链接:https://blog.bitefu.net/post/415.html

分享给朋友:

相关文章

解决 SVN Skipped 'xxx' -- Node remains in conflict

更新命令:svn up提示代码:意思就是说 ,这个文件冲突了,你要解决下Updating '.': Skipped 'data/config.php' -- ...

2021可用的百度网盘高速下载方法分享

2021可用的百度网盘高速下载方法分享

最新可用方法https://blog.bitefu.net/post/163.html方法很简单就是利用网盘直链下载助手【网盘直链下载助手】是一款免费开源获取网盘文件真实下载地址的油猴脚本,基于PCSAPI,支持Windows,Mac,Li...

系统小技巧:微软版“Ghost” Windows FFU 系统安装还原

系统小技巧:微软版“Ghost” Windows FFU 系统安装还原

在日常的维护中,系统的备份和还原是大家经常需要操作的事情。虽然Windows 10已经提供很多的工具,如系统还原、WIM备份/还原,VHD备份等。不过这些工具大多是基于文件的备份/还原。我们以前经常的使用的Ghost则是基于扇区的备份/还原...

贾氏鸣天鼓健耳养肾操

贾氏鸣天鼓健耳养肾操

《贾氏鸣天鼓健耳养肾操》鸣天鼓是健耳强肾治耳病的古法,贾氏越云自创的鸣天鼓健耳养肾操是在古法的基础上创建。顺序:1静坐挺胸。2双手放心脏位置的胸口,左手掌盖住右手掌。3闭目静心,深呼吸19下。4双手相互搓揉,让手掌发热。5用发热的双手手掌严...

php Aes 加密模式ECB填充pkcs5padding base64

最近做支付项目用到了aes加密不过试了好多办法总是和官方给出的结果不一样,找了很久终于找到了测试结果同 http://tool.chacuo.net/cryptaes/ <?php /**  * [Aes&nb...

遭遇国外ip抓取或攻击怎么办一招解决禁止海外IP访问

遭遇国外ip抓取或攻击怎么办一招解决禁止海外IP访问

究发现很多网站被攻击都是来自海外的肉鸡,所以禁掉海外IP访问网站也是不错的防护手段,而且国内网站几乎很少有国外用户访问,称之为大局域网也不为过。今天主机吧来教大家如何利用域名解析禁止掉海外IP访问网站。绝大多数域名解析服务商都是提供电信联通...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。