微信公众平台前端人员对接(微信拍照上传)

前言:

1.本篇主要介绍前端如何对接微信公众平台

2.示例选取微信拍照上传

3.微信JS-SDK说明文档

4.企业号开发者中心

5.请一定要确认自己的帐号类型是否拥有使用微信某项功能的权限,要不然方法回调不起作用

6.企业号对接功能检测图如下:

步骤:

1.确认设置安全域名(设置后,可在该域名下进行测试)

2.获取到AppID和AppSecret

3.通过AppID和AppSecret得到access_token

a.请求方式get

b.请求链接https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

c.把链接中APPID和APPSECRET改成自己的

接口返回的expires_in是7200s,表示该access_token时效是2个小时,2小时之后,失效,我们需要重新获取

4.获取jsapi_ticket

a.请求方式get

b.请求链接https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

c.把链接中access_token改成自己的

接口返回的expires_in是7200s,表示该jsapi_ticket时效是2个小时,2小时之后,失效,我们需要重新获取

5.签名获取signature

a.测试阶段我们无需在服务器端生成签名,可以先在本地用sha1.js生成(正式上线时需要后台配合,因为signature会失效)

b.我们可以通过这个链接方便的生成signature

http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign  (可以使用这个页面中的sha1.js)

6.到这里,需要的参数,我们都已得到

a.在自己的js文件里验证是否正确(仅在微信端生效)

b.验证通过后,大家就可以去实现自己想要的功能了,参照以下官方demo的js

http://203.195.235.76/jssdk/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
    <link rel="shortcut icon" href="images/send.png" type="/image/x-icon">
    <title>wx</title>
    <script src="js/jweixin-1.0.0.js"></script>
    <script src="js/sha1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 0.04rem;
        }
        body, html {
            width: 100%;
            height: 100%;
        }
        body {
            height: 3rem;
        }
        .cosPhoto {
            max-width: 0.667rem;
        }
    </style>
</head>
<body>
    <input class="takePhoto" type="button" value="拍照">
    <div class="txt"></div>
    <script>
    window.onload = function() {
        var winW = document.body.clientWidth,
            htmlObj = document.querySelector('html');

        htmlObj.style.fontSize = ((winW<750) ? winW : 750) +'px';

        var takePhoto = document.querySelector('.takePhoto');
        var txt = document.querySelector('.txt');

        var jsapi_ticket = 'gtrhtrtrh-jytjytjyuykjuyhtr-werewr';
        var nonceStr = 'nonceStr';
        var timestamp = '1414587457';
        var url = 'http://xxxtest.html';//完整url

        var t = 'jsapi_ticket='+ jsapi_ticket +'&noncestr='+ nonceStr +'×tamp='+ timestamp +'&url='+ url;

        var s = new jsSHA(t, "TEXT"),
            signature = s.getHash("SHA-1", "HEX");

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

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

        });

    }
    </script>
</body>
</html>

时间: 2024-10-17 13:46:30

微信公众平台前端人员对接(微信拍照上传)的相关文章

微信公众平台新增图文内容中图片上传接口,并过滤外链图片(这是封闭么?)

为了加快图文内容的浏览速度,公众平台新增了图文消息内容中的图片上传接口.开发者可以通过该接口上传所需要的图片来获得图片链接,再把图片链接放到图文内容中. 同时,为了加强平台安全性,从8月15日起, 系统将自动过滤图文内容中的外链图片(8月15日之前的图文内容不会过滤).下述接口受到影响,请开发者尽快修改: 1.群发图文消息时,上传图文的接口,查看接口文档 2.素材管理中的新增永久图文素材接口,查看接口文档

微信公众平台开发(一) 申请微信公众账号

一.微信公众平台介绍 微信公众平台是腾讯公司在微信的基础上新增的功能模块,通过这一平台,个人和企业都可以打造一个微信的公众号,可以群发文字.图片.语音.视频.图文消息五个类别的内容. 二.注册微信公众号 1.注册地址: https://mp.weixin.qq.com/ 点击右上角的"立即注册"申请微信公众账号. 2.填写基本信息 3.激活邮箱账号 到邮箱中收取邮件,激活公众平台账号. 4.信息登记 通过邮箱激活后,填写基本信息.选择为"个人"后,后面只能选择&qu

