H5唤醒微信小程序

参考资料

1. 获取小程序scheme码 (opens new window)，适用于短信、邮件、外部网页等拉起小程序的业务场景。
2. 静态网站 H5 跳小程序 (opens new window)

注意事项

1. 页面需引入微信JS SDK

<!-- 公众号 JSSDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2. 需判断页面打开环境

   • 微信外调用服务端接口获取urlscheme进行跳转
   • 微信内引入JS SDK，使用跳转小程序开放标签wx-open-launch-weapp（注意需要使用使用<script type="text/wxtag-template"><script>包裹）

3. iOS系统可直接识别urlscheme进行跳转，安卓系统需要通过H5页面跳转到urlscheme唤醒微信小程序

DEMO源码

demo源码

<template>
	<div class="page full">
		<div v-if="isWeixin" class="full wechat-web-container">
			<p class="">点击以下按钮打开 “可映视频小程序”</p> <!-- replace -->
			<!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
			<!-- 对于path属性，所声明的页面路径必须添加.html后缀，如pages/home/index.html。 -->
			<wx-open-launch-weapp id="launch-btn" username="gh_0947807485de" path="/publish/publish.html">
				<!-- 所有开放标签都能像普通的HTML标签一样在页面中直接使用，不需要再进行额外的处理。 -->
				<!-- 如果所使用的标签允许提供插槽，由于插槽中模版的样式是和页面隔离的，因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过<template></template>进行包裹。对于Vue等视图框架，为了避免template标签冲突的问题，可使用<script type="text/wxtag-template"><script>进行代替，来包裹插槽模版和样式。 -->
				<script type="text/wxtag-template">
					<button style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">打开小程序</button>
				</script>
			</wx-open-launch-weapp>
		</div>
		<div v-else-if="isDesktop" class="full desktop-web-container">
			<p class="">请在手机打开网页链接</p>
		</div>
		<div v-else class="full public-web-container">
			<p class="">正在打开 “填入你的小程序名称”...</p>
			<a id="public-web-jump-button" href="javascript:" class="weui-btn weui-btn_primary weui-btn_loading" @click="openWeapp()">
				<span id="public-web-jump-button-loading" class="weui-primary-loading weui-primary-loading_transparent"><i class="weui-primary-loading__dot"></i></span>
				打开小程序
			</a>
		</div>
	</div>
</template>

<script>
import { getWxConfig } from '@/api/album.js'
export default {
	data() {
		return {
			isWXWork: false,
			isWeixin: false,
			isMobile: false,
			isDesktop: false,
		}
	},
	mounted() {
		const ua = navigator.userAgent.toLowerCase()
		const isWXWork = ua.indexOf('wxwork') > -1
		let isWeixin = !isWXWork && ua.indexOf('micromessenger') > -1
		let isMobile = false
		let isDesktop = false
		if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
			isMobile = true
		} else {
			isDesktop = true
		}
		this.isWXWork = isWXWork
		this.isWeixin = isWeixin
		this.isMobile = isMobile
		this.isDesktop = isDesktop
		this.$nextTick(() => {
			this.initPage()
		})
	},
	methods: {
		initPage() {
			const { isWXWork, isWeixin, isMobile, isDesktop } = this
			if (isWeixin) {
				let launchBtn = document.getElementById('launch-btn')
				launchBtn.addEventListener('ready', function (e) {
					console.log('开放标签 ready')
				})
				launchBtn.addEventListener('launch', function (e) {
					console.log('开放标签 success')
				})
				launchBtn.addEventListener('error', function (e) {
					console.log('开放标签 fail', e.detail)
				})
				this.getWxConfig()
			} else if (isDesktop) {
				// 在 pc 上则给提示引导到手机端打开
			}  else {

				let buttonEl = document.getElementById('public-web-jump-button')
				let buttonLoadingEl = document.getElementById('public-web-jump-button-loading')
				try {
					this.openWeapp(() => {
						buttonEl.classList.remove('weui-btn_loading')
						buttonLoadingEl.classList.add('hidden')
					})
				} catch (e) {
					buttonEl.classList.remove('weui-btn_loading')
					buttonLoadingEl.classList.add('hidden')
					throw e
				}
			}
		},
		openWeapp(onBeforeJump) {
			if (onBeforeJump) {
				onBeforeJump()
			}
			location.href = 'weixin://dl/business/?ticket=la0041f2cedf9630c9c7cc8c8715ac0c6'
		},
		// 获取微信配置
		getWxConfig() {
			getWxConfig({
				headers: {
					mid: 'KYYJAPP',
				},
				data: {
					data: JSON.stringify({
						url: location.origin + location.pathname + location.search,
					}),
					from: 'H5',
				},
			}).then((res) => {
				if (res.code === 200 && res.data) {
					this.wxConfig = res.data
					const { appId, timestamp, nonceStr, signature } = res.data
					wx.config({
						// debug: true, // 调试时可开启
						appId,
						timestamp,
						nonceStr,
						signature,
						jsApiList: ['chooseImage'], // 必填，随意一个接口即可
						openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
					})
					wx.ready(() => {
						//
					})
				}
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.full {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.public-web-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.public-web-container p {
	position: absolute;
	top: 40%;
}

.public-web-container a {
	position: absolute;
	bottom: 40%;
}

.wechat-web-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wechat-web-container p {
	position: absolute;
	top: 40%;
}

.wechat-web-container wx-open-launch-weapp {
	position: absolute;
	bottom: 40%;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.desktop-web-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.desktop-web-container p {
	position: absolute;
	top: 40%;
}
</style>