h5网页跳到小程序--jssdk

最新推荐文章于 2024-06-18 17:23:03 发布

licuicui5201

最新推荐文章于 2024-06-18 17:23:03 发布

阅读量1.6k

点赞数 1

分类专栏： vue 小程序前端文章标签： vue ajax 小程序前端

本文链接：https://blog.csdn.net/licuicui5201/article/details/112213046

版权

前端同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

小程序

3 篇文章 0 订阅

订阅专栏

微信h5跳小程序

参考资料

http://caibaojian.com/wxwiki/0030551f015f01ecaa56d20b88ee3c6cb32503bf.html#.E6.AD.A5.E9.AA.A4.E4.B8.80.EF.BC.9A.E7.BB.91.E5.AE.9A.E5.9F.9F.E5.90.8D

dom

username小程序的原始ID
在这里插入图片描述

            <wx-open-launch-weapp
                id="launch-btn"
                username="gh_xxx"//小程序的原始ID
                path="pages/wait/wait.html?scene=xxx"// 所需跳转的小程序内页面路径及参数
                @launch="handleLaunchFn"
                @error="handleErrorFn"
               >
                <script type="text/wxtag-template">
                    <style>

                    </style>
                    <button class="ant-btn ant-btn-red">跳转小程序</button>
                </script>
            </wx-open-launch-weapp>

var vm = new Vue({
    el:'#test',
    watch:{

    },
    data:function(){
        return {
            corp_id:'',//企业id
        }
    },
    methods:{
        //支持h5跳转小程序的微信版本号
        is_version(){
          let client = false; // 当前版本号是否支持 (默认不支持)
          let wxInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i); // 微信浏览器信息
          // 微信版本号 wxInfo[1] = "7.0.18.1740" (示例)
          //进行split转成数组进行判断 [7,0,18,1740] (示例)
          let version = wxInfo[1].split(".");
          // 判断版本在7.0.12及以上的版本
          if (version[0] >= 7) {
            if (version[1] >= 0) {
              if (version[2] >= 12) {
                client = true; // 当前版本支持
              }
            }
          }
          return client;
        },
        //从服务端接口获取config所需要的参数
        wxjsdk:function(token){
            var that=this;
            var api_url=basic_api_url+'/base/mp/js_sign/';
            var ua= window.navigator.userAgent.toLowerCase();
            var localUrl = window.location.href;
            var data={url:localUrl,corp_id:this.corp_id}
            $.ajax({
                url: api_url,
                type: "POST",
                async:true,
                data:data,
                dataType: "JSON",
                success: function (res) {
                    if(res.state == 0){
                        that.config(res.data);
                    }
                },
                error:function(e){
                    console.warn(e);
                }
            })
        },
        //config接口注入权限验证配置
        config:function(jsdk){
            var that=this;
            wx.config({
                beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: jsdk.appId, // 必填，企业微信的corpID
                timestamp:jsdk.timestamp, // 必填，生成签名的时间戳
                nonceStr:jsdk.nonceStr, // 必填，生成签名的随机串
                signature:jsdk.signature,// 必填，签名，见附录1
                jsApiList: [
                    'startRecord',
                    'stopRecord',
                    'onVoiceRecordEnd',
                    'playVoice',
                    'pauseVoice',
                    'stopVoice',
                    'onVoicePlayEnd',
                    'translateVoice'
                ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                openTagList:['wx-open-launch-weapp']
            });
            wx.ready(function () {
                wx.checkJsApi({
                    jsApiList: [
                        'startRecord',
                        'stopRecord',
                        'onVoiceRecordEnd',
                        'playVoice',
                        'pauseVoice',
                        'stopVoice',
                        'onVoicePlayEnd',
                        'translateVoice'
                    ],
                    success: function (res) {
                        if (res.checkResult.getLocation == false) {
                            alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                            return;
                        }else{

                        }
                    }
                });
            });
            wx.error(function(res){
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                //alert("验证失败，请重试！");
                //wx.closeWindow();
            });
        },
        handleLaunchFn (e) {
          console.log('handleLaunchFn')
        },
        handleErrorFn(e){
          console.log('fail', e.detail);
        }
    },
    created:function(){
        this.wxjsdk();  
    },
});

