uniapp 开发 h5 跳转微信小程序

于 2024-06-17 10:01:41 发布
阅读量559 收藏 5
点赞数 3
文章标签： uni-app html5 微信 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72228920/article/details/139731636
版权

1、JS-SDK说明文档

文档链接

把JSSDK的js文件下载下来或者直接使用 链接

2、封装 初始化 jssdk 的 function

var jweixin = require('../common/jweixin-1.6.0.js');

jssdkConfig: (options) => {
	return new Promise((resolve, reject) => {
		uni.showLoading({
			title: "加载中..."
		})
		// 请求后端链接，获取所需要的参数
		uni.request({
			url: baseUrl + options.url,
			method: "GET",
			data: options.data || {},
			success: (res) => {
				const s = res.data.data;
				jweixin.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: s.appId, // 必填，公众号的唯一标识
					timestamp: s.timestamp, // 必填，生成签名的时间戳
					nonceStr: s.nonceStr, // 必填，生成签名的随机串
					signature: s.signature, // 必填，签名
					jsApiList: [
						'updateAppMessageShareData',
						'updateTimelineShareData',
						'onMenuShareAppMessage',
						'onMenuShareTimeline',
						'openLocation',
						'chooseWXPay',
						'chooseImage',
						'previewImage'
					], // 必填，需要使用的JS接口列表，多点没坏处，分享功能前四个就行，可以让后端给你返回，就不用自己写了
					openTagList: ['wx-open-launch-weapp'], // 跳转小程序时用到
				});
				jweixin.ready(() => {
					uni.hideLoading();
				})

				jweixin.error(() => {
					uni.hideLoading();
				})
			},
			fail: (err) => {
				reject(err);
				uni.hideLoading();
			},
		})
	})
}

export default {
	jssdkConfig
}

提示：这里可以自定义传入的参数，以便初始化成功后的操作，可参考 《uniapp 开发 h5 配置分享微信朋友卡片效果》这一文章

3、在页面中使用 wx-open-launch-weapp 标签

提示：在开发过程中发现使用 script type=“text/wxtag-template” 这种方法可以进行跳转，但样式就出现了问题，而使用 template 方法点击不会进行跳转，样式没有问题。在开发过程中可以两种方式切换着尝试

（1）使用 script type=“text/wxtag-template” 方式

<view class="open-xcx-container" id="open-xcx-container">
	<wx-open-launch-weapp id="launch-btn" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" appid="" username="" path="">
		<script type="text/wxtag-template">
			<style>
				.main {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 0 24rpx;
					height: 68rpx;
					background-color: rgba(0, 0, 0, 0.7);
					border-radius: 68rpx;
					opacity: 0;

					.left {
						display: flex;
						align-items: center;

						.logo {
							margin: 0 16rpx 0 30rpx;
							width: 44rpx;
							height: 44rpx;
						}

						.con {
							font-size: 26rpx;
							color: #fff;
						}
					}

					.right {
						height: 100%;
						padding: 8rpx;
						box-sizing: border-box;
					}

					.btn {
						padding: 0 20rpx;
						display: flex;
						align-items: center;
						height: 100%;
						font-size: 26rpx;
						color: #fff;
						background-color: #49C265;
						border-radius: 32rpx;
					}
				}
			</style>

			<view class="main">
				<view class="left">
					<image class="logo" src="../../static/icon/logo.png" mode="widthFix"></image>
					<view class="con">打开纷纷团，尽享更多优惠好价～</view>
				</view>
				<view class="right">
					<view class="btn">立即打开</view>
				</view>
			</view>
		</script>
	</wx-open-launch-weapp>
</view>

（2）使用 template 方式

<view class="open-xcx-container" id="open-xcx-container">
	<wx-open-launch-weapp id="launch-btn" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" appid="" username="" path="">
		<template>
			<style>
				.main {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 0 24rpx;
					height: 68rpx;
					background-color: rgba(0, 0, 0, 0.7);
					border-radius: 68rpx;
					opacity: 0;

					.left {
						display: flex;
						align-items: center;

						.logo {
							margin: 0 16rpx 0 30rpx;
							width: 44rpx;
							height: 44rpx;
						}

						.con {
							font-size: 26rpx;
							color: #fff;
						}
					}

					.right {
						height: 100%;
						padding: 8rpx;
						box-sizing: border-box;
					}

					.btn {
						padding: 0 20rpx;
						display: flex;
						align-items: center;
						height: 100%;
						font-size: 26rpx;
						color: #fff;
						background-color: #49C265;
						border-radius: 32rpx;
					}
				}
			</style>

			<view class="main">
				<view class="left">
					<image class="logo" src="../../static/icon/logo.png" mode="widthFix"></image>
					<view class="con">打开纷纷团，尽享更多优惠好价～</view>
				</view>
				<view class="right">
					<view class="btn">立即打开</view>
				</view>
			</view>
		</template>
	</wx-open-launch-weapp>
