微信公众号开发笔记5（自定义菜单跳转网页、调用微信扫一扫API）

最新推荐文章于 2023-09-24 20:26:45 发布

Em-August

最新推荐文章于 2023-09-24 20:26:45 发布

阅读量785

点赞数

分类专栏：微信公众号开发实例文章标签：笔记

本文链接：https://blog.csdn.net/MidYear/article/details/131705016

版权

微信公众号开发实例专栏收录该内容

10 篇文章 1 订阅

订阅专栏

先看官方文档了解一些基本知识。

1、接口测试平台修改菜单的URL，这个地址要和JS接口安全域名、授权回调页面域名里配置的IP一样

前端页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>跳转页面</title>
    <!-- 引入 WeUI CDN 链接 -->
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css"/>
</head>
<body>
<!-- <h3>微信扫一扫</h3> -->


<a href="./pay2.html" class="weui-btn weui-btn_default">跳转扫一扫</a>
<!-- 使用 -->
  <!-- <a href="http://sao315.com/w/api/saoyisao">
       <input type="button" value="扫一扫" class="weui-btn weui-btn_default" >
   </a>-->

</body>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>微信扫码</title>
    <!-- 引入 WeUI CDN 链接 -->
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css"/>
</head>
<body>
<!-- <h3>微信扫一扫</h3> -->
<input type="button" value="扫一扫" class="weui-btn weui-btn_default" onclick="scanQR()">


<!-- 使用 -->
  <!-- <a href="http://sao315.com/w/api/saoyisao">
       <input type="button" value="扫一扫" class="weui-btn weui-btn_default" >
   </a>-->

</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"> </script>
<script type="text/javascript" src="https://res.wx.qq.com/t/wx_fed/weui.js/res/1.2.18/weui.min.js"></script>
<script src="plugin/jquery/jquery-2.1.1.min.js"></script>
<script src="js/pay.js"></script>
</html>

/**
 * Created by Administrator on 2023/7/7.
 */



    var url= location.href.split('#')[0];//获取当前url,不能带路由
    var appId ='wxbfb0e559a8e1e5f5';
    $.ajax({
        url:"https://3cd01daf.r2.vip.cpolar.cn/wx/jsapi/wxbfb0e559a8e1e5f5/getWxJsapiSignature",
        type:"get",
        async:false,
        data:{appid:appId,url:url},
        success:function(data){

            /*配置 wx.config 参数*/
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature,// 必填，签名，见附录1
                jsApiList: ['scanQRCode','getLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });

                wx.ready(function(){
                    wx.checkJsApi({  //判断当前客户端版本是否支持指定JS接口
                        jsApiList: ["scanQRCode","getLocation"],
                        success: function (res) {// 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
                            if(res.checkResult.scanQRCode != true){
                                alert('抱歉，当前客户端版本不支持扫一扫');
                            }
                        },
                        fail: function (res) { //检测getNetworkType该功能失败时处理
                            alert('checkJsApi error');
                        }
                    }); //wx.checkJsApi结束
                    wx.getLocation({
                        type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                        success: function (res) {
                            var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                            var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                            var speed = res.speed; // 速度，以米/每秒计
                            var accuracy = res.accuracy; // 位置精度

                        }
                    });
                  /*  wx.chooseImage({
                        count: 1, // 默认9
                        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                        success: function (res) {
                            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        }
                    });*/


                }); //wx.ready结束
                wx.error(function(res){
                    alert("错误信息:"+JSON.stringify(res));
                    console.log(JSON.stringify(res))
                });


        }

})


function scanQR() {
    var ua = navigator.userAgent.toLowerCase();
    var isWeiXin =ua.indexOf('micromessenger') != -1;
    if(!isWeiXin){
        alert('请用微信打开链接，才可使用扫一扫！');
    }

    /*wx.getLocation({
        type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: function (res) {
            var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
            var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
            var speed = res.speed; // 速度，以米/每秒计
            var accuracy = res.accuracy; // 位置精度
            alert(res)
        }
    });*/


    wx.scanQRCode({
        desc: 'desc',
        needResult : 1,  // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
        scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码，默认二者都有
        success : function(res) {
            console.log("调用扫描成功",res);
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            location.href="main.html";
            //alert("扫码结果为：" + result);
        },
        error:function(res){
            console.log(res)
            if (res.errMsg.indexOf('function_not_exist') > 0) {
                alert('版本过低请升级')
            }
        }
    }); //wx.scanQRcode结束*/
}

局域网开发使用手机测试时，需要连接同一局域网下的WiFi，电脑连手机热点也可。

Em-August

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
微信公众号开发笔记5（自定义菜单跳转网页、调用微信扫一扫API）

1、接口测试平台修改菜单的URL，这个地址要和JS接口安全域名、授权回调页面域名里配置的IP一样。局域网开发使用手机测试时，需要连接同一局域网下的WiFi，电脑连手机热点也可。
复制链接

扫一扫