h5跳转小程序

官方文档

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>