h5跳转微信小程序

场景介绍/业务介绍

点击短信、H5、PC页面上的按钮，可以拉起微信小程序。

微信官方文档介绍

H5页面代码

<template>
	<view class="container-main">
		<view class="view-login-home">
			<view class="btn-bg" @click="onPageClick">
				确认跳转
			</view>
		</view>
	</view>
</template>

<script>
	import {
		configApi
	} from '../../common/js/configApi.js'; // 公共配置

	export default {
		data() {
			return {
				codeH: '', // 携带参数
				wxUrl:'', // 微信跳转链接
			}
		},
		components: {

		},
		methods: {
			// 点击按钮，打开微信小程序
			onPageClick() {
				console.log(this.wxUrl,this.codeH);
				window.open(this.wxUrl)
			},
			// 请求接口，获取微信短连接
			async getURLScheme() {
				// 默认值"release"。要打开的小程序版本。正式版为"release"，体验版为"trial"，开发版为"develop"，仅在微信外打开时生效。
				 var vparma = {
					 'jumpWxa':
					    {
					        'path': "/pages/home/index",
					        'query': 'pageType=H5&code=' + this.codeH,
					        'envVersion': configApi.ENV_version
					    }
				 }  // 接口入参
				let res = await this.$store.dispatch('getURLScheme', vparma); // 接口请求
				if (res.code == 200 && res.success) {
					let result = res.data;
					this.wxUrl = result.openLink;
				}
			},
			onShow() {
				// 获取小程序URL
				this.getURLScheme();
			},

			onLoad(e) {
				this.codeH = window.location.pathname.replace('/member/', '');  // 获取当前页面链接/member/后的数据作为小程序参数

			}
		},
	}
</script>

<style lang="scss">
	@import '@/common/css/common';
	@import '@/common/css/iconfont';

	.container-main {
		height: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		align-items: flex-start;
		background-color: $uni-bg-color;


		.view-login-home {
			display: flex;
			position: absolute;
			left: 0;
			top: 45%;
			width: 100%;
			height: calc(100vh - 802px);
			flex-direction: column;

			.btn-bg {
				background-color: $mainColor;
				color: $titleColor;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 100rpx;
				border-radius: 50rpx;
				margin: 30rpx;
				font-weight: 500;
				font-size: 32rpx;


			}
		}

	}
</style>

小程序代码

1、可以在小程序启动方法里面接收参数

onLaunch(options: any) {
	console.log('=========app.ts===========',options);
	var vitem = options.query
	if(vitem.pageType == 'H5'){
	  // vitem.code
	}
 },

小程序打印结果

2、可以在H5指定得页面接收数据

  onLoad(option:any) {
    console.log('=========home.ts===========',option);
    var vitem = option
    if(vitem.pageType == 'H5'){
    
    }
  },

小程序打印结果

注意 ：小程序两个地方得取值层级不一样。小程序启动方法多了query。指定页面方法则没有这一层。