小程序跳转问题踩坑（小程序跳转H5,H5跳回小程序,小程序跳转小程序）

 

最近遇到了一系列的小程序的跳转问题，甚是头大，好不容易最后都解决了，总结记录一下

1、小程序中加载H5页面，H5页面是一个表单，提交后执行跳转到小程序的其他页面

（1）小程序中加载H5页面

在小程序中加载H5页面需要通过小程序提供的<web-view>（官方文档看这里https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html）主要是在src中绑定相应的H5页面url地址，如https://www.baidu.com这种；

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

添加成功后可以在微信开发者工具中详情信息中的域名信息中进行查看，分为几个分类包括request啊文件上传下载啊各种，如果你的h5页面涉及很多接口的话，建议都添加上，各个分类中相同的域名配置是算作一个的，不用担心在不同分类中配置相同的域名会占用20个业务域名的名额。

之后，通过访问你设置的web-view的路由加上?url=encode之后的url就可以访问web-view页面了，不过在开发者工具里面有接口的页面在调试的时候预览存在问题，我的是没看到页面。。。不过真机上是ok的。

2、H5页面跳转回小程序

这个功能是基于第一步的，在web-view中内嵌了H5页面后，如果需要进行跳转回小程序的操作，参考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进行注册。

引入jssdk可以通过script直接引入，也可以通过npm 安装后进行导入

script导入：

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

npm 安装后导入（yarn不支持安装，试过了） 

文档看这里https://www.npmjs.com/package/weixin-js-sdk

npm install weixin-js-sdk

我h5页面使用的vue，导入方式如下

import wx from "weixin-js-sdk" ;//引入jssdk 

接下来就可以使用跳转了，示例代码如下

let path = '/pages/xxx?id=111';//注意路径一定要有/path/xxx  直接写path/xxx会跳转失败

wx.miniProgram.navigateTo({

       url: path

});

可以实现跳转

3、小程序跳转小程序

 小程序跳转小程序，官方文档看这里（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集合，上图最后也有提示到2.4.0版本xxxx，话不多说，配置文档在这里（https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE），如图添加

注意：如果是跳还需要在根app.json文件中配置可跳转的小程序appid集合列表（单个小程序可接受跳转过来的小程序链接配置不超过10个），如下图

"navigateToMiniProgramAppIdList": [

    "appid1",

    "appid2"

],

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

个人总结，如有遗漏，欢迎评论批评指正，谢谢~~~