精华内容
参与话题
问答
  • 微信公众号H5开发笔记

    千次阅读 2018-09-03 23:07:21
    利用H5开发微信公众号 一、 首先授权配置 公众号设置 --》功能设置 设置业务域名! 1 2 3   这里的MP_verify_w7tdZrafqhkK9Mcj.txt文件,需要放到你项目的根目录下,例子:你的项目war包叫 test.war ,里面...

    来源:https://blog.csdn.net/chou342175867/article/details/62429354

    利用H5开发微信公众号

    一、 首先授权配置

     公众号设置 --》功能设置
     设置业务域名!
    
    • 1
    • 2
    • 3

    自定义菜单 
    这里的MP_verify_w7tdZrafqhkK9Mcj.txt文件,需要放到你项目的根目录下,例子:你的项目war包叫 test.war ,里面包含了src,WEB-INFO两个文件夹,则把MP_verify_w7tdZrafqhkK9Mcj.txt放到这两个文件夹的同级目录下;即现在test.war下有两个文件夹一个txt文件:src,WEB-INFO,MP_verify_w7tdZrafqhkK9Mcj.txt. 
    后面就需要配置JS接口安全域名和网页授权域名了,最好和业务域名配置为一样就好了。 
    二、开发中的配置 
    在开发目录下的基本配置中进行配置。 
    基本配置–》开发者ID–》AppID(应用ID),AppSecret(应用密钥); 
    基本配置–》微信开放平台账号绑定 
    这里需要绑定微信开放平台,若不绑定,在获取用户信息的时候就只能获取到用户的openId,不能获取到unionId. 
    自定义菜单
    注意:定义菜单的时候有讲究了, 
    如果你想在用户点这个菜单的时候就拿到用户的微信基本信息(性别,昵称,openId,unionId),这里直接可以配置成为授权链接,授权链接回调url直接写成你后台的一个接口地址,然后由这个接口来跳转到其它页面. 
    例子:H5授权的链接: 
    http://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxxxxxx&redirect_uri=http://xxxx.com/test/login&response_type=code&scope=snsapi_userinfo&state=xxx&connect_redirect=1#wechat_redirect 
    微信回调的url是一个接口地址:http://xxxx.com/test/login,不能回调网页,因为存在跨域错误。 
    state的值是可以自定义的。 
    这里的scope是用的snsapi_userinfo,这样可以直接在后台拿到用户信息。 
    微信回调这个接口的时候会把code和state的值返回,接口就可以通过code去拿用户的信息了。 
    若要用code去拿用户的信息,又会去做一堆事情,这些事情确实麻烦;推荐直接使用第三方的jar包,一步就拿到了。 
    推荐的jar包:weixin-java-mp-2.5.0.jar,weixin-java-common-2.5.0.jar; 
    maven地址

        <dependency>
          <groupId>com.github.binarywang</groupId>
          <artifactId>weixin-java-mp</artifactId>
          <version>2.5.0</version>
        </dependency>
    • 1
    • 2
    • 3
    • 4
    • 5
     在做微信支付的时候有可能会用到xstream的包,有需要也拿去
     xstream-1.4.7.jar,xxp3_min-1.1.4.jar,xmlpull-1.1.3.1.jar
     maven地址 
    
    • 1
    • 2
    • 3
    • 4
        <dependency>
            <groupId>com.thoughtworks.xstream</groupId>
            <artifactId>xstream</artifactId>
            <version>1.4.7</version>
        </dependency>
        <dependency>
            <groupId>xpp3</groupId>
            <artifactId>xpp3</artifactId>
            <version>1.1.4c</version>
        </dependency>
        <dependency>
            <groupId>xmlpull</groupId>
            <artifactId>xmlpull</artifactId>
            <version>1.1.3.1</version>
        </dependency>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    这里说下weixin-java-mp-2.5.0.jar的使用方法, 
    1.weixin-java-mp-2.5.0.jar里面最重要的类是 
    WxMpInMemoryConfigStorage和WxMpService; 
    WxMpInMemoryConfigStorage是用来存微信公众号的基本信息的, 
    在Spring+SpringMvc中的使用方法例子:

    @Configuration
    @PropertySource(
            value={"classpath:wxProperties.properties"},
            ignoreResourceNotFound = true)
    //@DependsOn("propertyPlaceholderConfigurer")
    public class WeixinConfig {
        //直接获取资源文件中的配置的值
        @Value("${wxProperties.appid}")
        private String appid;//appId
    
        @Value("${wxProperties.appsecret}")
        private String appsecret;//Appsecret
    
        @Value("${wxProperties.token}")
        private String token;//Token
    
        @Value("${wxProperties.aeskey}")
        private String aesKey;//aeskey,有就填,没有就不填
    
        @Value("${wxProperties.partener_id}")
        private String partenerId;//商户号
    
        @Value("${wxProperties.partener_key}")
        private String partenerKey;//商户秘钥
    
        @Value("${wxProperties.notify_url}")
        private String notifyUrl;//支付后台通知接口地址
    
        @Bean
        public static PropertySourcesPlaceholderConfigurer propertySourcesPlaceholderConfigurer() {
           PropertySourcesPlaceholderConfigurer ppc = new PropertySourcesPlaceholderConfigurer();
           ppc.setIgnoreUnresolvablePlaceholders(true);
           return ppc;
        }
    
        @Bean
        public WxMpConfigStorage wxMpConfigStorage() {
            WxMpInMemoryConfigStorage configStorage = new WxMpInMemoryConfigStorage();
            configStorage.setAppId(this.appid);
            configStorage.setSecret(this.appsecret);
            configStorage.setToken(this.token);
            configStorage.setAesKey(this.aesKey);
            configStorage.setPartnerId(this.partenerId);
            configStorage.setPartnerKey(this.partenerKey);
            configStorage.setNotifyURL(this.notifyUrl);
            return configStorage;
        }
    
        @Bean
        public WxMpService wxMpService() {
            WxMpService wxMpService = new WxMpServiceImpl();
            wxMpService.setWxMpConfigStorage(wxMpConfigStorage());
            return wxMpService;
        }
    
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56

    这里是配置微信公众号的基本信息,其它地方要使用就直接使用:

        @Autowired
        protected WxMpService wxMpService;
    • 1
    • 2

    2.获取微信用户基本信息示例代码:

    WxMpOAuth2AccessToken accessToken;
    WxMpUser wxMpUser = null;
    accessToken = this.wxMpService.oauth2getAccessToken(code);
    wxMpUser = this.wxMpService.getUserService().userInfo(accessToken.getOpenId(), null);
    //用户的基本信息就在wxMpUser中了,需要的就拿去用了。(注意:微信用户的性别:0:未知,1:男 2:女)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    3.H5若要使用微信封装好的js,则需要一些基本的配置信息,完全可以从后天台获取然后返回,示例代码:

     public StatusResult<Map<String, Object>> createJsapiSignature(String url) {
            Map<String, Object> result = new HashMap<String, Object>();
            try {
                WxJsapiSignature  wxJsapiSignature = wxMpService.createJsapiSignature(url);
                String getJsapiTicket = wxMpService.getJsapiTicket();
                result.put("wxJsapiSignature", wxJsapiSignature);
                return StatusResult.success(result, "");
            } catch (WxErrorException e) {
                return StatusResult.failed("未知错误出现", result);
            }
        }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    这里的url是H5用js代码获取的:

    var url = location.href.split('#')[0];
    • 1

    4.公众号支付 
    流程: 
    页面发起–>后台下单后返回前端所需要的参数–>页面发起支付–>用户输入密码付款成功–>微信回调后台通知接口–>业务处理完成 
    H5页面发起支付: 
    微信公众号的页面支付首先要配置微信公众号: 
    微信支付–>开发配置–>支付授权目录(正式、测试的目录必须要不一样,否则有你好看的,) 
    注意:设置授权目录的时候必须要精确到需要支付页面的目录文件夹; 
    例子:需要支付的H5页面 http://xxxxx.com/test/html/pay/pay.html 
    则授权目录配置为 http://xxxxx.com/test/html/pay/ 
    配置完成后就可以发起下单了, 
    后台下单代码示例:

    public StatusResult<Map<String, String>> getJSSDKPayInfo(HttpServletResponse response,
                                    HttpServletRequest request) {
            StatusResult<Map<String, String>> result = null;
            String spbill_create_ip = request.getRemoteAddr();//订单生成的机器 IP
            Map<String, String> map = new HashMap<String, String>();    
            WxMpConfigStorage wx= wxMpService.getWxMpConfigStorage();
            WxPayUnifiedOrderRequest prepayInfo = new WxPayUnifiedOrderRequest();
            //TODO change all request parameters to a VO class
            prepayInfo.setOpenid("openId");        
            prepayInfo.setOutTradeNo("out_trade_no");//设置订单商户号
            int total_fee = 0.01 * 100;
            total_fee = 1;
            prepayInfo.setTotalFee(Integer.valueOf(total_fee));//设置支付金额 单位为分 
            prepayInfo.setBody("xxxxx");//支付的内容简介
            prepayInfo.setTradeType("JSAPI");//渠道:公众号支付
            prepayInfo.setSpbillCreateIp(spbill_create_ip);//终端ip 
            //TODO(user) 填写通知回调地址
            prepayInfo.setNotifyURL(wx.getNotifyURL());
            try {
                两种下单方式,如果报错请先仔细检查微信配置的各种参数
                //WxPayUnifiedOrderResult  wxPayUnifiedOrderResult= wxMpService.getPayService().unifiedOrder(prepayInfo);
                Map<String, String> payInfo = this.wxMpService.getPayService().getPayInfo(prepayInfo);
                if(payInfo != null){
                    //业务代码
                }
                result = StatusResult.success(payInfo);
                return result;
            } catch (WxErrorException e) {
                log.error(e.getError().toString());
                map.put("error", e.getError().toString());
                return StatusResult.failed("微信下单失败",map);
            }
        }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    H5页面支付js代码(需要引入微信js哈):

    function callPay(){
                if (typeof WeixinJSBridge == "undefined"){
                   if( document.addEventListener ){
                       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                   }else if (document.attachEvent){
                       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
                       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                   }
                }else{
                   onBridgeReady();
                }       
            }
            function onBridgeReady(){
                   WeixinJSBridge.invoke(
                       'getBrandWCPayRequest', {
                           "appId":appId,     //公众号名称,由商户传入     
                           "timeStamp":timeStamp,         //时间戳,自1970年以来的秒数     
                           "nonceStr":nonceStr, //随机串     
                           "package":package,     
                           "signType":"MD5",         //微信签名方式:     
                           "paySign":paySign //微信签名 
                       },
                       function(res){     
                           if (res.err_msg == "get_brand_wcpay_request:ok") {    
                                alert("微信支付成功!");
                            } else if (res.err_msg == "get_brand_wcpay_request:cancel") {    
                                alert("用户取消支付!");
                            } else {  
                                 alert("支付失败!");
                            }     // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回    ok,但并不保证它绝对可靠。 
                       }
                   ); 
            }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    微信回调后台通知接口代码示例:

     public void getJSSDKCallbackData(HttpServletRequest request,
                HttpServletResponse response) {
            try {
                synchronized (this) {
                    Map<String, String> kvm = XMLUtil.parseRequestXmlToMap(request);
                    System.out.println("微信通知返回结果:\t"+kvm.toString());
                    WxPayOrderQueryResult  wxPayOrderQueryResult = wxMpService.getPayService().queryOrder("", kvm.get("out_trade_no"));//用订单号去查询订单状态,冗余代码可看可删
    //                if (this.wxMpService.getPayService().checkSign(kvm,  kvm.get("sign"))) {
                    System.out.println("查询订单返回结果:\t"+wxPayOrderQueryResult.getTradeState());
                    if ("SUCCESS".equals(wxPayOrderQueryResult.getTradeState())) {
                        if (kvm.get("result_code").equals("SUCCESS")) {
                            //TODO(user) 微信服务器通知此回调接口支付成功后,通知给业务系统做处理
                            log.info("out_trade_no: " + kvm.get("out_trade_no") + " pay SUCCESS!");
                            String out_trade_no = kvm.get("out_trade_no"); //支付订单号,接下来写业务代码                       
                                    }
                                }
                            } 
                            log.info("已经支付的订单详情\t"+aleadyPayOrder);
                            response.getWriter().write("<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[ok]]></return_msg></xml>");
                        } else {
                            log.error("out_trade_no: "
                                + kvm.get("out_trade_no") + " result_code is FAIL");
                            response.getWriter().write(
                                "<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[result_code is FAIL]]></return_msg></xml>");
                        }
                    } else {
                        response.getWriter().write(
                            "<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[check signature FAIL]]></return_msg></xml>");
                        log.error("out_trade_no: " + kvm.get("out_trade_no")
                            + " check signature FAIL");
                    }
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    到此为止公众号支付完成。

    三、微信js中接口使用 
    分享等很常见的,需要初始化微信的js,需要利用到上面写的createJsapiSignature后台接口。 
    公众号的分享给朋友、朋友圈、QQ空间等方法在微信js中是可以直接调用的,分享的内容可以自己改变的,但是分享出去的按钮只能是微信右上角的分享,开发者不能自定义分享按钮。。。这一点让人非常不爽。 
    H5页面js的代码示例:

    引入微信的js,然后初始化,然后微信会自动执行wx.ready中的方法

    wx.config({
        debug: false,   //开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。  
        appId: appId,   //必填,公众号的唯一标识
        timestamp: timestamp,   // 必填,生成签名的时间戳 
        nonceStr: nonceStr,   //必填,生成签名的随机串 
        signature: signature,   // 必填,签名
        jsApiList: [//需要多少接口就写多少接口
            'checkJsApi',//判断当前客户端是否支持指定JS接口
            'onMenuShareAppMessage'//获取“分享给朋友”按钮点击状态及自定义分享内容接口
        ] //必填,需要使用的JS接口列表,所有JS接口列表 
    }); 
    wx.ready(function () {  
        var title = "xxxx";
        var desc = "xxxx";
        var imgUrl = "http://xxx.com/test/picture/xxxxx.png";
        wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: url, // 分享链接,h5网页的地址或者其它
            imgUrl: imgUrl,
            trigger: function(res) {
                alert('用户点击发送给朋友');
            },
            success: function(res) {
                alert('已分享');
            },
            cancel: function(res) {
                alert('已取消');
            },
            fail: function(res) {
                alert(JSON.stringify(res));
            }
        });
    }); 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    调用微信js中的方法流程: 
    初始化config–>执行wx.ready 
    开发者需要更多的功能就依照葫芦画瓢了,或者去微信js sdk文档去copy方法了。

    让人不愉快的事情又发生了,微信在4月29日开始限制自定义分享的链接啦,必须要是安全域名下的链接才可以分享。 
    详情请看: 
    JSSDK自定义分享接口的策略调整 
    这样导致不能直接分享自己想要的链接了,但是解决方法还是有的: 
    在你的域名下新建一个H5页面,在这个H5页面的js代码中做一个跳转就好啦(但是如果你分享出去的是支付页面,那多半是支付不了地)!

    四、处理微信直接可以分享页面问题 
    有时候业务需要不能把当前的页面分享出去,但是微信自带的分享、复制链接按钮是可以在任何页面拿到当前页面的地址,如果别人点击就会进入。为了避免这个情况发生,有几种处理方法: 
    1.后端足够强大,页面跳转完全由后端完成,在加入了权限验证的情况下就不怕这个的,后端会拦截请求验证,验证不过就跳指定的error页面就好。 
    2.前端做验证 
    jsp可以用session,判断session中的一个全局参数即可。 
    H5可以使用cookie,在项目的开始页写入cookie,在js中写一个验证方法,每个页面都调用这个验证方法进行验证,虽然有冗余代码,但是这个是可以实现地,简单粗暴,速度快。 
    设置cookie的方法:

    jquery(function() {
        var expiresDate= new Date();
        expiresDate.setTime(expiresDate.getTime() + (30 * 60 * 1000));//半小时
        jquery.cookie("openId",'${openId}', {
              path : '/',//cookie的作用域为根目录,任何页面都是有效的
              expires : expiresDate
             });//cookie里面保存openId
    });
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    然后在js中写一个方法每个页面都调用判断。

    展开全文
  • 微信公众号 对接网页开发

    千次阅读 2018-02-02 10:55:10
    define("TOKEN","wx346b222"); function checkSignature() { //从GET参数中读取三个字段的值 $signature = $_GET["signature"]; $timestamp = $_GET["timestamp"]; $nonce = $_GET["nonce"];...

    <?php 
    define("TOKEN","wx346b222");
    function checkSignature()
    {
        //从GET参数中读取三个字段的值
        $signature = $_GET["signature"];
        $timestamp = $_GET["timestamp"];
        $nonce = $_GET["nonce"];
        //读取预定义的TOKEN
        $token = TOKEN;
        //对数组进行排序
        $tmpArr = array($token, $timestamp, $nonce);
        sort($tmpArr, SORT_STRING);
        //对三个字段进行sha1运算
        $tmpStr = implode( $tmpArr );
        $tmpStr = sha1( $tmpStr );
        //判断我方计算的结果是否和微信端计算的结果相符
        //这样利用只有微信端和我方了解的token作对比,验证访问是否来自微信官方.
        if( $tmpStr == $signature ){
            return true;
        }else{
            return false;
        }
    }
    if(checkSignature()){
        echo $_GET["echostr"];
    }
    else{
        echo 'error';
    }

    自己随便填TOKEN

    把上面的php放到服务器

    填上服务器地址

    生成key

    保存



    展开全文
  • 微信公众平台开发网页开发

    万次阅读 2018-07-11 14:28:43
    以前写过一篇《微信公众平台开发的一点收获》,这一篇说说微信公众平台网页开发的知识。微信公众平台应该是国内最大的开放平台,对于技术开发人员来说,不管有没有自己的公众号,应该也要有一定的了解,其实只要有一...

    以前写过一篇《微信公众平台开发的一点收获》,这一篇说说微信公众平台网页开发的知识。微信公众平台应该是国内最大的开放平台,对于技术开发人员来说,不管有没有自己的公众号,应该也要有一定的了解,其实只要有一个域名和虚拟主机,就基本上能够尝试着去开发。

    回顾上篇文章的知识点

    (1)上篇文章的内容可以理解为公众号消息开发,这里的消息可以是公众号文章或者是消息会话,用户为了有权使用公众号的功能,必须关注对应的公众号。因为用户关注公众号了,所以开发者可以间接认为有权利获取用户的基本信息,都直接能够拿到用户的 OpenID(在相关接口中)。

    (2)access_token 概念,公众号开发者为了有权调用公众号 API,必须先经过微信的授权,这个授权码就是 access_token(开发者 access_token),这个 access_token 是和开发者绑定的(而非同用户绑定)。

    什么是公众号网页开发呢?

    公众号消息开发是用户必须加入这个公众号,然后开发者利用公众号平台提供的一些 API (功能)和用户来交互。除了公众号文章这里没有网页的概念(文章虽然是网页,但开发者没有任何能力控制)。

    现在考虑这样一种场景,一个开发者要提供一个电商服务,有他自己的业务逻辑(比如页面),通过公众号消息开发是提供不了这样的服务,为了解决这个问题,开发者可以做一个网页,然后在公众号菜单中引入这个网页,这样用户点击菜单打开网页就能使用电商服务。

    还有一种场景,某个服务商提供了一个调查问卷服务(以网页的形式),然后你的微信好友通过消息发送给你,你打开链接就能使用这个服务了(不一定是在公众号中打开)。

    再举个场景,微信有很多第三方服务,比如大众点评,相当于也是打开一个网页。

    为了有效的提供这样场景的服务,微信公众号官方提供了网页开发这个概念,主要包括三部分:

    (1)在微信中打开服务,这时候微信首先相当于一个浏览器,有浏览器就有 Javascript 操作,为了安全性微信这个“浏览器”肯定要做一些限制;为了提供微信的一些本地功能(比如调用相机),微信也提供了一些 JS-SDK,这样开发者就能调用这个 SDK 提供微信的一些功能。

    (2)既然是开放平台,所有的服务都嵌入在微信中,为了让开发者提供的服务更具有一致性(就是外观),微信也提供了 UI 库,有了 UI 库,开发者开发的网页就能更好的适配,实际上这个功能有点鸡肋,很少有用这个库的,都是为了让自己的网页更个性化。

    (3)假如是在微信中嵌入一个网站的网页,由于这个网页和公众号没有任何关系,那么这个网页怎么知道是那个微信用户(OpenID)打开了这个网页呢?公众号通过授权的方式让开发者能够获取用户的信息,这个授权就是标准的 oAuth 协议,通俗的说就是开发者假如需要获取用户信息,首先要取得用户的同意,这样公众号才能让你获取信息。仔细想下为什么消息公众号开发能够直接获取用户信息?

    概括的说,网页开发包括,网页授权、JS-SDK、UI 库。

    网页授权

    由于自己申请的公众号没有微信认证(就是没交钱),所以网页授权这个服务用不了,不过个人使用过微博开放平台的授权,原理差不多,所以简单的描述下。

    (1)要使用网页授权,在后台配置下回调域名就可以,不同于微博开放平台,不用提供回调 URL ,只要域名就可以。

    (2)scope,有两种授权方式,第一种就是假如一个微信用户已经加入公众号(相当于半授权了),那么这种授权方式叫静默授权(snsapi_base),就是说用户看不到官方的授权页面,会直接进入开发者提供的网页中,这种授权方式只能拿到 OpenID(通过其他接口再获取信息)。
    另外一种授权方式可以称之为完整授权(snsapi_userinfo),就是手用户能看到完整的授权页面,经过用户确认后再进入开发者提供的网页中,这种授权方式能够直接拿到用户信息(省去一次接口调用)。

    (3)授权流程

    假如开发者明白 oAuth 协议,这个流程就非常简单了。

    • 首先开发者通过 authorize 接口(传递回调地址和 appid )获取授权地址。
    • 用户打开授权地址并授权后,微信会回调开发者的回调地址,并返回 code 值。
    • 开发者传递 code 调用 access_token 接口获取用户 access_token 和 OpenID 值,这个值的有效期一般是 7200 秒。
    • 为了避免用户频繁授权,开发者可以用即将过期的 access_token 刷新 access_token(refresh_token接口)。
    • 通过传递用户 access_token 和 OpenID 调用 userinfo 接口获取用户信息。

    这里的用户 access_token 和开发者 access_token 不是一回事,分别代表用户授权和公众号授权。

    PHP-SDK 中通过简单的几个函数调用就能实现授权。

    JS-SDK

    在 PC 网页开发中,通过 Javascript 能够调用浏览器的功能;同理微信其实就是一个浏览器,为了调用浏览器(微信)的功能,微信提供了一个 JS-SDK 包,这样就能调用相应的功能了。

    使用很简单,首先引入对应的 js 文件即可。然后在动态网页中配置 config 信息即可

    <script>
    wx.config({
        debug: true,
        appId: 'wx3505a38e6f83b187',
        timestamp: 1490782160,
        nonceStr: 'ogZFeZaYLMhCQiez',
        signature: 'c1bd73bc505840a4db142873306bf10f243444ff',
        jsApiList: [
        ]
    });
    wx.ready(function () {
        document.querySelector('#checkJsApi').onclick = function () {
        wx.checkJsApi({
            jsApiList: [
            'getNetworkType',
            'previewImage'
            ],
            success: function (res) {
            //alert(JSON.stringify(res));
            }
        });
    };
    </script>
    

    使用 JS-SDK 最关键的包括二部分:

    (1)jsapi_ticket ,使用 jsapi_ticket 也是需要微信公众号平台授权的,否则任何人都能使用了。
    jsapi_ticket 是调用相应接口生成的(传递 access_token 参数),这个 access_token 是消息公众号开发者的 access_token(不是用户的),思考下为啥 JS-SDK 不直接使用 access_token 而要使用 jsapi_ticket ?

    (2)获取到 jsapi_ticket 后,会对时间戳、随机数、jsapi_ticket、当前 URL 签名后生成 wx.config,假如微信验证签名通过后,代表能够使用对应的 JS-SDK。

    PHP-SDK 中通过简单的几个函数调用就能生成签名,非常方便。

    UI 库

    UI 库其实非常简单,就理解为一个小型的 bootstrap 库就可以了。在微信上也很少看到开发者用这个库的。思考了下原因,在 PC 网页和公众号上为了保持样式一致性,开发者会用统一的 UI 库,但是微信没有 PC 网页。

    最后说下,没有经过微信认证的开发权限越来越小了,举个例子,假如没有经过微信认证,微信公众号菜单上无法配置网页的 URL。



    作者:虞大胆
    链接:https://www.jianshu.com/p/cca418ab3a8d
    來源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
    展开全文
  • 微信公众号网页开发jweixin.js的使用

    千次阅读 2020-03-24 11:22:27
    const timestamp = parseInt(new Date().getTime() / 1000) const str = `jsapi_ticket=HoagFKDcsGMVCIY2vOjf9txntvvkykCDEPmzHimZjoxSzowS5ie_l1iIfXdvXDe1CE92az7m0eZtkwiK8lFOSA&noncestr=Wm3WZ...

     

    首先申请测试账号

     

    获取以下信息

    使用你的appId和appsecret获取token

    https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wxa4cec9585a0c6&secret=4e3a25657f654f522a8201841138a

     

             使用获取的token获取ticket

    https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=31_u4X7j6KLjuoO0AC6Kh60xwVDuqVN76ukk61OGRr-uvrze5fD7phVZwsTU7RlcZJgWIVQPTRrMNzTcbQTUohxX56fi_UNB_IsH-fNexzjEuygmakrSFDwbirA-jWU2mJQ6mFMaPE-U6wU-9piJYGbAGARGO&type=jsapi

     

    {"errcode":0,"errmsg":"ok","ticket":"HoagFKDcsGMVCIY2vOjf9txntvvkykCDEPmzHimZjozChuER3EQLuCCIPS2CZdam_aVJW6uQmL8Q-zO8sQ5Ynw","expires_in":7200}

    生成signature

                const timestamp = parseInt(new Date().getTime() / 1000)            const str = `jsapi_ticket=HoagFKDcsGMVCIY2vOjf9txntvvkykCDEPmzHimZjoxSzowS5ie_l1iIfXdvXDe1CE92az7m0eZtkwiK8lFOSA&noncestr=Wm3WZYTPz0wzccnC&timestamp=${timestamp}&url=http://192.168.3.116:8080/h5/pages/index/share`            const signature = this.sha1(str)            console.log(signature)            wx.config({                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。                appId: 'wxa4cec9585a0c00d6', // 必填,公众号的唯一标识                timestamp: timestamp, // 必填,生成签名的时间戳                nonceStr: 'Wm3WZYTPz0wzccnC', // 必填,生成签名的随机串                signature: signature, // 必填,签名//                jsApiList: ['hideAllNonBaseMenuItem', 'hideMenuItems']            })

    开始调用微信js的方法​

                            wx.ready(() => {                console.log(wx)                this.test()                // wx.showMenuItems({                //     menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline']                // })                // // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。                // // wx.showMenuItems({                // //     menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline']                // // })                // wx.onMenuShareAppMessage = function (e) {                //     console.log(e)                //     console.log(21213)                // }                // wx.onMenuShareTimeline({ // 朋友圈                //     title: '', // 分享标题                //     desc: '', // 分享描述                //     link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致                //     imgUrl: '', // 分享图标                //     success: function () {                //         Router.replace({name: 'index'})                //     },                //     error: function () {                //         console.log(213123)                //     }                // })                wx.hideAllNonBaseMenuItem()            })            wx.error(function (res) {                console.log(res)            })
    展开全文
  • 微信官方文档 (真的很详细) 第一步: 网页授权回调域名 网页服务内容 这个网页回调域名是非常关键的,后面会讲解这个回调的域名的使用,回调字面意思就是会跳转的。 第二步: 使用微信官方的api进行code获取 ...
  • WeUI 是一套同微信原生视觉体验一致的基础样式库,WeUI由微信官方设计团队为...2.方便用户便捷获取快速使用,降低公众号和三方开发者的开发和设计成本。 3.WeUI是微信设计团队精心打造,清晰明确,简洁大方。 WeUI...
  • 微信公众号H5页面开发–微信JS-SDK引用 微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时需要用到: 微信JS-SDK。以地理位置...
  • 第一部分、为公众号菜单嵌入网页 一、关键参考文档  微信JS-SDK说明文档 。 二、编辑模式嵌入网页公众号平台下,自定义菜单,添加菜单,并选择菜单内容跳转到指定页面地址即可(需认证后方可添加页面地址,个人...
  • 微信公众号开发——项目搭建

    万次阅读 2018-09-10 11:50:00
    前往微信公众平台(https://mp.weixin.qq.com/)获取开发权限和开发账号,公众号分为好几种,小程序,订阅号,服务号,企业号,个人只能用订阅号,权限比较少(api接口权限); 二 想要自定义模块功能或者是回复...
  • 微信公众号开发(三)前端界面

    万次阅读 热门讨论 2017-12-08 18:39:07
    由于该公众号主要的用途是用于公司售后服务,经沟通确定相关需求. 第一: 了解相关的UI框架,最终选定了Jquery-WeUI框架. 第二: 制作简单案例,在移动端进行测试,要达到移动端的自适应. 目前完成三个界面如下: ...
  • 如果用户在微信客户端中访问第三方网页公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。 现在,我们要实现一个微信网页,通过微信访问网页时,网页会展示微信用户的个人信息。因为涉及...
  • 微信公众号开发(一)服务器及接口的配置

    万次阅读 多人点赞 2017-09-04 01:44:20
    微信公众号开发(一)服务器及接口的配置 关于微信公众号中的订阅号和服务的区别这里不多加讨论,网上有很多资源可以搜到,这里直接进入正题,如果是个人开发者,这里建议使用测试号进行开发学习,测试号的权限要比...
  • 项目实现地址。查看我的[Github地址]... 目前具体可获取指标(包含但不局限):阅读数、点赞数(在看)、评论内容及总数、正文内容及图片、是否为头条、是否为原创。
  • 微信公众号开发基本流程

    万次阅读 多人点赞 2019-04-07 16:46:18
    过年前后做了个微信公众号项目,已经过去一段时间了,抽空回忆总结下基本流程吧,不然很快估计自己就忘了。。 微信公众平台官网:https://mp.weixin.qq.com 文章目录一、注册公众号二、了解公众号管理页面三、必备...
  • 请问你们平时在微信公众号开发中都是怎么测试的?除了用微信开发者工具测试。还会用到哪些测试工具用来测试哪些问题呀?
  • 微信公众号开发之接收与发送消息

    万次阅读 2018-12-28 22:04:14
    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! ... 一丶概论 公众号接收与发送消息 ...如果公众号类型为服务号(订阅号只能使用普通消息接口),可以在公众平台网站中申请认证...
  • 微信公众号网页授权登录

    万次阅读 2018-09-10 18:17:35
    微信公众号网页授权登录: 前端时间做了一个微信公众号的项目,就是微信公众号的菜单点击我的个人中心,就向用户授权登录 获取用户的信息,进行业务逻辑的操作,微信公众号官方文档,这是我写的文章,里面有很多...
  • 微信公众号主要面向名人、政府、媒体、企业等机构推出的合作推广业务。在这里可以通过微信渠道将品牌推广给上亿的微信用户,减少宣传成本,提高品牌知名度,打造更具影响力的品牌形象。 3. 公众平台 微信公众平...
  • 微信公众号二次开发项目源码

    千次下载 热门讨论 2016-01-18 17:29:13
    微信公众号二次开发项目源码 微信开发 公众号开发 OAuth2.0 微信二次开发 微信 java 代码,保护微信OAuth2.0授权 微信自定义菜单 微信回复图文消息 微信动态回复内容 微信开发即微信公众平台开发,将企业信息、服务...
  • 微信公众号之开发者工具

    万次阅读 2018-06-30 00:32:11
    这次的项目主要是关于微信公众号的一个开发,本人这次分配的模块是后台微信公众号的支付和退款,第一次接触微信公众的项目刚开始一脸懵逼,开发过程中遇到各种坑,所以想自己写一篇详细的关于微信公众号开发,希望...
  • 微信公众号开发之授权登录

    万次阅读 2018-07-27 13:42:02
    微信公众号开发之授权登录 1、微信公众号技术开发文档阅读 微信公众号开发首先对开发文档的阅读,技术版本可能有变化,博客里面的内容一段时间过后,可能就出现有些小问题。 微信公众号技术开发文档:...
  • Java微信公众号开发(附源码!!!)

    万次阅读 多人点赞 2017-02-03 15:20:21
    笔者最近在为一个艺考服务团队开发手机端的服务,由于开发app需要的时间较长,所以选择开发微信公众号。本人比较擅长Java开发,所以本文是基于Java语言的公众号开发。话不多说,直接进入正题。 准备工作: 一、在...
  • 微信公众号开发实例

    千次阅读 2017-08-24 14:06:03
    微信公众号开发实例目录 1.简介 2 1.1 基础知识 2 2.开发准备 5 2.1 业务流程 5 2.2 微信公众号 5 2.3 WEB服务器 8 2.4 通信协议 13 2.5 开发框架 19 2.6 小结 20 3.开发实例 21 3.1 业务流程 21 3.2 ...
  • 微信公众号网页授权,获取用户信息以及openid 这几天做项目,本来只是想通过公众号的appid获取用户的openid就行了,然后在网上查资料,问朋友,最后找到了方法。 起初一直很蒙,这个怎么弄,又是需要code,又是需要...
  • 使用vue2开发微信公众号,现在登录后重定向出现如下问题 , 还望经验丰富的专家给与帮助。 流程 1、微信公众号按钮(指定的url) ; 2、router.beforeEach 拦截url判断有没有登录; 3、未登录,重定向到授权页面...
  • 微信公众号网页开发中,我们通常会用到许多微信团队提供的接口,我们在运行单个php调用接口的时候,返回值直接出现在php的echo中,我们根据这个值来判断代码正确与否,但是当php文件和微信公众号连接起来的时候,...
  • 微信公众号开发demo

    2018-09-10 20:16:28
    初次开发请先详读官方文档 微信各种消息处理 带参二维码生成 素材管理 群发消息 oauth2授权 微信H5、扫码一、扫码二支付
  • 用python爬取微信公众号文章

    万次阅读 多人点赞 2017-07-23 13:31:30
    本文通过微信提供的公众号文章调用接口,实现爬取公众号文章的功能。
  • 微信公众号系列之测试号使用

    万次阅读 2016-03-23 15:36:31
    微信公众平台认证之前,我们可以先申请一个测试的公众号来进行测试,这对开发人员来说还是有很大好处的! 微信公众平台提供了测试账号,在公众账号没有审核之前,也是可以进行开发的。进入后台->开发者工具-...
  • 但是,当我们想维护起自己的公众号时,公众号编辑器往往让我们费劲了脑汁。本人尝试了各种工具,比如:秀米一些在线提供多种不同样式的编辑器。虽然这些编辑器都能够完成编辑任务,但是效果并不理想。与我们所追求的...

空空如也

1 2 3 4 5 ... 20
收藏数 295,219
精华内容 118,087
关键字:

微信公众号网页开发