其他分享
首页 > 其他分享> > js 使用微信公众号jssdk的接口,扫码,选择图片,获取位置信息

js 使用微信公众号jssdk的接口,扫码,选择图片,获取位置信息

作者:互联网

最近在做一个公众号的项目,里面涉及到了扫码,选择图片,获取位置信息等等操作。既然项目最后是在公众号运行,考虑到本项目是使用的后端框架tp5.0,前端框架jquery,那么这些功能最好使用微信官方的api。

首先第一步,引入微信官方的js:

代码:

<script src="//res.wx.qq.com/open/js/jweixin-1.3.2.js" charset="utf-8"></script>

第二步,通过wx.config接口注入权限验证配置:

参数说明:

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

这里先说明,有些还没有接触过的前端小伙伴,可能会第一时间跑去百度这些参数都是在哪里,“appId,timestamp,nonceStr,signature”这些参数都是由后端返回我们的,所以直接找后端要接口就行了。全栈抛开。

jsApiList所有可填写参数说明:

功能接口认证号注册号
基础接口判断当前客户端版本是否支持指定JS接口
企业号创建企业会话
打开企业通讯录选人
分享接口获取“分享到朋友圈”按钮点击状态及设置分享内容接口
获取“分享给朋友”按钮点击状态及设置分享内容接口
获取“分享到QQ”按钮点击状态及设置分享内容接口
获取“分享到腾讯微博”按钮点击状态及设置分享内容接
图像接口本地选图或拍照接口
图片预览接口
上传图片接口
下载图片接口
音频接口开始录音接口
停止录音接口
播放音频接口
暂停播放接口
停止播放接口
上传语音接口
下载语音接口
智能接口识别音频并返回识别结果接口
设备信息获取网络状态接口
地理位置查看地理位置地图接口
获取地理位置接口
界面操作隐藏右上角菜单接口
显示右上角菜单接口
关闭当前窗口接口
批量隐藏菜单项接口
批量显示菜单项接口
隐藏所有非基本菜单项接口
显示所有被隐藏的非基本菜单项接口
微信扫一扫扫一扫接口

所有函数:

api的先后顺序不全部对应表格里面的,不挑选的话可以全部都注册进去。

代码:

//首先通过jquery的ajax,获取后端返回的数据。
$.ajax({
    type: 'GET',
    url: '/wechat/Service/getWxJs',
    data: {},
    success: function(data) {
        console.log("微信配置:",data);
        wxInit(JSON.parse(data));
    },
    error: function(err) {
        console.log("获取配置失败:",err);
    }
});
//初始化
function wxInit(data) {
    //1.微信JSSDK异常处理
    wx.error(function (e) {
        console.log('微信JSSDK异常', e);
    });

    //2.注入JSSDK配置参数,默认开启所有接口权限
    wx.config({
        debug:false,    //这里如果开启后,在微信开发者工具的公众号网页调试,每次调用api都会alert形式的弹窗返回数据
        appId:data.appId,
        timestamp:data.timestamp,
        nonceStr:data.nonceStr,
        signature:data.signature,
        jsApiList:[
            'getLocation',
            'scanQRCode',
            'chooseImage'
        ]
    });
    // 当JSSDK初始化完成后,再执行相关操作
    wx.ready(function () {
        //有些api需要一进入页面就获取,那么就必须写到该函数里面。
    });
}

第三步,注册完config,就可以直接调用api了。

注意哈,如果是页面一进入就调用的api(比如获取当前位置),那么必须写到wx.ready里面,也就是当微信那些配置处理完成之后,调用微信的api才不会报错。

扫码实例:

wx.scanQRCode({
    needResult:0, 
    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
    success: function (res) {
        console.log("扫码结果:",res);
    },
    fail: function (res) {
        // 调用失败
        if (res.errMsg.indexOf('function_not_exist') > 0 ) {
            console.log('当前版本过低,请进行升级');
        }
    },
});

获取当前位置信息:

wx.ready(function () {
        wx.getLocation({
            type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
            success(res) {
                console.log("位置信息",res);
            },
            fail: function (err) {
            },
            cancel: function (res) {
                //此处调用百度地图获取当前位置
            }
        });
    });

 

官方文档对应的位置:https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3

 

标签:function,扫码,jssdk,微信,接口,获取,data,wx
来源: https://blog.csdn.net/qq_42740797/article/details/116751730