uniapp 开发 h5 跳转微信小程序

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