评论

web-view 小程序跳转踩过的坑

小程序跳转H5,H5跳回小程序,小程序跳转小程序

一.小程序跳转到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小程序,是否同意,成功~ 

最后一次编辑于  07-03  
点赞 1
收藏
评论
登录 后发表内容