之前发过一个问答,是关于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与小程序之间的跳转,值得注意的是在小程序测试中,测试号需要在配置中选中不校验域名

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