web-view 小程序跳转踩过的坑
发布于 5 年前 作者 fujun 5144 次浏览 来自 分享

一.小程序跳转到web-view网页

在小程序中加载H5页面需要通过小程序提供的 <web-view>

（官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html）


主要是在src中绑定相应的H5页面url地址，如

注意：

在 web-view 中加载的页面的域名，需要在微信公共平台中配置业务域名，否则会在加载页面时给出非法业务域的安全提示，个人和海外账号暂时不支持。（配置业务域名可参考这篇腾讯官方文档：https://kf.qq.com/touch/sappfaq/171102ue6viI171102jm63uy.html），在这篇文档的底部有几个注意事项需要关注，尤其时联合开发的时候：一个小程序最多配置20个安全业务域名，每个域名最多绑定20个小程序，一年内修改域名的次数不能超过50次（次数这个限制要注意了，所以输入域名的时候一定要谨慎一点）；

 

 

二.web-view 跳转到 小程序

从 web-view 的网页跳转到小程序，坑就比较多啦

官方文档提供了相应的接口，但最重要的是需要引入JSSDK，jssdk官方文档请看这里（https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115）

注意：

但是请注意这一点！很重要，虽然下图中提示不进行wx.config无法使用jssdk，但是！实际情况，使用上图中 wx.miniProgram 的一系列方法只需要引入jssdk就好了，并不需要进行复杂的注册（跳转调用的是navigateTo方法，不需要注册，不需要注册，不需要注册），如果你需要使用jssdk的其他接口方法，请务必按api进行注册。


重点注意：

这里要说的就是我遇到的坑啦。

①如果你是用HTML写的H5网页，那么你只需要在要跳转的页面通过<script>引入即可

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>


②如果你是VUE开发的H5网页，那就需要用npm安装导入（文档看这里 https://www.npmjs.com/package/weixin-js-sdk）

安装:
npm install weixin-js-sdk

引入:
import wx from "weixin-js-sdk" ;

使用:
var wx = require('weixin-js-sdk')

 

三.小程序跳转到小程序

小程序跳转小程序，官方文档看这里（https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateToMiniProgram.html）

一开始没有仔细看文档......以为简单的在判断逻辑里面加跳转方法就好了，结果！我的基础库是2.3.0以上的，当然没有生效了，原因是这一句


所以，需要多做一步，我的解决方法是在逻辑判断里面添加了modal确认跳转提示框，在确认事件里引入了跳转，多了一步确认,哈哈，

wx.showModal({
    title: '提示',
    content: '您已xxx,将跳转至xxxx',
    confirmColor: "#1aad19",//设置确认按钮为绿色
    showCancel: false,//不显示取消按钮
    success: function (sm) {
        wx.navigateToMiniProgram({
            appId: "需要跳转的小程序的appId",
             path: '跳转页面的路径如path/index/index',
             extraData: {//传递的参数
               id: id
             },
             envVersion: "develop",//线上版固定为release，开发为develop，体验版为trial
             success(res) {
               // 打开成功
               console.log("跳转成功");
             }
        });
    }
})

 

注意：

跳转还需要在app.json中配置可跳转的小程序的id集合，上图最后也有提示到。配置文档在这里（https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE），如图添加

这个如果跳转成功的话，在开发者工具中就可以得到验证，2.3.0以上会提示将打开xx小程序，是否同意，成功~ 

回到顶部