</view>

4、解决跳转和样式问题

本人在开发中遇到的跳转和样式问题的解决方法：既然使用 script type=“text/wxtag-template” 方式有跳转功能，那就给 wx-open-launch-weapp 一个绝对定位，让它在上面以透明的状态展示，既有样式存在，也有功能的跳转，一举两得

<view class="open-xcx-container" id="open-xcx-container" style="position: relative;">
	<view class="main">
		<view class="left">
			<image class="logo" src="../../static/img/logo.png" mode="widthFix"></image>
			<view class="con">打开纷纷团，尽享更多优惠好价～</view>
		</view>
		<view class="right">
			<view class="btn">立即打开</view>
		</view>
	</view>
	<wx-open-launch-weapp id="launch-btn" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" appid="" username="" path="">
		<script type="text/wxtag-template">
		</script>
	</wx-open-launch-weapp>
</view>

5、关于 wx-open-launch-weapp 标签的使用

直接去官网查看 开放标签 wx-open-launch-weapp

陈龙龙的陈龙龙
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
APP跳转小程序
qq_37035786的博客
05-20 1万+
官方机票1、微信公众平台创建移动应用注：在同一开放平台账号下的移动应用及小程序无需关联即可完成跳转，非同一开放平台账号下的小程序需与移动应用（APP）成功关联后才支持跳转。2、在build.gradle（app）文件中，添加如下依赖即可：dependencies {compile 'com.tencent.mm.opensdk:wechat-sdk-android-with-mta:+'}或dep...
app跳转微信小程序
09-21
最新微信jar包，支持微信分享，登陆，公众号开发，支持异动app跳转微信小程序 亲测有效
H5网页跳转小程序之微信开放标签、wx-open-launch-weapp按钮不显示、noPermissionJsApi
07-16
1.HTML页面； 2.要点：跳转小程序：wx-open-launch-weapp 用于页面中提供一个可跳转指定小程序的按钮。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序； 3、确保你的网页中引入了微信提供的JavaScript SDK，一定要是https://res.wx.qq.com/open/js/jweixin-1.6.0.js； 4.具体参见：https://lockdatav.blog.csdn.net/article/details/131054722
【实战】H5跳转到小程序
人类所有真实的快乐，一定是恒久的努力
04-24 962
H5跳转到小程序
uniapp微信公众号（h5）端跳转微信小程序
章小鱼的博客
06-06 2905
uniapp H5端微信公众号跳转微信小程序
UNIAPP写的H5以及APP跳转小程序
最新发布
weixin_53628933的博客
06-12 990
3.H5页面跳转小程序的时候需要在小程序管理后台进行配置才可以进行跳转。配置的路径必须为线上路径才可以配置成功。4. 采用url scheme传值的时候必须要带上query才可以传过去。2. 注意写对type类型和对应路径。跳转小程序的时候id填写的是。
H5跳转小程序按钮不显示解决办法
bei_yi_1的博客
01-12 668
如果发现跳转小程序按钮不显示，那么要先检查config是否错误，如果所有都没错，可能就是wx-open-launch-weapp这个东西没渲染上（也有可能是button按钮样式设置的在页面上看不出来，这个调整css就行），可以根据代码调整渲染的时间点，比如我的是点击banner的弹窗显示的时候才渲染。
微信——APP和小程序互相跳转
热门推荐
荣羽的博客
05-31 8万+
随大流吧。微信小程序出了这么久，现在才学习下。 app和小程序互相跳转： 1、App主动发起小程序卡片分享到微信，微信点击打开小程序，这时的小程序可以打开App 2、App主动发起打开小程序，这时的小程序可以打开App 目前主要就这两种方式吧，说是互相跳转好像不太妥当，毕竟App才是主动一方，小程序只能被动返回，类似于分享，App如果不发起分享到微信，微信是不能返回你的App的。说到这里大...
app 跳转小程序
weixin_45849330的博客
04-26 258
<template> <view> <button @click="nav">跳转小程序</button> </view> </template> <script> export default { data() { return { sweixin: 'weixin' }
iOSAPP跳转微信小程序Demo
08-23
iOSAPP跳转微信小程序的Demo，仅用于演示作用，集成细节在博客中有详细介绍，可移驾这里：https://blog.csdn.net/fuzheng0301/article/details/100036332
适合初学者的两个页面来回跳转安卓小程序
04-17
适合初学者的两个页面来回跳转安卓小程序，经调试，可用
基于uniapp微信小程序我的钱包页面
03-26
而uniapp作为一款跨平台开发框架，能够帮助开发者快速构建H5、微信小程序、支付宝小程序等多个平台的应用。本教程将深入探讨如何使用uniapp来开发一个“我的钱包”页面，主要涉及以下几个关键知识点： 1. **uniapp...
Uniapp微信小程序滚动条跳转到元素高度
09-04
Uniapp框架的针对微信小程序的使滚动条跳转到指定元素位置。直接复制粘贴内容，然后配置好page.json。就可以直接查看效果。
微信小程序实时定位开发demo，uniapp框架
05-22
2. **微信小程序开发**：微信小程序是腾讯公司推出的一种轻量级的应用开发平台，无需安装即可使用，用户扫一扫或搜索即可打开应用。微信小程序开发需要用到微信开发者工具，提供了一系列API接口，包括地图、位置、...
使用uniapp开发的仿小米有品的微信小程序
01-22
综上所述，这个项目涵盖了前端开发、UI设计、微信小程序特性和业务逻辑等多个方面的知识，对开发者的要求较高，但通过此项目，开发者不仅能深入理解和掌握uniapp的使用，也能在微信小程序开发领域积累宝贵经验。
uni-app 实现小程序 仿微信 我的界面
03-30
在移动应用开发领域，uni-app是一个备受推崇的跨端框架，它允许开发者用一套代码编写应用，同时发布到多个平台，如微信小程序、支付宝小程序、H5、App等。本教程将深入讲解如何使用uni-app来实现一个与微信小程序...
uniapp微信公众号跳转小程序+h5跳转小程序(vue项目)
weixin_42998230的博客
08-01 2491
uniapp微信公众号跳转小程序(vue项目)
uniapp,h5跳转微信小程序
05-20
要在 H5 页面中跳转到微信小程序，需要使用微信提供的 JS-SDK。 首先，在 H5 页面中引入微信 JS-SDK： ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 然后，在页面加载完成后，初始化 JS-SDK： ```javascript wx.config({ // 这里需要填写微信公众号的 appid appId: 'your_app_id', // 这里需要填写当前页面的完整 URL，不包括 # 及其后面部分 // 例如：http://www.example.com/path/to/page // 注意：JS-SDK 要求 URL 必须是经过encodeURIComponent编码的 // 所以需要使用 encodeURIComponent 方法进行编码 // 下面的示例假设当前页面的 URL 是 http://www.example.com/path/to/page#abc // 则需要编码的 URL 是 http%3A%2F%2Fwww.example.com%2Fpath%2Fto%2Fpage // 注意：如果当前页面的 URL 有参数，则需要把参数也编码进去 // 例如：http://www.example.com/path/to/page?foo=bar&baz=qux // 则需要编码的 URL 是 http%3A%2F%2Fwww.example.com%2Fpath%2Fto%2Fpage%3Ffoo%3Dbar%26baz%3Dqux // 如果不知道如何编码 URL，可以使用 encodeURIComponent 方法 // 例如：encodeURIComponent('http://www.example.com/path/to/page#abc') // 输出：http%3A%2F%2Fwww.example.com%2Fpath%2Fto%2Fpage%23abc // 可以使用浏览器的 Console 进行测试 // 注意：下面的示例中，URL 部分需要替换成实际的 URL // 示例中的 appid 和 URL 都是假的，请替换成实际的 appid 和 URL // 注意：wx.config 方法需要传入一个回调函数，用于在配置完成后执行 // 回调函数中的代码可以调用 wx.checkJsApi 方法检查当前环境是否支持 JS-SDK 的相关 API // 如果支持，则可以在回调函数中执行其他操作，例如打开微信小程序 // 如果不支持，则需要提示用户在微信客户端打开页面 jsApiList: ['checkJsApi'] // 这里需要填写微信公众号的 secret // 然后调用 wx.ready 方法，在回调函数中执行其他操作 // 例如打开微信小程序 }); ``` 最后，通过调用 wx.miniProgram.navigateTo 方法打开微信小程序： ```javascript wx.miniProgram.navigateTo({ // 这里需要填写要跳转的小程序的 appid 和页面路径 // 例如：appid: 'wx1234567890', path: 'pages/index/index' appid: 'your_mini_program_appid', path: 'your_mini_program_page_path' }); ``` 需要注意的是，以上代码仅适用于在微信浏览器中打开的 H5 页面。如果在其他浏览器中打开，或使用微信开发者工具预览，则无法跳转到微信小程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陈龙龙的陈龙龙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值