• 微信小程序页面取值

    2018-04-13 12:57:05
    微信小程序js接受页面传值的方法:1.本页面参数名为局部变量:onLoad: function (options) { var 本页面参数名=options.上一传值页面参数名},实例: onLoad: function (options) { var shopsName=options.shopsName ...

    微信小程序js接受页面传值的方法:

    1.本页面参数名为局部变量:onLoad: function (options) { var 本页面参数名=options.上一传值页面参数名},

    实例:

    onLoad: function (options) {

    var shopsName=options.shopsName

    },

    2.本页面参数名为全局变量:onLoad: function (options) { 本页面参数名=options.上一传值页面参数名},

    实例:

    onLoad: function (options) {

    this.data.shopsName=options.shopsName

    },

    附:无论上一页面是通过js传值还是通过wxml传值,本页面取值方法都如上。
    展开全文
  • 微信小程序的页面跳转,页面之间传递参数笔记.  先上demo图:   为了简化逻辑,所以index.wxml里面只写了两个text.既然是跳转,那就还有其他页面. 目录如下: 三个页面,但是代码很简单.直接上代码. 跳转到新...

      微信小程序的页面跳转,页面之间传递参数笔记.

    CSDN微信小程序开发专栏,欢迎关注!

      先上demo图:

      


    为了简化逻辑,所以index.wxml里面只写了两个text.既然是跳转,那就还有其他页面.

    目录如下:


    三个页面,但是代码很简单.直接上代码.

    <span style="font-size:24px;"><!--index.wxml-->  
    <view class="btn-area">  
      <navigator url="../navigator/navigator?title=我是navigate" >跳转到新页面</navigator>  
      <navigator url="../redirect/redirect?title=我是redirect" redirect>在当前页打开</navigator>  
    </view></span>



    index.wxml中的URL就是跳转的页面路径.上面代码中就是navigator目录下的navigator页面,title是参数.
    navigator下redirect属性是值在当前页打开.如果不加redirect就是跳转到新页面.都可以携带参数.
    navigator下redirect属性是值在当前页打开.如果不加redirect就是跳转到新页面.都可以携带参数.


    <span style="font-size:24px;"><!--navigatort.wxml-->  
    <view style="text-align:center"> {{title}} </view></span>
    

    在navigatort.wxml中通过js代码可以获取到title,代码如下

    //navigatort.js

    Page({  
      onLoad: function(options) {  
        this.setData({  
          title: options.title  
        })  
      }  
    })


    <span style="font-size:24px;"><!--redirect.wxml-->  
    <view style="text-align:center"> {{title}} </view></span>


    <span style="font-size:24px;">//redirect.js  
    Page({  
      onLoad: function(options) {  
        this.setData({  
          title: options.title  
        })  
      }  
    })</span>



    最后上两张跳转后的图.

    1.跳转到新页面




    2.在原来的页面打开



    有没有发现一个细节,在原来的页面打开是不会出现返回按钮的,而跳转到新页面后会出返回按钮.

    这是因为我写了两个页面.如果indexwxml不是一级页面,这里都会出现返回按钮.

    当然返回的结果是不一样的:

    1.跳转到新页面,返回是回到之前的页面;

    2.在原来页面打开,返回是回到上一级页面.

    微信开发文档

    http://blog.csdn.net/qq_31383345

    展开全文
  • 微信页面分享到朋友圈、分享朋友等等,默认的是有分享格式的,比如分享给朋友,默认的图标是页面的第一张图片,内容是该页面的url,这个显然有些场景是不满足的。对于挑剔的产品经理一定是会有自己的设计的,比如...



    微信页面分享到朋友圈、分享朋友等等,默认的是有分享格式的,比如分享给朋友,默认的图标是页面的第一张图片,内容是该页面的url,这个显然有些场景是不满足的。对于挑剔的产品经理一定是会有自己的设计的,比如图片、内容等。

    微信js-sdk提供了关于这部分的接口,现将过程说明如下。

    文档路径,在登录公众号后路径如下:点击打开链接,在左侧“微信网页开发”--“微信JS-SDK说明文档”菜单栏中

    点击“3.2 获取“分享给朋友”按钮点击状态及自定义分享内容接口”我们可以看到如下内容:

    wx.onMenuShareAppMessage({
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接
        imgUrl: '', // 分享图标
        type: '', // 分享类型,music、video或link,不填默认为link
        dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
        success: function () { 
            // 用户确认分享后执行的回调函数
        },
        cancel: function () { 
            // 用户取消分享后执行的回调函数
        }
    });
    在以上代码片段中我们看到了我们可以定义“微信分享视图”中的这些项:标题、描述、连接、图片以及类型。为了举例,我们只说标题和描述。

    看了以上代码段,问题来了,wx这个对象我们怎么定义以及怎么配置呢?
    在改说明文档下的步骤一、步骤二和步骤三说明了我们怎么使用wx这个对象以及怎么配置,如下:

    JSSDK使用步骤
    步骤一:绑定域名
    先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
    备注:登录后可在“开发者中心”查看对应的接口权限。
    步骤二:引入JS文件
    在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js
    如需使用摇一摇周边功能,请引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js
    备注:支持使用 AMD/CMD 标准模块加载方法加载
    步骤三:通过config接口注入权限验证配置
    所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '', // 必填,公众号的唯一标识
        timestamp: , // 必填,生成签名的时间戳
        nonceStr: '', // 必填,生成签名的随机串
        signature: '',// 必填,签名,见附录1
        jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    });

    以上代码段我们需要注意wx.config({})中定义的参数:

    debug我们不再赘述

    appId,就是公众号的Id

    timestamp,暂时看就是一个时间戳文本

    nonceStr,暂时看就是一个随机串,

    jsApiList,需要使用的js接口列表,这个看上去也没有什么问题,应该是js接口列表中列出的接口的一个array

    需要我们注意的是signature以及signature和timestamp和nonceStr的关系。根据以上代码段列出的备注,我们看附录一。

    附录一描述如下

    附录1-JS-SDK使用权限签名算法
    jsapi_ticket
    生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。
    1.参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):../15/54ce45d8d30b6bf6758f68d2e95bc627.html
    2.用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
    成功返回如下JSON:
    {
    "errcode":0,
    "errmsg":"ok",
    "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
    "expires_in":7200
    }
    获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。
    通过阅读以上代码段说明的文本,我们可以看出来,要想生成signature这个参数,不许要生成ticket这个“票据”。

    需要我们注意的是,生成这个“票据”又需要我们获得access_token,根据以上../15/54....这段说明我们看下怎么生成access_token这个参数。

    说明如下:

    获取access token
    access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token。开发者需要进行妥善保存。access_token的存储至少要保留512个字符空间。access_token的有效期目前为2个小时,需定时刷新,重复获取将导致上次获取的access_token失效。
    
    公众平台的API调用所需的access_token的使用及生成方式说明:
    
    1、为了保密appsecrect,第三方需要一个access_token获取和刷新的中控服务器。而其他业务逻辑服务器所使用的access_token均来自于该中控服务器,不应该各自去刷新,否则会造成access_token覆盖而影响业务;
    2、目前access_token的有效期通过返回的expire_in来传达,目前是7200秒之内的值。中控服务器需要根据这个有效时间提前去刷新新access_token。在刷新过程中,中控服务器对外输出的依然是老access_token,此时公众平台后台会保证在刷新短时间内,新老access_token都可用,这保证了第三方业务的平滑过渡;
    3、access_token的有效时间可能会在未来有调整,所以中控服务器不仅需要内部定时主动刷新,还需要提供被动刷新access_token的接口,这样便于业务服务器在API调用获知access_token已超时的情况下,可以触发access_token的刷新流程。
    如果第三方不使用中控服务器,而是选择各个业务逻辑点各自去刷新access_token,那么就可能会产生冲突,导致服务不稳定。
    
    公众号可以使用AppID和AppSecret调用本接口来获取access_token。AppID和AppSecret可在微信公众平台官网-开发者中心页中获得(需要已经成为开发者,且帐号没有异常状态)。注意调用所有微信接口时均需使用https协议。
    
    接口调用请求说明
    
    http请求方式: GET
    https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
    参数说明
    
    参数	是否必须	说明
    grant_type	是	获取access_token填写client_credential
    appid	是	第三方用户唯一凭证
    secret	是	第三方用户唯一凭证密钥,即appsecret
    返回说明
    
    正常情况下,微信会返回下述JSON数据包给公众号:
    
    {"access_token":"ACCESS_TOKEN","expires_in":7200}
    参数	说明
    access_token	获取到的凭证
    expires_in	凭证有效时间,单位:秒
    
    错误时微信会返回错误码等信息,JSON数据包示例如下(该示例为AppID无效错误):
    
    {"errcode":40013,"errmsg":"invalid appid"}
    通过以上代码段列出的文本我们很快可以看到,只要传入appid和appsecret以及grant_type这三个参数给列出的url既可以获得返回的access_token这个参数,这里我们不再赘述。

    需要注意的是我在处理这块儿的时候想当然的使用oauth认证的access_token来获取“票据”,最后证明返回一直是invalid,即参数错误是不行的。不行的方式如下:

    Get:
    https://api.weixin.qq.com/sns/oauth2/access_token
    传入:
    appid
    secretid
    以及code
    其中code是微信回调方法传入的,这里我们不再赘述
    事实证明,这种方式获得access_token不能获得“票据”

    必须用以上的以上代码段描述的方式获得。谢谢。

    根据文档描述,在获得代码段后我们就可以生成“签名了”,其中签名的算法如下:

    签名算法
    签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。
    即signature=sha1(string1)。 示例:
    noncestr=Wm3WZYTPz0wzccnW
    jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
    timestamp=1414587457
    url=http://mp.weixin.qq.com?params=value
    步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1:
    jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
    步骤2. 对string1进行sha1签名,得到signature:
    0f9de62fce790f9a083d5c99e95740ceb90c27ed
    以上文本不难理解,认真读取后按照方法做就能获得相应的签名。

    需要注意的是:

    注意事项

    1.签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。

    2.签名用的url必须是调用JS接口页面的完整URL。

    3.出于安全考虑,开发者必须在服务器端实现签名的逻辑。

    以上的1步骤也就回答了signature和noncestr和timestamp的关系。

    至此我们就能争取的配置wx.config,不出意外的情况下,调用“发送给朋友”的接口就能个性化配置分享的试图了。


    这里附上后端生成signature的java实现

    import java.util.UUID;
    import java.util.Map;
    import java.util.HashMap;
    import java.util.Formatter;
    import java.security.MessageDigest;
    import java.security.NoSuchAlgorithmException;
    import java.io.UnsupportedEncodingException;  
    
    class Sign {
        public static void main(String[] args) {
            String jsapi_ticket = "jsapi_ticket";
    
            // 注意 URL 一定要动态获取,不能 hardcode
            String url = "http://example.com";
            Map<String, String> ret = sign(jsapi_ticket, url);
            for (Map.Entry entry : ret.entrySet()) {
                System.out.println(entry.getKey() + ", " + entry.getValue());
            }
        };
    
        public static Map<String, String> sign(String jsapi_ticket, String url) {
            Map<String, String> ret = new HashMap<String, String>();
            String nonce_str = create_nonce_str();
            String timestamp = create_timestamp();
            String string1;
            String signature = "";
    
            //注意这里参数名必须全部小写,且必须有序
            string1 = "jsapi_ticket=" + jsapi_ticket +
                      "&noncestr=" + nonce_str +
                      "×tamp=" + timestamp +
                      "&url=" + url;
            System.out.println(string1);
    
            try
            {
                MessageDigest crypt = MessageDigest.getInstance("SHA-1");
                crypt.reset();
                crypt.update(string1.getBytes("UTF-8"));
                signature = byteToHex(crypt.digest());
            }
            catch (NoSuchAlgorithmException e)
            {
                e.printStackTrace();
            }
            catch (UnsupportedEncodingException e)
            {
                e.printStackTrace();
            }
    
            ret.put("url", url);
            ret.put("jsapi_ticket", jsapi_ticket);
            ret.put("nonceStr", nonce_str);
            ret.put("timestamp", timestamp);
            ret.put("signature", signature);
    
            return ret;
        }
    
        private static String byteToHex(final byte[] hash) {
            Formatter formatter = new Formatter();
            for (byte b : hash)
            {
                formatter.format("%02x", b);
            }
            String result = formatter.toString();
            formatter.close();
            return result;
        }
    
        private static String create_nonce_str() {
            return UUID.randomUUID().toString();
        }
    
        private static String create_timestamp() {
            return Long.toString(System.currentTimeMillis() / 1000);
        }
    }
    





    展开全文
  • 在公众号平台下,自定义菜单,添加菜单,并选择菜单内容跳转到指定页面地址即可(需认证后方可添加页面地址,个人账号暂不支持认证)。 三、开发者模式嵌入网页(通过微信公众平台接口调试工具动态生成菜单) 1、...

    第一部分、为公众号菜单嵌入网页 


    一、关键参考文档

     微信JS-SDK说明文档 。


    二、编辑模式嵌入网页

    在公众号平台下,自定义菜单,添加菜单,并选择菜单内容跳转到指定页面地址即可(需认证后方可添加页面地址,个人账号暂不支持认证)。

    三、开发者模式嵌入网页(通过微信公众平台接口调试工具动态生成菜单)

    1、基础支持中,通过appid和secret获取access_token,该值有效期为7200秒。(Get请求)

    2、自定义创建菜单,填写access_token,发送body作为菜单项Post请求生成菜单,跳转网页的菜单格式如下。

           {
                "type": "view", 
                "name": "我的网页", 
                "url": "http://www.baidu.com"
            }, 


    第二部分、在网页中调用微信接口

    微信提供了众多接口,可以在网页中调用。如调用扫码接口、支付接口、选择图片等接口。要使用这些接口,需要遵从微信开发规则生成签名,并在网页中注入签名。具体可参考微信JS-SDK说明文档,本文使用测试号调用JS-SDK接口过程如下:


    一、绑定域名

    1、通过ngrok内网穿透工具,将80端口映射到公网(命令:ngrok http 80),获取域名。以下图示域名通过nat123工具获取

    2、在公众测试号上配置“JS接口安全域名



    二、生成签名,获取正确权限(具体请查看微信JS-SDK说明文档附录1)

    1、获取access_token(有效期2小时,每日最多生成2000次)。

    通过微信公众平台接口调试工具,填写appid和secret生成。

    2、获取jsap_ticket值(有效期2小时,频繁刷新会导致api调用受限)

    在浏览器中,输入https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi,同时替换access_token值,通过Get请求方式,浏览器会将jsapi_ticket值通过json格式显示出来,ticket字段即所需。错误请检查access_token是否过期,appid和secret是否正确。

    3、获取签名,

    3.1 微信JS-SDK接口文档附录6,提供了java、node、php、python不同版本的签名算法,在本文中,直接获取java版本的Sign类,添加到项目中,用户生成签名。

    3.2 生成签名需要未过期的jsapi_ticket值和页面跳转的url值作为参数,该url应当与菜单跳转中的url一致,url中应该用域名而不是ip地址,否则不能获取权限。

    3.3 通过签名算法,将jsapi_ticket,noncestr, timestamp,url等值存储在map中,我们需要将其动态添加到jsp页面的权限注入代码中。


    三、为test.jsp网页引入js文件,注入权限

    1、引入js文件,<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

    2、在java服务器获取Sign并将必要数据传入jsp页面

    	@RequestMapping("/test")
    	private ModelAndView regist(HttpServletRequest request) throws Exception{
    		ModelAndView mv = new ModelAndView();
    		
    		Map<String, String> sign = sign("regist");
    		mv.addObject("sign", sign);
    		mv.addObject("appid", WxConst.APP_ID);
    		mv.setViewName("test");
    		return mv;
    	}
    	protected Map<String, String> sign(String action) throws Exception {
    		Map<String, String> map = WxConst.mMap;
    
    		String ticket = "jsapi_ticket";
    		String url = "http://12083054.nat123.cc/Test/wx/test";
    		if (null != ticket && !"".equals(url) && null != url && !"".equals(url)) {
    			Map<String, String> sign = Sign.sign(ticket, url);
    			return sign;
    		}
    		return null;
    	}
    3、test.jsp页面获取数据,并动态为jsp注入权限,并是测试号,添加了beta字段,建议开启debug调试模式,jsApiList即是微信所提供的JS-SDK接口。

    <script type="text/javascript">
    		wx.config({
    			beta:true,
    			debug : true,
    			appId : '${appid}',
    			timestamp : ${sign.timestamp},
    			nonceStr : '${sign.nonceStr}',
    			signature : '${sign.signature}',
    			jsApiList : [ 'checkJsApi', 'onMenuShareTimeline',
    					'onMenuShareAppMessage', 'onMenuShareQQ',
    					'onMenuShareWeibo', 'onMenuShareQZone', 'hideMenuItems',
    					'showMenuItems', 'hideAllNonBaseMenuItem',
    					'showAllNonBaseMenuItem', 'translateVoice', 'startRecord',
    					'stopRecord', 'onVoiceRecordEnd', 'playVoice',
    					'onVoicePlayEnd', 'pauseVoice', 'stopVoice', 'uploadVoice',
    					'downloadVoice', 'chooseImage', 'previewImage',
    					'uploadImage', 'downloadImage', 'getNetworkType',
    					'openLocation', 'getLocation', 'hideOptionMenu',
    					'showOptionMenu', 'closeWindow', 'scanQRCode',
    					'chooseWXPay', 'openProductSpecificView', 'addCard',
    					'chooseCard', 'openCard' ]
    		})
    </script/>
    4、在jsp页面中,使用js语法调用微信提供的接口。
    function onScan(){
    	wx.ready(function(){
    		wx.scanQRCode({
    			needResult : 0,
    			scanType : [ "qrCode", "barCode" ],
    			success : function(res) {
    				var result = res.resultStr;
    			}
    		});
    	})
    }
    5、在微信web开发工具中调试,测试签名是否通过、权限是否获取。

    输入测试网址:http://12083054.nat123.cc/Test/wx/test   (此处模拟跳转菜单的url,生成签名的url应当相同),查看”权限列表“


    当可以获取的权限获取成功时,说明网页也可开始调用JS-SDK接口访问了。

    6、未能成功获取权限、可能存在的问题

    6.1、生成签名时,url参数与菜单跳转的url(本文中为微信web开发工具中输入的网址)不一致

    6.2、未引入js文件:<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

    6.3、appid或appsecret错误。

    6.4、access_token已过期,需要重新生成。

    6.5、jsapi_ticket已过期,需要重新生成。

    6.6、内网穿透工具连接失败,需要重新生成域名。配置所有参数

    常规解决思路:1、检查生成签名的url与菜单url是否一致。2、检查接口配置信息域名是否是最新并且正确。 3、重新通过appid和secret获取access_token和jsapi_ticket值并签名(即重新配置所有参数)。


    第三部分:在网页中获取用户信息(关键字段:openid,加密后的微信号,每个用户对每个公众号的openid是唯一的

    一、获取openid

    方案一:通过微信服务器转发消息,获取用户openid

    对于开发者模式,用户操作包括关注公众号、发送消息、点击菜单、绑定设备等操作,都将由微信服务器转发给开发者服务器,通过解析这些消息,可以获取到微信号对应的openid.

    用户发送消息时,读取输入流解析的数据格式如下。

    <xml><ToUserName><![CDATA[gh_3ec4154bc1424]]></ToUserName>
    <FromUserName><![CDATA[oNAmB1M115AqndH0wluCMQQtQsJog]]></FromUserName>
    <CreateTime>1504950429</CreateTime>
    <MsgType><![CDATA[text]]></MsgType>
    <Content><![CDATA[滚滚长江东逝水]]></Content>
    <MsgId>6463712875121877522</MsgId>
    </xml>
    其中,FromUserName字段,即为所需要的openid.
    然而,由于用户数据由微信服务器转发给开发者服务器,该openid只能在接收微信服务的方法(开发都接口信息配置中的方法)中可获取此值。值得注意的是,该方法与开发者的网页并非处于同一会话中,是无法从会话中传递数据给开发者网页的。因此在网页开发过程上,不建议使用此方法获取openid提供给网页使用。

    方案二:微信网页授权获取openid,即Oauth技术.

    1、给微信测试号添加网页授权域名

    在测试号平台的体验接口权限下,选择”网页账号“修改域名。


    2、用户同意授权,获取code。(具体参考微信技术文档->微信网页授权部分)

    在用户跳转页面中,将菜单跳转url修改为:

    https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3efbcdb7f6c647b7&redirect_uri=http://13bbb09b.ngrok.io/Test/wx/test&response_type=code&scope=snsapi_userinfo&state=1&connect_redirect=1#wechat_redirect

    其中appid表示公众号的appid;redicrect_uri为菜单项需要跳转的网页;scope可选择snsapi_base或snsapi_userinfo,state可填写a-zA-Z0-9的参数值。

    3、检测该链接的正确合法性。

    在微信web开发者工具中,输入上述url修改后的值。如果参数正确,调试界面显示如下:


    出现错误时,需针对错误提示进行修改。容易出错点:OAuth授权域名和跳转的url不一致或未配置。

    4、在redirect_uri中获取授权获得的信息,关键参数code参数

    String code = request.getParameter("code")

    5、通过code参数换取网页授权access_token,该值与基础支持中的access_token有差别。同时获取到当前用户的openid值。接口方法如下

    https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

    返回json数据如下:

    { "access_token":"ACCESS_TOKEN",    
     "expires_in":7200,    
     "refresh_token":"REFRESH_TOKEN",    
     "openid":"OPENID",    
     "scope":"SCOPE" } 
    通过以上方法便获取到了用户的openid值,避免了接口配置信息服务器,与网页开发服务器之间数据传递的麻烦。


    二、根据openid获取用户信息

    接口:https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

    其中:access_token为授权过程中,通过code获取的值,不能是基础支持中的值。以下代码未处理空指针异常。用户信息以键值对的形式保存在userinfo_jsonObj中。

    	@RequestMapping("/test")
    	private ModelAndView test() throws Exception{
    		ModelAndView mv = new ModelAndView();
    		
    		//1、调用微信授权界面,拿到code
    		HttpServletRequest request = getRequest();
    		String code = request.getParameter("code");
    		//2、使用code获取access_token,此token与基础支持的token不同。有效期2小时
    		String access_token_url_str = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + WxConst.APP_ID + "&secret=" + WxConst.APP_SECRET + "&code=" + code + "&grant_type=authorization_code";
    		String access_token_json = WxRequest.doGet(new URL(access_token_url_str));
    		JSONObject access_token_jsonObj = JSONObject.fromObject(access_token_json);
    		String access_token = access_token_jsonObj.getString("access_token");
    		String openid = access_token_jsonObj.getString("openid");
    		//3、根据openid获取用户信息
    		String userinfo_url_str = "https://api.weixin.qq.com/sns/userinfo?access_token=" + access_token + "&openid=" + openid;
    		String userinfo_json = WxRequest.doGet(new URL(userinfo_url_str));
    		JSONObject userinfo_jsonObj = JSONObject.fromObject(userinfo_json);
    		
    		mv.setViewName("test");
    		return mv;
    	}
    	public static String doGet(URL url) throws Exception{
    		HttpURLConnection connection = (HttpURLConnection) url.openConnection();
    		StringBuffer sb = new StringBuffer();
    		String line = "";
    		BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream()));
    		if (connection.getResponseCode() == HttpURLConnection.HTTP_OK) {
    			while((line = reader.readLine()) != null){
    				sb.append(line);
    			}
    		}
    		System.out.println(sb.toString());
    		reader.close();
    		connection.disconnect();
    		return sb.toString();
    	}
    最终获取到的用户信息json数据格式如下:

    {    "openid":" OPENID",  
     " nickname": NICKNAME,   
     "sex":"1",   
     "province":"PROVINCE"   
     "city":"CITY",   
     "country":"COUNTRY",    
     "headimgurl":    "",  
    "privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],    
     "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" 
    } 
    展开全文
  • 一、背景:微信开发其实跟web开发并没有太大的分别,在我们进行微信开发的时候,需要调用微信接口的时候(比如获取地理位置,上传图片,拍照等),肯定是需要在微信上操作的,而这时候我们的项目还没有部署到生产上...

    一、背景:微信开发其实跟web开发并没有太大的分别,在我们进行微信开发的时候,需要调用微信接口的时候(比如获取地理位置,上传图片,拍照等),肯定是需要在微信上操作的,而这时候我们的项目还没有部署到生产上,你肯定要看看本地项目的微信调用功能能不能运行吧,我们希望点击微信企业号菜单的按钮,运行的是我们本地的项目。

    我们可以通过代理的方式利用手机调试本地项目。

    二、需要用到Fiddler这个抓包工具,下载地址:http://download.csdn.net/detail/u013142781/9363371

    安装完成后,打开Fiddler,进行如下设置,Tools–>Fiddler Options–>Connections,Allow remote computers to connect 勾选上:

    这里写图片描述

    Fiddler设置完毕,重启Fiddler(记得一定是要重启才能生效哈)。

    三、接下来需要修改hosts文件了,修改hosts文件之前,回到微信企业号菜单的配置,配置菜单的时候是需要设置可信域名的,关于微信企业号菜单配置和可信域名请阅读小宝鸽的另外一篇博客:http://blog.csdn.net/u013142781/article/details/50318181

    比如你在微信配置的菜单为:http://yo.bbdfun.com/first_maven_project/
    然后你的可信域名为:yo.bbdfun.com

    那么打开你的hosts文件,window系统hosts文件目录为:C:\Windows\System32\drivers\etc下
    打开hosts文件,末尾加上这么句:你的电脑ip yo.bbdfun.com

    这里写图片描述

    然后保存,如果保存失败,可能是因为你的当前登录的系统账号没有修改hosts文件的权限。
    因此可以如下操作选中hosts文件,右击,属性然后:

    这里写图片描述

    添加了修改权限之后重新编辑保存即可。

    四、小宝鸽的web项目是部署到tomcat,因此以tomcat为例,需要注意的是我们需要tomcat端口改成80而不是默认的8080,因为微信可信域名只支持80端口,修改方式如下,双击tomcat,修改HTTP/1.1值为80,然后保存,重启服务器就可:

    这里写图片描述

    五、最后一步,手机设置代理,在微信端打开PC本地系统对应的页面。(注意:你的电脑和手机必须是同一个局域网,小宝鸽的电脑和手机是连接着同一个wifi的,所以可以)。

    代理设置,主机:你的电脑ip,端口:8888,如下:

    这里写图片描述

    最后在微信端点击对应菜单(测试)结果如下:

    这里写图片描述


    这里写图片描述

    展开全文
  • 微信公众平台开发之自定义菜单管理是子恒老师《微信公众平台开发》视频教程的第5部。详细讲解了用php开发微信,对微信公众平台中的自定义管理开发。内容包含微信添加菜单,获取自定义菜单配置,删除菜单等等。欢迎...
  • 基于微信的网页开发,![图片说明](https://img-ask.csdn.net/upload/201509/07/1441613000_551636.png) A B D 分别是三个html页面,A中href到B,在B中进行一定的操作后,自动返回到A。在A页面点击返回需要回到D页面...
  • 以前写过一篇《微信公众平台开发的一点收获》,这一篇说说微信公众平台网页开发的知识。微信公众平台应该是国内最大的开放平台,对于技术开发人员来说,不管有没有自己的公众号,应该也要有一定的了解,其实只要有一...
  • 微信公众平台开发之营销开发是子恒老师《微信公众平台开发》视频教程的第8部。详细讲解了用php开发微信,对微信公众平台中的营销功能开发。内容包含获取微信短网址,生成推广二维码,生成推广海报等等。欢迎反馈,...
  • 一、微信网页授权 网页授权流程分为四步,这里只说前端需要做的,其中的第一步:跳转授权页面获取code。...如果你页面中有用到分享、上传图片、微信支付等功能,那么需要先进行js-sdk授权。我...
  • 设置”list”[{ }] 属性 id 顺序 name 编译选择表里的名字 pathname 地址 query 不用填
  • 微信开发时,常常通过微信公众号菜单或微信扫一扫进入移动页面,这个时候如果你修改了对应的CSS或者JS文件,然后在微信里访问修改过后的页面,往往页面效果还会停留在之前的某个版本上,这就是微信页面缓存问题。...
  • 历经了一个月的时间,从开发到审核,我们的微信小程序终于在今天上线了,喜大普奔!因为业务的需求,需要做出携带参数的 小程序指定页面的 二维码,通过微信扫一扫直接进入页面或者启动小程序的某项功能。 因为仅能...
  • 而小程序的特点就是规模小,为了不让用户在使用小程序时造成困扰,微信小程序规定页面路径只能是五层,请尽量避免多层级的交互方式。 页面跳转的话就涉及到了多个页面层级第一种:wx.navigateTo(OBJECT) 保留当前...
  • 微信公众号H5页面开发微信JS-SDK引用 微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时需要用到: 微信JS-SDK。以地理位置...
  • 今天下午突然听到群里有人说微信小程序工具更新了,文档也更新了不少内容. 顾不上吃冬至的饺子.我就冲进来了. 先说分享功能,目前真机尚不能调试.开发工具上可以看看效果.后续还会更新. Page()中加上如下代码后在右...
  • 二、微信开发的基本配置 1.配置IP白名单 2.服务器配置 3.申请测试号 微信公众号开发系列点击查看所有开发文章 一、注册一个微信公众号 关于注册这点我就简单说一下,需要注意的就是,微信公众号一般用的...
  •  微信支付之H5页面WAP端接入2. 微信支付开发系统开发流程及完整Demo展示3. 微信公共服务平台开发Net实现获取Access Token4. 微信公众平台开发文档获取用户地理位置5. 微信公共服务平台开发Net实现解决Access ...
  • Flex布局又称弹性布局,在小程序开发中比较适用。网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便,比如,...
  • 微信小程序页面布局

    2019-05-16 22:56:02
    一,微信小程序页面布局方式采用的是Flex布局 1.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局。 2.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们可以是动态的...
1 2 3 4 5 ... 20
收藏数 36,247
精华内容 14,498