企业微信h5跳小程序

参考资料

https://work.weixin.qq.com/api/doc/90000/90136/90514
https://work.weixin.qq.com/api/doc/90000/90136/90515

dom

<div style="width: 300px;height: 60px;" @click="goMin">
    跳转小程序
</div>

var vm = new Vue({
    el:'#test',
    watch:{

    },
    data:function(){
        return {
            corp_id:'',//企业id
        }
    },
    methods:{
        //跳转函数
        goMin:function(argument) {
            wx.invoke('launchMiniprogram', {
                    "appid" : "xxx", // 需跳转的小程序appid
                    "path" : "pages/wait/wait.html?scene=xxx", // 所需跳转的小程序内页面路径及参数。非必填
                }, function(res) {
                    console.log(res);
                    if(res.err_msg == "launchMiniprogram:ok") {
                        // 正常
                    } else {
                        // 错误处理
                    }
                }
            );
        },
        //从服务端接口获取config所需要的参数
        wxjsdk:function(token){
            var that=this;
            var api_url=basic_api_url+'/base/work/js_sign/';
            var localUrl = window.location.href;
            var data={url:localUrl,corp_id:this.corp_id}
            $.ajax({
                url: api_url,
                type: "POST",
                async:true,
                data:data,
                dataType: "JSON",
                success: function (res) {
                    if(res.state == 0){
                        that.config(res.data);
                    }
                },
                error:function(e){
                    console.warn(e);
                }
            })
        },
        //config接口注入权限验证配置
        config:function(jsdk){
            var that=this;
            wx.config({
                beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: jsdk.appId, // 必填，企业微信的corpID
                timestamp:jsdk.timestamp, // 必填，生成签名的时间戳
                nonceStr:jsdk.nonceStr, // 必填，生成签名的随机串
                signature:jsdk.signature,// 必填，签名，见附录1
                jsApiList: [
                    'startRecord',
                    'agentConfig'
                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            wx.ready(function () {
                that.qwxjsdk();
            });
            wx.error(function(res){
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                //alert("验证失败，请重试！");
                //wx.closeWindow();
            });
        },
        //从服务端接口获取agentConfig需要参数信息
        qwxjsdk:function(token){
            var that=this;
            var api_url=basic_api_url+'/base/work/app_js_sign/';
            var localUrl = window.location.href;
            var data={url:localUrl,corp_id:this.corp_id}
            $.ajax({
                url: api_url,
                type: "POST",
                async:true,
                data:data,
                dataType: "JSON",
                success: function (res) {
                    if(res.state == 0){
                        that.agentConfig(res.data);
                    }
                },
                error:function(e){
                    console.warn(e);
                }
            })
        },
        //通过agentConfig注入应用的权限
        agentConfig:function(jsdk){
            wx.agentConfig({
                corpid: jsdk.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
                agentid: jsdk.agentid, // 必填，企业微信的应用id （e.g. 1000247）
                timestamp: jsdk.timestamp, // 必填，生成签名的时间戳
                nonceStr: jsdk.nonceStr, // 必填，生成签名的随机串
                signature: jsdk.signature,// 必填，签名，见附录-JS-SDK使用权限签名算法
                jsApiList: ['selectExternalContact','launchMiniprogram'], //必填
                success: function(res) {
                    // 回调
                    console.log('success',res);
                },
                fail: function(res) {
                    console.log(res);
                    if(res.errMsg.indexOf('function not exist') > -1){
                        alert('版本过低请升级')
                    }
                }
            });
        },
    },
    created:function(){
        this.wxjsdk();
    },
});

licuicui5201

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
h5网页跳到小程序--jssdk

微信h5跳小程序参考资料http://caibaojian.com/wxwiki/0030551f015f01ecaa56d20b88ee3c6cb32503bf.html#.E6.AD.A5.E9.AA.A4.E4.B8.80.EF.BC.9A.E7.BB.91.E5.AE.9A.E5.9F.9F.E5.90.8Ddomusername小程序的原始ID <wx-open-launch-weapp id="launch-btn"
复制链接

扫一扫

专栏目录