微信网页开发实践与总结

最新项目需要,开发微信端应用,用到微信生成菜单访问web应用,实际开发中一些技巧与大家分享,不足之处,欢迎交流指正!

一:注册微信开发测试账号

微信企业号申请比较繁琐,好找有微信测试账号,几乎可以开发微信全部的API

访问地址:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

微信扫描登录即可

此时你会得到一个appID 和 appsecret

二:配置外网服务器

   微信开发,必须将项目部署到外网并且端口必须为80,这里为大家推荐非常优秀的外网映射工具natapp.exe,免费版直接双击即可

此时就可以外网访问你的工程了

三:签名校验

实际开发中要创建一个servlet,并在get方法中接收微信服务器发送来的参数,代码如下:

/**
* 确认请求来自微信服务器
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("开始校验签名");
/**
* 接收微信服务器发送请求时传递过来的4个参数
*/
String signature = request.getParameter("signature");//微信加密签名signature结合了开发者填写的token参数和请求中的timestamp参数、nonce参数。
String timestamp = request.getParameter("timestamp");//时间戳
String nonce = request.getParameter("nonce");//随机数
String echostr = request.getParameter("echostr");//随机字符串
if(signature==null||"".equals(signature)){
response.getWriter().write("error");
return;
}
//排序
String sortString = sort(TOKEN, timestamp, nonce);
//加密
String mySignature = sha1(sortString);
//校验签名,通过检验signature对请求进行校验,若校验成功则原样返回echostr,表示接入成功,否则接入失败
if (mySignature != null && mySignature != "" && mySignature.equals(signature)) {
System.out.println("签名校验通过。");
//如果检验成功输出echostr,微信服务器接收到此输出,才会确认检验完成。
//response.getWriter().println(echostr);
response.getWriter().write(echostr);
} else {
System.out.println("签名校验失败.");
}

}

/**
* 排序方法
*
* @param token
* @param timestamp
* @param nonce
* @return
*/
public String sort(String token, String timestamp, String nonce) {
String[] strArray = {token, timestamp, nonce};
Arrays.sort(strArray);
StringBuilder sb = new StringBuilder();
for (String str : strArray) {
sb.append(str);
}

return sb.toString();
}

/**
* 将字符串进行sha1加密
*
* @param str 需要加密的字符串
* @return 加密后的内容
*/
public String sha1(String str) {
try {
MessageDigest digest = MessageDigest.getInstance("SHA-1");
digest.update(str.getBytes());
byte messageDigest[] = digest.digest();
// Create Hex String
StringBuffer hexString = new StringBuffer();
// 字节数组转换为 十六进制 数
for (int i = 0; i < messageDigest.length; i++) {
String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);
if (shaHex.length() < 2) {
hexString.append(0);
}
hexString.append(shaHex);
}
return hexString.toString();

} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
}
return "";
}

并且在微信页面配置你的URL(映射到外网的url)和token(随意字符串)

点击提交即可,如果工程提示“签名正确”则配置成功!

四:获取accessToken

可以通过本地工程来获取accessToken,获取方法如下:

/**
* 获取access_token
* @return AccessToken
*/
private AccessToken getAccessToken(String appId, String appSecret) {
NetWorkHelper netHelper = new NetWorkHelper();
/**
* 接口地址为https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET ,其中grant_type固定写为client_credential即可。
*/
String Url = String.format("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=%s&secret=%s", appId, appSecret);
//此请求为https的get请求,返回的数据格式为{"access_token":"ACCESS_TOKEN","expires_in":7200}
String result = netHelper.getHttpsResponse(Url, "");
System.out.println("获取到的access_token="+result);
//使用FastJson将Json字符串解析成Json对象
JSONObject json = JSON.parseObject(result);
AccessToken token = new AccessToken();
token.setAccessToken(json.getString("access_token"));
token.setExpiresin(json.getInteger("expires_in"));
return token;
}

当然,有更简单的方式,通过微信在线调试,依然可以轻松获取到accessToken,方式如下:

