微信JS-SDK使用方法实现拍照上传

最新推荐文章于 2024-01-26 17:00:08 发布

采蘑菇的提莫队长

最新推荐文章于 2024-01-26 17:00:08 发布

阅读量641

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qinfuan2017/article/details/110479019

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、写在前面

目的：了解JS-SDK的使用方法，用拍照上传图片作为例子，写给不喜欢看官方文档的同学们

参考：微信开放文档 JS-SDK

好的，先看完整前端代码再来讲解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
<p>点击下面的按钮用来拍照</p>
<button onclick="getphone()">咔</button>
</body>
</html>

(function () {
        init()
    })();
    
    function init() {
        var signUrl = window.location.href.split('#')[0];
        console.log(signUrl)
        axios.get('http://ghealth.glbksoft.com/weChat/getJsapiTicketResult?signUrl=' + signUrl).then(function (res) {
            var data = res.data
            wx.config({
                debug: true,
                appId: data.appid,
                timestamp: data.timestamp,
                nonceStr: data.nonceStr,
                signature: data.signature,
                jsApiList: ['chooseImage', 'getLocalImgData']
            })

            wx.ready(function () {

            });
            wx.error(function (res) {

            });

        })
    }

    function getphone() {
        var localIds=null
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: [ 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                wx.getLocalImgData({
                    localId: localIds[0].toString(), // 图片的localID
                    success: function (res) {
                        var localData = res.localData;
                        $.ajax({
                            type: 'post',
                            url: 'myCustom/ctidVerify',
                            data: {"imgStr":localData},
                            success: function (data) {//成功的事件
                                console.log(data)
                            },
                            error: function (data) {//失败的事件
                                
                            }
                        });



                    }
                });



            }
        });
    }

二、步骤说明

步骤一、先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。如下图所示

步骤二、引入JS-SDK

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

步骤三：完成初始化通过config接口注入权限验证配置

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

这一步需要你wx.config才能进行后续操作，那么参数从哪里来，服务端给，你只需要给服务端你当前页面的完整URL。其余参数包括appId、 timestamp、nonceStr都由服务端生成再传给你。

注意！！！！！！

1、jsApiList: [ ]，一定要填入你需要接口，如拍照或从手机相册中选图接口，jsApiList: ['chooseImage']。

2、请为wx.config 单独写个方法，调用一次即可，请勿重复调用，否则会抛出错误提示

3、如果你需要在页面初始化完成后调用其它方法，请写在 wx.ready 中

步骤四、调用接口

拍照上传使用了两个方法、分别是 wx.chooseImage（拍照或从手机相册中选图接口） wx.getLocalImgData（获取本地图片接口）

这里需要注意的是 localId为本地图片ID、localData为base64格式的图片接下来用ajax post方式传到后端就可以啦