官方文档
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index.html?user=123&action=abc"
>
<template>
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</template>
</wx-open-launch-weapp>
<script>
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
</script>
实践
引入JS
<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
生成JSAPI
wx.config({
"appId":"你懂得",
"nonceStr":"fbjnehiswxmupfatefn3eptk04fasapo",
"timestamp":1597629992,
"signature":"43cc187e8103717f98daefbb0825f90abd628c87",
"jsApiList":[
"onMenuShareTimeline",
"onMenuShareAppMessage",
"chooseImage",
"previewImage",
"uploadImage",
"chooseWXPay",
"hideAllNonBaseMenuItem"
],
"openTagList":[
"wx-open-launch-weapp"
]
});
HTML片段
<div class="search">
<div class="input-box"><i class="search-btn"></i>搜索精选好货</div>
<wx-open-launch-weapp username="" path="pages/index/index.html">
<template>
<style>
.weappArea{
width: 100%;
height: 100%;
color: transparent;
opacity: 0;
font-size: 100px;
}
</style>
<div class="weappArea">跳转小程序</div>
</template>
</wx-open-launch-weapp>
</div>
</div>
爬坑
1. JSAPI中,在openTagList开放标签中有以下两个属性,开发的项目是h5跳转小程序 ,所以要用 wx-open-launch-weapp
,当时没注意,写成了 wx-open-launch-app
,导致页面中渲染不出来。
小程序跳转按钮:
<wx-open-launch-weapp>
App跳转按钮:<wx-open-launch-app>
2. 开发项目是一个H5商品的推广页面,点击某个商品跳到小程序的某个商品下,加上wx-open-launch-weapp
标签后,原本已写好的html及样式包括图片大小,官方给的文档是说在template 下写内联样式要定义局部,那对于我们这已写的html改动太大也不好调整,所以采用以下方式:
在template下定义一个标签覆盖到原DIV上,使它透明看不到,其实跳转点击还是 weappArea
标签
<template>
<style>
.weappArea{
width: 100%;
height: 100%;
color: transparent;
opacity: 0;
font-size: 100px;
}
</style>
<div class="weappArea">跳转小程序,跳转小程序</div>
</template>
3. 点击跳转标签后发现跳转到小程序后找不到页面,原因出现在了 path属性的路径上,因为习惯了小程序页面的路径光溜溜的,所以特意没写 .html
结果导致无法识别找不到页面,
错误的
<wx-open-launch-weapp username="" path="/pages/index/index?id=1&gid=1"></wx-open-launch-weapp>
正确的
<wx-open-launch-weapp username="" path="/pages/index/index.html?id=1&gid=1"></wx-open-launch-weapp>