uniAPP小程序webview从H5返回小程序不起作用

微信小程序 同时被 2 个专栏收录
5 篇文章 0 订阅
3 篇文章 0 订阅

最近在用uniAPP做小程序与H5之间的跳转,从微信小程序跳转到H5很容易实现了,但是从H5再返回到小程序根据官网上的提示使用uni中的跳转方法时一直不起作用。后来在大佬的帮忙下仔细调试下终于解决了这个问题。接下来我来梳理一下跳回小程序的方法,当你写的程序也不起作用的时候,可以着重看一下我写的“注意”,(那都是我踩过的坑啊。。。)希望对你有所帮助。

一、引用依赖的文件

在 web-view 加载的 HTML 中调用 uni 的 API,需要在 HTML 中引用必要的 JS-SDK。

<!-- 微信 JS-SDK  -->  
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>  
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

注意!!!
1、有的地方说微信 JS-SDK这个js可以不用引入,但是我没有引入就一直不起作用,所以如果你没有引入这个js而一直不起作用的话,一定要引入这个js再试试;
2、微信的SDK一定要写在uniAppSDK的前面。

二、调用方法的前提

可以调用官网上所说的五个跳转方法与uni.postMessage、uni.getEnv这些方法的前提是:待触发 UniAppJSBridgeReady 事件后,才可调用 uni 的 这些API。

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

注意!!!
1、如果H5端是用引入vue方式写的,触发方法一定要写在new Vue的外面,原因我也不太清楚,我当时将触发事件写到mounted中根本不执行,放到外面才执行了。

2、触发方法成功执行后,你不必非得在事件里面调用uni的方法,在别的地方也行,vue中也是可以的。不过你可以在触发事件的回调里调用uni的方法来判断触发方法是否成功执行了没。

三、调用uni的路径跳转方法

除了在触发事件回调里调用,另外可以在任何地方调用,比如vue中methods中点击方法里

methods:{
	clickBack(){
       uni.reLaunch({
       		// 跳回小程序的路径
            url:'/pages/lianChuang/itemList/itemList',
            // 以下回调方法可以不要,如果需要调试的时候可以加上
            success:function (res) {
                console.log("success",res);
            },
            fail:function (res) {
                console.log("fail",res);
            },
            complete:function (res) {
                console.log("complete",res);
            }
        })
    },
}
  • 0
    点赞
  • 7
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值