访问http://mp.weixin.qq.com/debug/,输入你的本地appid和acceptid

点击“检测问题”,即可看到生成的access_token 了,如下:

拥有了这个access_token , 你就可以进一步做开发了

:生成微信菜单

你可以通过java类生产微信菜单,也可以通过在线调试的方式快速生成,这里主要介绍在线调试方式,非常简单:

①:访问:http://mp.weixin.qq.com/debug/,选择“自定义”菜单下拉选项,输入你刚才生成的access_token, 输入菜单json,点击检测问题即可

json如下:

{
"button": [
{
"name": "云平台",
"sub_button": [
{
"type": "view",
"name": "平台设计",
"url": "http://www.soso.com/"
},
{
"type": "click",
"name": "平台功能",
"key": "V1001_GOOD"
}
]
},
{
"name": "我的信息",
"sub_button": [
{
"type": "view",
"name": "基本信息",
"url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的appid&redirect_uri=http://25f6e75e.ngrok.natapp.cn/wxweb/info.htm&response_type=code&scope=snsapi_base&state=123#wechat_redirect"
},
{
"type": "view",
"name": "学习经历",
"url": "http://v.qq.com/"
},
{
"type": "click",
"name": "工作经历",
"key": "V1001_GOOD"
}
]
},
{
"name": "找资源",
"sub_button": [
{
"type": "view",
"name": "搜索",
"url": "http://www.soso.com/"
},
{
"type": "view",
"name": "视频",
"url": "http://v.qq.com/"
},
{
"type": "click",
"name": "赞一下我们",
"key": "V1001_GOOD"
}
]
}
]
}

 配置菜单url时需要特别注意:通过微信访问网页需要获取授权,所以访问路径必须按照如下方式,否则是无法打开网页的:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的appid&redirect_uri=http://25f6e75e.ngrok.natapp.cn/wxweb/info.htm&response_type=code&scope=snsapi_base&state=123#wechat_redirect

详细参照微信开发文档:http://mp.weixin.qq.com/wiki/4/9ac2e7b1f1d22e9e57260f6553822520.html

:关注该公众号,请求网页

扫描你的测试账号二维码即可

:微信开发调试工具

 使用微信官方提供的开发调试工具wechat_web_devtools_0.7.0_x64.exe,可以轻松通过浏览器调试微信应用

下班了,先写到这里,以后有时间继续完善,有问题的朋友可以加我Q 2529771715交流学习

时间: 2024-10-14 05:43:03

微信网页开发实践与总结的相关文章

10天学会phpWeChat——第十天:phpWeChat的会员注册、登录以及微信网页开发