PHP微信公众平台开发高级篇—微信JS-SDK

PHP微信公众平台开发高级篇—微信JS-SDK 第一步.绑定域名: 第二步.引入JS文件: 第三部.通过Config接口注入权限验证配置 第四部.通过Read接口处理成功验证 第五部.通过Error接口处理失败验证 实际案例:分享接口内容

【微信公众平台开发】借用微信内置图片浏览功能

开发微信公众平台时,碰到文章中有很多图片,需要可以点开图片浏览:那么点击图片直接调用微信客户端自带的图片播放组件会省很多事.否则你得去摆弄折腾各种图片浏览插件,比如photoswipe. 个人封装功能成一个js文件.把该文件放到你需要的网页里面即可,这样文章当你点击图片时,就会调用图片浏览功能! <script> function addLoadEvent(func){ //将函数作为参数,此函数就是 onload 触发时需要执行的某个函数 var oldonload=window.onloa

微信公众平台功能开发(微信小店接口)

微信公众平台本次更新增加了微信小店功能,微信小店基于微信支付,包括添加商品.商品管理.订单管理.货架管理.维权等功能.不过此功能只能服务号才有,支付方式有微信支付和支付宝支付,唯一缺点就是所有的模块全部是一样的,容易产生视觉疲劳,上下架商品不是很方便,不过听适合想在微信开店的朋友们. 微名汇:http://weixin.zgtuango.com 联系QQ:44653139 开发者可以通过小店接口来实现快速开店,目前支持以下接口: 1.商品管理接口 开发者可通过商品管理接口,来增加商品.删除商品.

微名汇-微信公众平台功能开发(微信聊天机器人)

因为现在小黄鸡智能聊天机器人接口能免费试用7天,7天之后会收费这对于很多用户来说感觉不划算.所以我找了另一个接口:小i机器人,并且完全免费.本文介绍如何在微信公众平台中使用小i智能聊天api接口开发智能聊天机器人. 小i机器人是全球用户量最大的中文聊天机器人,最早在MSN上出现,后拓展到QQ.短信.网页等交互平台上,拥有超过1亿的用户.2012年2月,小i机器人整合了自然语音识别功能,并陆续发布了智能手机.智能电视以及电话上的语音交互版本. 小i机器人申请地址为http://cloud.xiao

Java微信公众平台开发(十六)--微信网页授权(OAuth2.0授权)获取用户基本信息

转自:http://www.cuiyongzhi.com/post/78.html 好长时间没有写文章了,主要是最近的工作和生活上的事情比较多而且繁琐,其实到现在我依然还是感觉有些迷茫,最后还是决定静下心来坚持一开始的选择,继续我们的微信系列文章的后续更新,也希望在自己有时间的时候能把更多的内容呈现给大家,前面一系列的文章讲述了很多微信开发相关的基础知识点 [微信系列文章],那么从这一篇开始将讲述微信较深一层次或者说在产品应用中时刻会用到的一些技术点,那么下面就让我们进入正题吧,这一篇我要讲述的

微信公众平台开发之申请微信开发测试号及花生壳内网映射

微信公众测试号申请方式 1.已有微信公众平台账号 登录微信公众平台,点击工具栏左下角"开发者工具" 找到公众平台测试账号,点击进入 测试号管理界面 2.没有公众平台账号 直接打开网址:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login   扫描登录即可. 使用花生壳内网映射 微信公众平台开发需要有自己的服务器资源,如果没有,可以使用自己能上网的电脑用花生壳做内网映射. 进入花生壳官网:http://hsk.oray

Java微信公众平台开发(一)--接入微信公众平台

转自:http://www.cuiyongzhi.com/post/38.html (一)接入流程解析 在我们的开发过程中无论如何最好的参考工具当然是我们的官方文档了:http://mp.weixin.qq.com/wiki/8/f9a0b8382e0b77d87b3bcc1ce6fbc104.html 通过文档我们可以看出其中接入微信公众平台开发,开发者需要按照如下步骤完成: 填写服务器配置 验证服务器地址的有效性 依据接口文档实现业务逻辑 按照上面的逻辑可能是填写服务器配置信息是在第一步,但