实现H5跳转小程序

记录贴（注释稍微累赘），最近刚好手头上有个项目有类似的需要。废话不多说，下面介绍一下应用场景

一、应用场景：

1. 公众号跳转小程序

2. 小程序webview跳转小程序

第一种：公众号跳转小程序其实就是简单的采用“wx-open-launch-weapp”开放标签就可以实现了，具体可以查看“公众号开放标签”，注意：该种方式如果是嵌套在小程序webview内的话是不起作用的。

第二种则是采用小程序自带的webview的功能，可直接在H5页面上执行小程序的“navigateTo”等api进行跳转处理，具体可前往查看“小程序webview”，该种方式也是有限制的，就是仅仅允许本小程序内部页面跳转（实际上就是只能多本小程序进行操作）。

上面的两种方式根据自己的业务需求选择就行了。下面直接贴代码了

二、实现方式：（代码只贴了部分，同时实现上面提到两种方式，完整代码下方下载即可）

html代码：

<div class="weui-msg">
    <div class="weui-msg__text-area">
        <h2 class="weui-msg__title">订单已生成</h2>
        <p class="weui-msg__desc">请点击下方按钮完成支付</p>
        <p class="weui-msg__desc-primary">如您不在【xxx】微信小程序内，请使用微信扫描下方二维码完成支付：</p>
        <!--这里可以按需要放置一个打开小程序的二维码，做保底处理-->
        <!--<p class="weui-msg__desc-primary"><img src="" alt="qrcode"></p>-->
    </div>
    <div class="weui-msg__opr-area">
        <p class="weui-btn-area">
            <!--这个按钮主要是用于做第二种场景的，即webview跳转小程序-->
            <button type="button" class="weui-btn weui-btn_primary" id="pay" disabled="">完成支付</button>
            <!--这个按钮主要是用于做第一种场景的，即公众号跳转小程序；其中username为小程序的原始ID-->
            <button type="button" class="weui-btn weui-btn_primary" id="wxapp-pay">
                <wx-open-launch-weapp id="wxapp-pay" username="gh_xxxx" env-version="develop" path="/pages/pay/pay?order_id=123">
                    <script type="text/wxTAG-template">
                        <style>span.wx-open{font-size:17px;font-weight:700;color:#FFF}</style>
                        <span class="wx-open">完成支付</span>
                    </script>
                </wx-open-launch-weapp>
            </button>
            <!--这个按钮可以有无，自行决定-->
            <button type="button" class="weui-btn weui-btn_default" id="back" disabled="">后退</button>
        </p>
    </div>
</div>

js代码：

/*引入微信js库*/
<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
    /*配置微信jssdk，其中jsApiList、openTagList是必须配置，用于第一种场景（公众号跳转小程序）*/
    wx.config({
        "debug":false,
        "appId":"公众号appid",
        "timestamp":"时间戳",
        "nonceStr":"随机数",
        "signature":"签名",
        "jsApiList":["miniProgram"],
        "openTagList":["wx-open-launch-weapp"]
    });
</script>
<script>
    /*这个链接地址是针对第二种场景的（webview跳转小程序，第一种场景跳转路径是HTML代码中的“path”）*/
    const MINI_URL="/pages/pay/pay?order_id=123";
    wx.ready(function(){
        /*webview中获取当前环境，然后下面的disabled那些是处理上面不同场景按钮的隐藏显示的*/
        wx.miniProgram.getEnv(function(res){
            if(res.miniprogram){
                $('#pay').prop("disabled",false);
                $('#wxapp-pay').prop("disabled",true);
            }else{
                $('#pay').prop("disabled",true);
                $('#wxapp-pay').prop("disabled",false);
            }
        });
        
        try{
            /*webview环境下直接跳转过去*/
            wx.miniProgram.navigateTo({
                "url":MINI_URL
            });
        }catch(e){
        }
    });
    $(function(){
        /*这里是webview环境下自行点击去跳转的（算是保底作用）*/
        $('#pay').on("click",function(){
            try{
                wx.miniProgram.navigateTo({
                    "url":MINI_URL,
                    "fail":function(res){
                        $('#pay').prop("disabled",true);
                        $('#back').prop("disabled",false);
                    }
                });
            }catch(e){
                $('#pay').prop("disabled",true);
                $('#back').prop("disabled",false);
            }
        });
    });
</script>
<script src="http://127.0.0.1:13455/__webdebugger__/wxtags.js"></script>

后端代码自行贴哈，就是获取公众号的jssdk的配置而已，相信大家都ok的啦，哈哈

三、代码

喜欢 (1) 打赏 分享

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