当前位置:首页 > 技术 > 微信开发 > 实现H5跳转小程序

实现H5跳转小程序

DChen1个月前 (05-21)微信开发3160

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

一、应用场景:

  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的啦,哈哈

三、代码

H5跳转小程序代码密码:35bq|大小:2KB
已经过安全软件检测无毒,请您放心下载。


取消

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

扫码支持
扫码打赏,你说多少就多少

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

版权声明:本文由“憨小猪”发布,如需转载请注明出处。

本文链接:https://www.phper.red/post/158.html

返回列表

上一篇:二维码扫码登录原理(转载)

没有最新的文章了...

相关文章

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。