• 一、前言 这次的项目主要是关于微信...在开发过程中会设计到微信接口的调测,这里使用的微信公众号中提供的开发者工具中的在线接口调测和公众平台测试账号。注:微信支付功能不能使用公众平台测试账号测试,必须部署...

    一、前言

       这次的项目主要是关于微信公众号的一个开发,本人这次分配的模块是后台微信公众号的支付和退款,第一次接触微信公众的项目刚开始一脸懵逼,开发过程中遇到各种坑,所以想自己写一篇详细的关于微信公众号的开发,希望能对小伙伴们有所帮助!在开发过程中会设计到微信接口的调测,这里使用的微信公众号中提供的开发者工具中的在线接口调测和公众平台测试账号。注:微信支付功能不能使用公众平台测试账号测试,必须部署到正式环境中测试。

    二、使用方法

    进入到在线接口调试工具页面如下图所示:

    详细介绍:

    1.第一步:选择上图的接口类型为基础支持,输入测试账号分配的appid和secret,点击检测可以获取到AccessToken,如下图所示:

    2.第二步,通过第一步中得到的AccessToken,可以进行其他接口的测试,这里以自定义菜单为例测试。复制第一步中得到的AccessToken到自定义菜单对应的AccessToken位置,然后将事先准备好的菜单复制到body文本框中,然后点击检测,返回OK自定义菜单就设置好了,如下图所示:

    3.第三步,查看自定义菜单,在测试账号管理中找测试二维码,用微信二维码扫描关注测试账号就可以看到自定义菜单了,如下图:

    附自定义菜单格式:

    {
        "button": [
            {
                "name": "便民服务", 
                "sub_button": [
                    {
                        "type": "view", 
                        "name": "个人中心", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appId=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/PersonalInfo&response_type=code&scope=snsapi_base#wechat_redirect"
                    }, 
                    {
                        "type": "view", 
                        "name": "预约挂号", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/li_room&response_type=code&scope=snsapi_base#wechat_redirect"
                    }, 
                    {
                        "type": "view", 
                        "name": "费用支付", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/Clinic&response_type=code&scope=snsapi_base#wechat_redirect"
                    }, 
                    {
                        "type": "view", 
                        "name": "报告查询", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/report&response_type=code&scope=snsapi_base#wechat_redirect"
                    }, 
                    {
                        "type": "view", 
                        "name": "咨询互动", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/xie_consultation&response_type=code&scope=snsapi_base#wechat_redirect"
                    }
                ]
            }, 
            {
                "name": "资料下载", 
                "sub_button": [
                    {
                        "type": "view", 
                        "name": "官方网站", 
                         "url": "http://www.szmbzx.com/"
                    }
                ]
            }
        ]
    }

    三、注意事项

    要想使关注的测试账号能真正的访问到后台,需要在测试管理页面中配置一些参数。

    1.接口信息配置和JS接口安全域名配置

               下图中的域名是使用ngrock代理生成的外网可访问的域名,改域名是免费,但不是很稳定经常容易掉线。

    2.网页授权获取用户基本信息配置

       还是在测试账号管理页面中,往下拉找到网页账号对应的网页授权获取用户基本信息,点击右侧修改,然后数据域名,该域名与第一条中涉及到域名相同,如下图:

     

    有兴趣的朋友可以关注下本人的微信公众号:“JAVA菜鸟程序猿”

     

     

     

    展开全文
  • 1、先引入入口.html文件 参见官网https://uniapp.dcloud.io/collocation/manifest?id=h5-template 2、配置manifest.json 3、运行 4、在微信开发者工具中进行公众号网页调试 ...

    1、先引入入口.html文件
    参见官网https://uniapp.dcloud.io/collocation/manifest?id=h5-template
    2、配置manifest.json


    3、运行

    4、在微信开发者工具中进行公众号网页调试

    展开全文
  • SpringBoot开发微信公众号SpringBoot开发微信公众号注册微信公众号公众号配置合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容...

    SpringBoot开发微信公众号

    本文介绍基于SpringBoot创建、开发微信个人公众号的详细步骤。

    注册微信公众号

    1. 前往微信公众平台https://mp.weixin.qq.com/,点击右上角立即注册,选择订阅号,按照提示进行注册;
    2. 审核没问题的话,你很快就能通过微信搜索到你的公众号了。

    后端代码

    1. 前往https://github.com/atparting/wechat克隆代码;
    2. 根据README打包并部署到你的外网服务器

    公众号配置

    1. 你需要一台 云服务器 ,可以前往腾讯云购买,或者使用内网穿透工具,此处不做详细介绍;
    2. 登陆微信公众平台,下拉,点击基本配置
    3. 服务器配置栏选择修改配置URL填写你的外网地址,注意要带上你的mapping,Token随便写,EncodingAESKey随机生成,消息加解密方式暂时使用明文模式,方便调试;
    4. 点击提交
    5. 提交成功后,点击启用
    6. 现在可以前往微信公众号进行调试了。
    展开全文
  • 利用微信接口调试工具设置公众号个性化菜单微信接口调试工具公众号菜单的json格式示例默认菜单的post接口个性化菜单的post接口如何用接口调试工具添加个性化菜单 微信接口调试工具 在线接口调试工具链接:...

    微信接口调试工具

    在线接口调试工具链接:https://mp.weixin.qq.com/debug。

    公众号菜单的json格式示例

    https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Personalized_menu_interface.html

    默认菜单的post接口

    https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN

    个性化菜单的post接口

    https://api.weixin.qq.com/cgi-bin/menu/addconditional?access_token=ACCESS_TOKEN

    如何用接口调试工具添加个性化菜单

    接口调试工具里并没有添加个性化菜单的选项。添加的菜单全部是默认菜单。会把历史菜单覆盖掉。
    为了实现个性化菜单的添加,需要微调这个接口调试工具。微调方法如下:
    1,在工具页面里,右键选择inspect。
    2,在工具页面选择“自定义菜单”–>“自定义菜单创建接口”–>填入access_token和JSON格式的菜单。
    工具截图
    3,鼠标右键点击inspect,在element中找到form表单。修改create为“addconditional”即可。
    页面代码截图

    其它参考文章

    https://www.w3cschool.cn/weixinkaifawendang/1f8r1qef.html
    https://www.cnblogs.com/txw1958/p/weixin-menu-conditional.html

    展开全文
  • 第一部分、为公众号菜单嵌入网页 一、关键参考文档  微信JS-SDK说明文档 ...三、开发者模式嵌入网页(通过微信公众平台接口调试工具动态生成菜单) 1、基础支持中,通过appid和secret获取access_token,该值有效期为7

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


    一、关键参考文档

     微信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" 
    } 
    展开全文
  • 微信公众号主要有以下几个步骤 微信公众号的通讯机制 微信公众号简介 1.注册微信公众号 2.注册测试公众号 3.搭建微信本地调试环境 1)下载客户端natapp: 2)安装natapp: 4.微信公众号接入(校验签名) 第1步中...
  • 微信公众号主要面向名人、政府、媒体、企业等机构推出的合作推广业务。在这里可以通过微信渠道将品牌推广给上亿的微信用户,减少宣传成本,提高品牌知名度,打造更具影响力的品牌形象。 3. 公众平台 微信公众平...
  • 微信公众号开发之授权登录 1、微信公众号技术开发文档阅读 微信公众号的开发首先对开发文档的阅读,技术版本可能有变化,博客里面的内容一段时间过后,可能就出现有些小问题。 微信公众号技术开发文档:...
  • 过年前后做了个微信公众号项目,已经过去一段时间了,抽空回忆总结下基本流程吧,不然很快估计自己就忘了。。 微信公众平台官网:https://mp.weixin.qq.com 文章目录一、注册公众号二、了解公众号管理页面三、必备...
  • 公众号开发管理平台--小程序-小程序管理 可以通过小程序查看是否已关联 小程序开发平台--设置--关联设置--关联公众号查看 1.小程序中跳转公众号是需要通过web-view组件实现(官方地址:...
  • 微信小程序和微信公众号有什么区别? 1、定位不同(公众号服务于营销与信息传递,小程序面向产品与服务) 公众号主要用于信息的传递实现人与信息的连接,借助H5 能够实现简单的交互,主要以营销和信息传递为主...
  • 工作描述:微信公众号订阅号开发抽奖相关页面软件环境:WebStrom ,微信开发者工具v0.7.0等开发工具项目描述:订阅号添加抽奖页面 1、用户每天三次机会进行抽奖,奖品概率数量可控,存取用获奖奖品,存取用户输入的...
  • 因为接下来要实现微信公众号的自定义菜单需要access_token,而且菜单的URl跳转第三方网页也要用到。 一、access_token简介 为了使第三方开发者能够为用户提供更多更有价值的个性化服务,微信公众平台 开放了许多...
  • 二、微信开发的基本配置 1.配置IP白名单 2.服务器配置 3.申请测试号 微信公众号开发系列点击查看所有开发文章 一、注册一个微信公众号 关于注册这点我就简单说一下,需要注意的就是,微信公众号一般用的...
  • 微信公众号开发教程(一)验证接入本篇文章主要介绍了微信公众号开发接入详细流程,希望对刚接触公众号开发的同学有所帮助,有兴趣的同学可多多关注叩丁狼公众号,后续会更新不同的公众号小案例。公众号的分类我们平常...
  • 前段时间公司电商项目需要接入微信支付,因此研究了一下如何使用微信支付。和支付宝支付相比,微信支付相对复杂一些,需要配置的东西更多,限制也更多。经过两天的研究,终于搞定微信支付,在这里对于使用微信支付的...
  • 全书由目 Senparc.Weixin SDK 作者苏震巍历时 2 年完成,涵盖了开发微信公众号及小程序需要用的的各项后端开发技能、技巧、避坑提示,以及 Senparc.Weixin SDK 微信公众号及小程序模块全面的使用说明及原理剖析。...
  • 微信公众号开发之配置开发服务器 微信公众号开发之获取access_token 微信公众号开发之关键词回复 微信公众号开发之模板消息 微信公众号开发之授权回调 ...
  • 微信公众号开发技术要点 微信公众号开发技术要点 微信公众号及其接口功能介绍 基本概念 公众号开发者模式 代码验证及图示 Open ID与Union ID 基本概念 使用说明 Access_token 基本介绍 注意事项 获取流程 ...
1 2 3 4 5 ... 20
收藏数 48,843
精华内容 19,537