H5与小程序之间的相互跳转

之前发过一个问答,是关于H5与微信小程序之间的相互跳转,后续我也自己百度答案并且测试跑了一下,终于搞成功了,下面就分享给大家

首先需要大家准备一个小程序,我呢是写了三个页面,一个按钮点击跳转页,一个页面只写了一个web-view,一个页面放了一些图片.然后需要大家准备一个H5小游戏我的已经上传到我的域名之下,直接是个链接,现在准备工作就完成了.
上图是小程序中按钮跳转页

下面我们开始写代码  首先微信小程序按钮界面绑定一个点击事件,跳转到微信小程序的放置web-view页,之所以不是直接点击跳转web_view,我是想以后相互跳转方便,以后从其他页也可以直接跳转附带web-view的小程序页面   (web-view不清楚的点这个链接  https://developers.weixin.qq.com ... onent/web-view.html,  学习一下)

     上图是点击按钮跳转带有web-view的小程序页面的方法   

上图是带有web-view页面的小程序页面(因为是个人网址所以打了码,大家见谅,就是一个小游戏链接)

下面我们修改小游戏代码
首先在小游戏的index.html 中修改
第一步引入微信的js-sdk文件


第二部在一个script中写一个跳转方法以供ts调用  (这其中涉及到ts与js之间的互调,不会的同学附上官网链接  http://developer.egret.com/cn/gi ... s/index.html?home=2)



这个链接跳转的就是我说的第三个只放了图片的页面了,逻辑顺序是小程序按钮页=>小程序web-view页=>跳转到H5小游戏,小游戏中点击按钮返回小程序=>小程序第三个图片页
为什么要这样呢,先面来解释一下,微信自带两种跳转方法,第一个是这种,可以任意跳转小程序的任意一个页面(注意,url: '/pages/shopkeeper/warmPrompt/index'  这个里面的pages前面的/一定不要忘了,因为这个我搞了好久才发现,算是自己失误,或是一个坑吧,提醒大家一下)
另一个跳转方法是   wx.miniProgram.switchTab   直接跳转的小程序路径是tab页,否则无效,奉劝大家用第一种,方便,便于开发时跳转任意一个小程序页面


下面是js方法的调用,我实在main.ts的最下面申请的方法名


然后是在游戏中调用,一个点击事件,点击按钮返回小程序




这样我们就完成了H5与小程序之间的跳转,值得注意的是在小程序测试中,测试号需要在配置中选中不校验域名





上述就是整个流程 ,   欢迎大家积极留言 , 第一篇技术分享贴 , 不足还望见谅

自己顶自己喽