小程序跳转H5或者其他小程序

  1. h5跳转小程序有两种情况

(1)从普通浏览器打开的h5页面跳转小程序使用wx-open-launch-weapp可以实现h5跳转小程序

html 复制代码
<wx-open-launch-weapp
                style="display:block;"
                v-else
                id="launch-btn"
                :username="wechatYsAppid"
                :path="path">
                    <script type="text/wxtag-template">
                        <style>
                        .btn {
                            width: 100%;
                            height: 48px;
                            margin-top: 21px;
                            font-size: 18px;
                            color: #FFFFFF;
                            line-height: 48px;
                            text-align: center;
                            border-radius: 15px;
                            background-color: #01CB88;
                            font-weight: 500;
                            border:none;
                        }
                    </style>
                    <button class="btn">跳转小程序</button>
                </script>
            </wx-open-launch-weapp>

(2)从小程序环境中的H5页面(也就是从小程序中通过web-view跳转到的H5页面)跳到小程序

javascript 复制代码
//先判断当前页面所处环境是否为微信内置浏览器,如果是则代表是web-view页面,则使用:

//是否是微信内置浏览器
var ua = window.navigator.userAgent.toLowerCase(); 
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    console.log("micromessenger"); //微信内置浏览器
wx.miniProgram.navigateTo({
					url: `/pages/books/index?AuthOauthToken=${AuthOauthToken}&productId=[10]&source=takes`, // 小程序内页面路径及查询参数
					success:function(res) {
					},
					fail:function(res) {
					}
				});
}

3.小程序跳转其他小程序,使用wx.navigateToMiniProgram()跳转

javascript 复制代码
let path=`pages/sys/booksAuthOauthToken=${AuthOauthToken}&productId=${productId}&to=${encodeURIComponent('/pages/look/index')}&productId=[3,4]`;
				uni.navigateToMiniProgram({
					// 某某小程序
					appId: this.$httpWX.azAppId,
					path: path,
					query: {
						AuthOauthToken: AuthOauthToken,
						origin: "fff",
						to: encodeURIComponent('/pages/look/index')
					},
					envVersion: this.$httpWX.envVersion,
					success: (res) => {},
					fail: (fail) => {
						uni.showToast({
							icon: "none",
							title: '您已取消'
						})
						uni.switchTab({
							url: "/pages/Main/main"
						})
					}
				})

4.小程序跳转H5

使用web-view标签跳转,这里先不多做介绍~~

相关推荐
码上暴富3 小时前
axios请求的取消
前端·javascript·vue.js
JefferyXZF3 小时前
Next.js 初识:从 React 到全栈开发的第一步(一)
前端·全栈·next.js
2501_915921434 小时前
移动端 WebView 视频无法播放怎么办 媒体控件错误排查与修复指南
android·ios·小程序·https·uni-app·iphone·webview
一只韩非子4 小时前
AI时代,程序员如何优雅地搞定页面设计?
前端·ai编程
新中地GIS开发老师4 小时前
2025Mapbox零基础入门教程(14)定位功能
前端·javascript·arcgis·gis·mapbox·gis开发·地理信息科学
tager5 小时前
Vue 3 组件开发中的"双脚本"困境
前端·vue.js·代码规范
烛阴5 小时前
Int / Floor
前端·webgl
excel5 小时前
使用 PWA 时,为什么你必须手动添加更新逻辑,否则会报错?
前端
Moment5 小时前
Node.js 这么多后端框架,我到底该用哪个?🫠🫠🫠
前端·后端·node.js
尚学教辅学习资料6 小时前
SpringBoot3.x入门到精通系列: 2.3 Web开发基础
前端·springboot·web开发