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所有可填写参数说明：

所有函数：

• openEnterpriseChat
• openEnterpriseContact
• onMenuShareTimeline
• onMenuShareAppMessage
• onMenuShareQQ
• onMenuShareWeibo
• onMenuShareQZone
• startRecord
• stopRecord
• onVoiceRecordEnd
• playVoice
• pauseVoice
• stopVoice
• onVoicePlayEnd
• uploadVoice
• downloadVoice
• chooseImage
• previewImage
• uploadImage
• downloadImage
• translateVoice
• getNetworkType
• openLocation
• getLocation
• hideOptionMenu
• showOptionMenu
• hideMenuItems
• showMenuItems
• hideAllNonBaseMenuItem
• showAllNonBaseMenuItem
• closeWindow
• scanQRCode

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