微信小程序内部通过web-view打开H5跳转小程序页面（判断H5是在微信小程序内部打开还是在外部打开）

青青子衿越

已于 2023-09-07 18:00:49 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签：小程序微信小程序

于 2023-06-16 17:12:08 首次发布

本文链接：https://blog.csdn.net/qq_46376192/article/details/131250695

该代码段展示了如何检测用户环境并进行H5到微信小程序的跳转。如果在微信环境中，它会尝试使用`wx.miniProgram.navigateTo`方法；否则，对于非微信环境，它会处理不同设备的跳转方式，如PC端提示或通过接口生成URLScheme来打开小程序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	goWeapp() {
				var ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					// ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
					wx.miniProgram.getEnv((res) => {
						if (res.miniprogram) {
							console.log('在小程序里')
							wx.miniProgram.navigateTo({
								url: `/packageA/pages/acPreviewMS/index?StoreId=${this.PromotionInfo.StoreId}&acId=${this.PromotionInfo.ActivityId}&AcType=${this.activityDetail.AcType}`,
								success(res) {
								    console.log(res) // 输出：{ errMsg: "navigateTo:ok" }
								  },
								  fail(res) {
								    console.log(res) // 输出：{ errMsg: "navigateTo:fail" }
								  }
							})

						} else {
							console.log('不在小程序里');
							this.goActiveDetail();
						}
					})
				} else {
					console.log('不在微信里')
					this.goActiveDetail();

				}



			},
goActiveDetail() {
				var that = this;
				// 先判断是不是pc端打开的h5 如果是pc端提醒用手机打开页面
				if (window.navigator.userAgent.indexOf("Windows") != -1) {
					window.alert("请使用手机打开！")
				} else {
					// 调取接口获取URL Scheme
					let params =
	`StoreId=${that.PromotionInfo.StoreId}&acId=${that.PromotionInfo.ActivityId}&AcType=${that.activityDetail.AcType}`
					console.log(params)
					$.post('/api/wx/GenerateScheme', {
							Path: "packageA/pages/acPreviewMS/index", //打开的小程序页面路径
							Query: params,
							// env_version: "trial" //  正式版为"release"，体验版为"trial"，开发版为"develop"
						})
						.then(res => {
							let UrlScheme = res.Data
							setTimeout(() => {
								window.open(UrlScheme);
							}, 200)
						})

				}
			},

web-view | 微信开放文档
微信外部跳转小程序页面具体请看我的上上一篇文章h5跳转微信小程序（微信内部浏览器以及外部浏览器均适用）_青青子衿越的博客-CSDN博客

注意：苹果手机可能会出现跳转不成功所以一定要加一下延迟