通过前面的系列教程,我们系统的讲解了phpWeChat从视图端.控制器端到模型端的操作流程:熟悉了phpWeChat的目录结构:掌握了视图端模板如何创建一个丰富的表单和模型端如何操作数据库.这一切都是传统Web以及现代H5开发的核心. 我们今天进行<10天学会phpWeChat>教程的最后一讲,phpWeChat的微信网页开发.在这一讲里,我们将重点讲解在微信网页开发中几个常见参数的获取和一个微信扫一扫的实例. 一.微信网页开发中的几个重要参数(文档参考:https://mp.weixin.q

微信网页开发

微信网站一般是先要微信网页授权后获取到access_token,才有资格获取用户信息的,所以如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 第一步是先获取用户授权(具体的请看微信开发者文档): 授权也分两种:静态授权和手动授权: 关于网页授权的两种scope的区别说明 1.以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的.用户感知的就是直接进入了回调页(往

微信网页开发没有备案域名怎么办?【仅供线下测试使用】

大家都知道微信JS-SDK使用第一步就是绑定“JS接口安全域名”, 微信明确规定填写的域名须通过ICP备案的验证. 但是很多像我这样的普通程序员就只是想学习学习微信开发,只需要在局域网能可以玩就行了, 根本不需要服务器,更何况网站备案呢. 所以接下来介绍一种本地开发微信,手机局域网内的可以使用调试的配置. 本地环境:Windows系统+IIS部署网站 按照JSSDK使用步骤开始(https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421

微信网页开发之获取用户unionID的两种方法--基于微信的多点登录用户识别

假设网站A有以下功能需求:1,pc端微信扫码登录:2,微信浏览器中的静默登录功能需求,这两种需求就需要用到用户的unionID,这样才能在多个登录点(终端)识别用户.那么这两种需求下用户的unionID该如何获取呢? 1,先看pc端的解决方案 以snsapi_login为scope发起网页授权,先拿网站应用的appid和secret用授权接口获取"网页授权access_token",再利用"网页授权access_token"通过"拉取用户信息的api接口&

微信公众号开发 (微信网页开发)

微信支付搞完之后,也开始了微信其他功能,不得不说,微信写得接口都比较齐全和标准,附上微信公众号开发文档链接,仔细阅读,必须严格按照其规则,才能调用微信的接口. 最近做了一个手机端调用微信接口打开摄像头进行扫描二维码功能和调用上传下载图片的接口,注意,在微信公众号配置要注意,[开发]-[接口权限] 查看对应的接口权限是开通了没有?最主要的是,还要在[公众号设置]-[功能设置]-[JS接口安全域名]配置,切记,一定是备案过的,一级二级都可以. 附上图片: 配置完此项之后,还有个地方需要配置的,需要特

.Net微信网页开发之使用微信JS-SDK调用微信扫一扫功能

前言: 之前有个项目需要调用微信扫描二维码的功能,通过调用微信扫码二维码功能,然后去获取到系统中生成的二维码信息.正好微信JS-SDK提供了调用微信扫一扫的功能接口,下面让我们来看看是如何实现的吧. 第一步.微信JS-SDK的使用步骤,配置信息的生成获取讲解: 关于JS-SDK的使用步骤和timestamp(时间戳),nonceStr(随机串),signature(签名),access_token(接口调用凭据)生成获取的详细说明在这里:https://www.cnblogs.com/Can-d

Net微信网页开发之使用微信JS-SDK获取当前地理位置

前言: 前段时间有一个关于通过获取用户当前经纬度坐标,计算出该用户距离某指定地点之间的距离.因为做这个项目需要能够获取到比较精确的经纬度坐标,刚开始使用的是百度地图结果发现百度地图地位不太准确(有时候相差的比较的大,后来了解到了百度获取用户经纬度与用户当前使用的网络有很大的关系),后来换成了高德地图结果还是一样.最后我想刚好做的是个微信网站项目,为什么不使用微信自带接口呢?所以最后使用了微信JS-SDK来获取用户当前地理位置的接口. 微信JS-SDK的使用步骤,配置信息的生成获取讲解: 关于JS

微信网页授权认证获取用户的详细信息,实现自动登陆-微信公众号开发干货

原创声明:本文为本人原创作品,绝非他处转账,转载请联系博主 从接触公众号到现在,开发维护了2个公众号,开发过程中遇到很多问题,现在把部分模块功能在这备案一下,做个总结也希望能给其他人帮助 工欲善其事,必先利其器,先看看开发公众号需要准备或了解什么 web开发工具:官方提供的开发工具,使用自己的微信号来调试微信网页授权.调试.检验页面的 JS-SDK 相关功能与权限,模拟大部分 SDK 的输入和输出.下载地址:web开发工具下载 开发文档:https://mp.weixin.qq.com/wiki

java微信开发API解析(七)-网页开发-微信网页授权

java微信开发API解析(七)-网页开发-微信网页授权 全局说明 * 详细说明请参考前两篇文章. 本文说明 本文主要完成获取用户基本信息的工作,包括(昵称.头像.地址.国家等基本信息) 对于snsapi_base和snsapi_userinfo我们只演示关于snsapi_userinfo.因为snsapi_userinfo更难,如果能够理解snsapi_userinfo,那么snsapi_base不在话下. 对于该部分(微信网页开发)我们只介绍如何获取用户基本信息,对于开发样式库,js-SDK