# H5唤醒微信小程序 {#h5唤醒微信小程序}

# 参考资料 {#参考资料}

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

# 注意事项 {#注意事项}

1. 页面需引入微信JS SDK

2. 需判断页面打开环境

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

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

# DEMO源码 {#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(() =&gt; {
					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) =&gt; {
			if (res.code === 200 &amp;&amp; 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(() =&gt; {
					//
				})
			}
		})
	},
},

}
</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>