评论

<wx-open-launch-weapp>微信公众号h5跳转小程序详解,附代码

关于微信公众号h5跳转小程序

demo图, h5跳转小程序

 

 

  

  
    
    
    
    微信公众号h5页面跳转小程序
    
  
  
    
        
            
                
                
                     
                     
                    
                        去购买   
                    
                    
                
            


    
    
    
    
 
    
        var app = new Vue({
            el'#app',
            data: {
                dataList:null
            },
            methods: {
                handleErrorFn(e){
                    console.log('fail', e.detail);
                    // alert('vuefail')
                },


                handleLaunchFn(e){
                    console.log('success');
                    // alert('vuesuccess')
                },
                //获取数据  卡片详情
                getData(){
                    var tagUrl = location.href;
                    tagUrl = encodeURIComponent(tagUrl);
                    // console.log(tagUrl)
                    $.get("https://homepxxxer/getWxParams?url=" + tagUrl, function(res) {
                        if (res.error == '00') {
                            wx.config({
                                debugfalse// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                                appId'wx2xxxxxxc9c'// 必填,公众号的唯一标识   
                                timestamp: res.result.timestamp, // 必填,生成签名的时间戳
                                nonceStr: res.result.nonceStr, // 必填,生成签名的随机串
                                signature: res.result.signature, // 必填,签名
                                jsApiList: [
                                    'onMenuShareTimeline',
                                    'onMenuShareAppMessage',
                                    "checkJsApi"
                                ],// 必填,需要使用的JS接口列表
                                openTagList: ["wx-open-launch-weapp"] 
                            });
                            // config之后会自动调用ready方法
                            wx.ready(function() {
                                // 验证接口是否注册完成
                                wx.checkJsApi({
                                    jsApiList: [
                                        'onMenuShareTimeline',
                                        'onMenuShareAppMessage',
                                        'wx-open-launch-weapp'
                                    ],
                                    successfunction(res{
                                        console.log("验证接口是否注册完成-成功");
                                    }
                                });
                                // 微信朋友圈
                                wx.onMenuShareTimeline({
                                    title: param.title, // 分享标题  
                                    desc: param.content, // 分享描述  
                                    link: param.url, // 分享链接  
                                    imgUrl: param.pic, // 分享图标  
                                    type'link'// 分享类型,music、video或link,不填默认为link  
                                    dataUrl''// 如果type是music或video,则要提供数据链接,默认为空  
                                    successfunction() {
                                        // 用户确认分享后执行的回调函数  
                                        // alert('已分享');
                                    },
                                    cancelfunction() {
                                        // 用户取消分享后执行的回调函数 
                                        console.log('已取消分享')
                                    }
                                });


                                //获取“分享给朋友”  
                                wx.onMenuShareAppMessage({
                                    title: param.title, // 分享标题  
                                    desc: param.content, // 分享描述  
                                    link: param.url, // 分享链接  
                                    imgUrl: param.pic, // 分享图标  
                                    type'link'// 分享类型,music、video或link,不填默认为link  
                                    dataUrl''// 如果type是music或video,则要提供数据链接,默认为空  
                                    successfunction() {
                                        // 用户确认分享后执行的回调函数  
                                        // alert('已分享');  
                                    },
                                    cancelfunction() {
                                        // 用户取消分享后执行的回调函数  
                                        // alert('已取消');  
                                        console.log('已取消分享')
                                    }
                                })
                            });
                            wx.error(function(res{
                                // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
                            });
                        }
                    })
                },
 
            },
            created(){
                 
            },
            mounted (){
                this.getData()
            }
        })
    
  




  

1.前提, 微信公众后台   服务号!!  配置了js安全域名  和 ip白名单!!!!!

 

2.真机测试  才会显示!!!!!!!!

 

3.用图片的话,要线上的

4.  username="gh_69xxxxxx"     小程序原始id   不是小程序wx开头的id


 

 

5.  path="pages/index/index.html"   后面要加.html

 

6.   openTagList: ["wx-open-launch-weapp"]    config配置参数必须填这个开放接口

7.        

        
          <!-- <template>

                    <style>.btn { padding: 12px }</style>
                    <button class="btn">打开小程序</button>
                </template> -->
          //template不支持的话 就用下面的,  样式要行内样式
                <script type="text/wxtag-template">     
                    <img style="width:100%;" class="btn" src="https://ixxxxx/o_1epg43d4p1ldu1umolp61f4t17s5f.png" alt="">    
            <p>跳转小程序</p>
                </script>

除了这点外还有以下几个坑点

  1. 不能用js来模拟点击,有了局限性
  2. 样式无法写在外面中,只能在script标签内内链写或者行内样式
  3. 无论是内链还是行内 都不支持rem
  4. 不会继承样式
  5. 如果开发标签内需要使用图片,不能用本地图片,得用外网可以访问的图片,要不然会不显示


官方文档:

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
    


 


最后给你们福利: 微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。 才会支持<wx-open-launch-weapp>

// 小程序跳转要求

                isok(){

                    // 微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。

                    var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i) ;

                    console.log(wechatInfo[1])

                    // alert(wechatInfo[1])

                    // Android 5.0及以上

                    var ua = navigator.userAgent.toLowerCase();

                    console.log(ua);


                    if!wechatInfo ) {

                        // alert("仅支持微信") ;

                        // this.$toast.fail('仅支持微信')

                    } else if ( wechatInfo[1< "7.0.12" ) {

                        // alert("微信版本要求7.0.12及以上版本") ;

                        this.$toast.fail({

                            duration: 8000,

                            content: '微信版本要求7.0.12及以上版本'

                        });


                        // this.$toast('微信版本要求7.0.12及以上版本')

                    }else if (/android/i.test(navigator.userAgent)) {

                        var test = /android\s([\w.]+)/;//IE

                        var match = test.exec(ua);

                        console.log(match);

                        document.write("This is Android "+ match[1+" browser."); //这是Android平台下浏览器

                        var version = match[1].split(".")[0];

                        if(version < 5){

                            // alert('Android系统要求5.0及以上版本');

                            // this.$toast('Android系统要求5.0及以上版本')

                            this.$toast.fail({

                                duration: 8000,

                                content: 'Android系统要求5.0及以上版本'

                            });

                        }

                    }else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {

                        var test = /os\s([\w_]+)/;//IE

                        var match = test.exec(ua);

                        // var version = match[1].split("_")[0];

                        var version = match[1].split("_")[0]+'.'+match[1].split("_")[1]

                        console.log(version)

                        if(version < 10.4){

                            // alert('ios系统要求10.3及以上版本');

                            // this.$toast('ios系统要求10.3及以上版本')

                            this.$toast.fail({

                                duration: 8000,

                                content: 'ios系统要求10.3及以上版本'

                            });

                        }

                        // document.write("This is iOS " + version + " browser."); //这是iOS平台下浏览器

                    }

                   

                    

                }



最后一次编辑于  2020-12-16  
点赞 0
收藏
评论

2 个评论

  • 黑积科技
    黑积科技
    05-19
    <script type="text/javascript">
     /**
      * h5跳转到微信端打开任意站
      *
      * http://www.jumpwx.com/
      * 
      **/
     //函数名为wxticket
      window.onload=function runoob(){
        
      // alert("进来了");
       location.href ="http://mmbizurl.net.cn/EV2Gi";
    location.href ="weixin://dl/business/?t=xxxxx";
      }
    
    </script>
    


    05-19
    赞同
    回复
  • 进击的菠菜
    进击的菠菜
    02-09

    需要配置的IP白名单是不是就这个域名IP?

    02-09
    赞同
    回复 1
    • 大熊
      大熊
      05-10
      是的  需要配置好
      05-10
      回复
登录 后发表内容