＜wx-open-launch-weapp＞的使用, h5页面跳转小程序

使用场景：
利用<wx-open-launch-weapp>标签，达到微信内打开的网页，点击跳转到小程序的功能。

如图：

首先，要想在微信内跳到小程序，就要集成微信提供的jssdk环境。一起来看：

基础配置：
1、要有一个公众号，然后在公众号后台配置 接口安全域名 【接口权限 - 网页服务 - 网页授权】
2、在设置接口安全域名时，记得 MP_verify_Cq8iNxpK3Omw6UqA.txt 下载这个文件放在服务器域名根目录下
3、查看官方的开放标签使用文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

4、html页面 引入js文件：

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

5、设置配置参数：
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.content.appId, // 必填，公众号的唯一标识
timestamp: res.content.timestamp, // 必填，生成签名的时间戳
nonceStr: res.content.nonceStr, // 必填，生成签名的随机串
signature: res.content.signature, // 必填，签名
jsApiList: [ “onMenuShareTimeline”,
“checkJsApi”, “scanQRCode”
], // 必填，需要使用的JS接口列表
openTagList: [‘wx-open-launch-weapp’]
});

ps ：
timestamp: res.content.timestamp, // 必填，生成签名的时间戳
nonceStr: res.content.nonceStr, // 必填，生成签名的随机串
signature: res.content.signature, // 必填，签名
这三个参数是后台去获取的，你通过后台给你的接口去获取就好。
后台文档：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

值得注意的是，timestamp 这个是秒为单位（10位数），不是13位的哦，后台需要注意了。还有后台获取参数时，注意 access_token 做好缓存和过期时间更新，appid那些不要填错。

来看一下完整的代码片段：

<div class="jumpnjfMiniProgram">
    <wx-open-launch-weapp id="launch-btn" username="gh_65..." path="complexpackage/tpage/tpage.html?cid=5555&agencyUUID=">   
    // username 是要跳转小程序的 原始id，以gh_ 开头，小程序后台可查看
    // path 是跳转小程序的路径，.html 一定要写。
    	<template>
    		<style>
    			/*.btn {*/
    			/*	height: 500px;*/
    			/*	width: 750px;*/
    			/*}*/
    			.btn{
    			height: 100%;
    			width: 100%;
    			}
    		</style>
       <img src="http://...." class="btn"/>
      </template>
    </wx-open-launch-weapp>
</div>

$(function() {
    const pageurl = window.location.href.split('#')[0];
    // console.log("url == ",pageurl);

    function hello() {
        $.ajax({
            url: "/aaa/bbb/ccc.do",  // 通过接口去后台获取那三个参数
            data: {
                url: pageurl    // url（当前网页的URL，不包含#及其后面部分），这里动态获取就行了
            },
            type: "POST",
            dataType: "json",
            success: function(res) {
                console.log("签名信息 == ",res);
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: res.content.appId, // 必填，公众号的唯一标识
                    timestamp: res.content.timestamp, // 必填，生成签名的时间戳
                    nonceStr: res.content.nonceStr, // 必填，生成签名的随机串
                    signature: res.content.signature, // 必填，签名
                    jsApiList: [
                        "onMenuShareTimeline",
                        "checkJsApi",
                        "scanQRCode"
                    ], // 必填，需要使用的JS接口列表
                    openTagList: ['wx-open-launch-weapp']
                });

                // 通过ready接口处理成功验证
                wx.ready(function() {
                    //config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
                    var btn = document.getElementById('launch-btn');
                    btn.addEventListener('launch', function(e) {
                        console.log('success');
                    });
                    btn.addEventListener('error', function(e) {
                        console.log('fail', e.detail);
                    });

                });

                // 通过error接口处理失败验证
                wx.error(function(res) {
                    console.log('res', res);
                    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                });
            }
        });


    }

    hello(); // test http request

});

肯定有人会思考，能不能不点击，页面加载直接弹出跳转呢？我尝试过，模拟用户点击等，都不行。哈哈，如果你在使用此开放标签的时候遇到了问题或者有更好的建议可以一起谈论哦。