小程序web-view中嵌套H5如何跳转其他小程序

这篇具有很好参考价值的文章主要介绍了小程序web-view中嵌套H5如何跳转其他小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

首先web-view中H5是无法跳转到其他小程序的

只能通过H5跳转回小程序,再让小程序跳转到其他小程序

H5跳转回小程序使用wx.miniProgram.navigateTo()

小程序跳转小程序使用wx.navigateToMiniProgram(),官方文档有示例,用法很简单,只需要传入appid,还有path(可选参数,不是必须的,不传则默认跳转到小程序首页)

在小程序中我新建了一个页面用来做跳转其他小程序,逻辑是这样的,H5中跳回这个新建的页面(携带参数),然后在生命周期onLoad()中调用wx.navigateToMiniProgram()

wx.navigateToMiniProgram({
	appId: option.appid,
	path: `${option.path}?id=${option.id}`,
	success(res) {
	// 打开成功
	}
})

但是奇怪的问题出现,我真机调试的时候第一次可以跳转到其他小程序,第二次不行,点几次不行之后,又可以一次,其中什么规律我也没摸清楚(也有可能没有规律),然后打开调试,wx.navigateToMiniProgram这个方法报navigateToMiniProgram:fail can only be invoked by user TAP gesture

意思大概就是该事件只能由用户手动触发

所以我在onLoad()中多加了一个uni.showmodel,当点击确定的时候,再去调用wx.navigateToMiniProgram这个api,然后 就可以了。文章来源地址https://www.toymoban.com/news/detail-714101.html

wx.showModal({
						title: '温馨提示',
						content: '提示内容',
						showCancel: true, //是否显示取消按钮
						cancelText: "取消", //默认是“取消”
						cancelColor: '#000000', //取消文字的颜色
						confirmText: "确定", //默认是“确定”
						confirmColor: '#3cc51f', //确定文字的颜色
						success: function(res) {
							if (res.cancel) {
								//点击取消,wx.navigateBack
								wx.navigateBack()
							} else {
								// 使用wx.navigateToMiniProgram跳转到小程序
								wx.navigateToMiniProgram({
									appId: option.appid,
									path: `${option.path}?id=${option.id}`,
									success(res) {
										// 打开成功
									}
								})
							}
						},
						fail: function(res) {
							//接口调用失败的回调函数,wx.navigateBack
						},
						complete: function(res) {
							//接口调用结束的回调函数(调用成功、失败都会执行)
						},
					})

到了这里,关于小程序web-view中嵌套H5如何跳转其他小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序使用web-view,内嵌跳转h5踩坑记!!

    由于业务需要在微信小程序内,嵌入外网h5到小程序,项目整体在开发,调试完成都没有任何问题,但是,在部署到测试环境之后,跳转h5报如下错误:   通过查阅官方文档,以及各类技术文档,报错的原因是,没有在微信公众平台配置业务域名和合法域名;具体操作步骤 【

    2024年02月08日
    浏览(46)
  • 微信小程序web-view环境下H5跳转小程序页面方法

    一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转。但是web-view页面要想通过手指触碰返回小程序页面,就无法使用超级链接a标记了。那么这个问题应该如何解决呢? 首先需要在H5页面中引入JSSDK,它可以让H5页面的js文件执

    2024年01月17日
    浏览(46)
  • 如何在web-view页添加悬浮按钮,在web-view页嵌套自定义元素

    效果如图,模拟器无法显示,真机调试正常

    2024年02月03日
    浏览(23)
  • 微信小程序web-view跳转

    h5项目中跳转外部连接可使用的web-view标签解决 官网连接:web-view | 微信开放文档 1.添加事件 2.新页面中的跳转链接(一行即可,默认会会自动铺满整个小程序页面) src就是路径,写需要跳转的网页地址即可! 3.配置路由,app.jason中 4.小程序后台配置域名 开发管理=开发设置=业务域名中

    2024年02月11日
    浏览(53)
  • 跨平台应用开发进阶(五十)uni-app ios web-view嵌套H5项目白屏问题分析及解决

    应用 uni-app 框架开发好APP上架使用过程中,发现应用经过长时间由后台切换至前台时,通过 webview 方式嵌套的H5页面发生白屏现象。 任何手机设备上,当手机内存不足时,os都会回收资源。一般是先回收后台打开的资源。如果当前应用占用的资源过高,当前应用也有可能崩溃

    2024年02月14日
    浏览(39)
  • 微信小程序组件、web-view、h5之间交互

    目录结构 小程序 /pages/index/index.wxml /pages/index/index.js /pages/index/index.json 组件 /component/index-page/index.wxml /component/index-page/index.js /component/index-page/index.json web-view /pages/web/web.wxml /pages/web/web.js h5

    2023年04月16日
    浏览(55)
  • 支付宝小程序 组件 web-view h5交互

    目录结构 支付宝小程序 /pages/index/index.axml /pages/index/index.js /pages/index/index.json 组件  /component/index-page/index.axml  /component/index-page/index.js   /component/index-page/index.json web-view /pages/web/web.axml /pages/web/web.js h5

    2024年02月13日
    浏览(28)
  • 小程序使用web-view内嵌跳转另一个小程序

    1、配置需要跳转的小程序地址和参数,直接跳转 2、新建一个h5Pages.vue文件使用web-view内嵌需要跳转的小程序界面 html部分: js部分: 3、可能需要对方小程序配置安全域名

    2024年02月09日
    浏览(40)
  • 微信小程序跳转公众号文章 web-view方式

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 提示:这里可以添加本文要记录的大概内容: 小程序和公众号都必须时企业认证的 1.在小程序里面关联相关的公众号 2.在公众号里面关联相关的小程序 提示:以下是本篇文章正文内容,下面案例可供参

    2024年02月09日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包