微信公众号开发感觉比较火,我的理解就是h5的页面,通过微信公众号的菜单管理添加url进行连接,但是并不是只要原本可用的,通过url之后依然可用,并且js的引用上也存在路径差异,今天想聊聊的就是这个问题:如何将原本的h5项目,再使用微信公众号的形式展示
一,你要有一个h5开发的已完成的项目(不多说)
二,已经认证过的公众号(公司商务会做的,一般,没有的话忙就自己弄,认证需要交钱)此时,你已经拥有微信给你的一 个appid和一个秘钥,下边,我们就可以慢慢尝试着按照文档来了
三,问题多出现在这里
1,开始以为要做自主菜单开发,看文档和百度发现需要微信服务器验证,虽然没有用到,但是也可以拿出来的,说白了就是用户是通过微信来访问,但是内容是你来提供的,还是你的服务器来干活,但是要过微信那关,所以微信认证服务器就可以来
public static final String TOKEN = "自定义token*";
@RequestMapping("/doGet")
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println(TOKEN);
try {
// 开发者提交信息后,微信服务器将发送GET请求到填写的服务器地址URL上,GET请求携带参数
String signature = request.getParameter("signature");// 微信加密签名(token、timestamp、nonce。)
String timestamp = request.getParameter("timestamp");// 时间戳
String nonce = request.getParameter("nonce");// 随机数
String echostr = request.getParameter("echostr");// 随机字符串
PrintWriter out = response.getWriter();
// 将token、timestamp、nonce三个参数进行字典序排序
String[] params = new String[] { TOKEN, timestamp, nonce };
Arrays.sort(params);
// 将三个参数字符串拼接成一个字符串进行sha1加密
String clearText = params[0] + params[1] + params[2];
String algorithm = "SHA-1";
String sign = new String(
Hex.encodeHex(MessageDigest.getInstance(algorithm).digest((clearText).getBytes()), true));
// 开发者获得加密后的字符串可与signature对比,标识该请求来源于微信
if (signature.equals(sign)) {
response.getWriter().print(echostr);
}
} catch (Exception e) {
e.printStackTrace();
}
}
String signature = request.getParameter("signature");// 微信加密签名(token、timestamp、nonce。)
String timestamp = request.getParameter("timestamp");// 时间戳
String nonce = request.getParameter("nonce");// 随机数
String echostr = request.getParameter("echostr");// 随机字符串
以上参数均为请求时微信返回的参数,不用考虑,到这里你的服务器和微信的服务器就有了验证,自己的项目部署了以后,在测试的二维码扫扫后就可以看到自定义的内容了
下边才是我要说的东西,上边的现在看是没什么困难,可我其实还是看了很久的
。。。。。。。。。。。。。。。。。。。。。。。
第一,我们网页授权的时候,是有一个url嵌到微信的网页里的,当我们点击进入微信公众号后,微信会返回一个code给我们只能用一次5分钟有效,拿到code后就可以获得openid或者微信关注的用户信息,取决于授权的方式
这里微信文档是有说明的,很详细的参照,今天我就简单说下,
微信网页内嵌的url是。。。。算了参考这个文档吧
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
里边很详细的授权方式和获得信息是不同的
js获取微信返回的code是很简单的
var code = Tools.getQueryString('code');
哈哈,Tools。我也给你
var Tools = {
getQueryString:function(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
},
isNull:function(str){
if(str!=null){
str = str.replace(/\s/g,'');
if(str==''||str==undefined){
return true;
}else{
return false;
}
}else{
return true;
}
}
}
获取到code后还有一步关键,文档给的链接也清楚,我直接上代码
/**
* 根据code去请求openId
* @author wf
*/
@RequestMapping("/getOpenIdByCode")
public void getOpenIdByCode(String code,String appid,String secret,HttpServletResponse response){
String urlstr = "https://api.weixin.qq.com/sns/oauth2/access_token?appid="+appid+"&secret="+secret+"&code=" + code + "&grant_type=authorization_code";
String str = Tools.myHttpGetConnection(urlstr);
System.out.println(str);
response.setContentType("application/json");
try {
PrintWriter out = response.getWriter();
out.write(str.toString());
} catch (IOException e) {
e.printStackTrace();
}
}
说来就来,这样微信返回的数据包我们就有了,接着解析一下
{ "access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE" }
好了,我们是不是可以拿到openid了呢
//微信公众号进入时,获取weixinopenid
getWXOpenIdByCode:function () {
var code = Tools.getQueryString('code');
var appid ="88888888";
var secret = "sssssssssssssssssssssss";
if(code=="" || code==null){
plus.nativeUI.alert("系统错误,请稍后再试~");
}else{
//alert(":"+code)
$.ajax({
url : url1 + "/WXGetInfo/getOpenIdByCode",
data:{"appid":appid,"secret":secret,"code":code},
type: 'post',
dataType: 'json',
async: false,
success: function(data) {
if(data == undefined || data == null || data.openid == undefined || data.openid == null) {
plus.nativeUI.alert("没有获取wxopenid");
} else {
//alert(data.openid);
window.localStorage.setItem("wxopenId",data.openid);
}
}
})
}
取到openid了,然后自己是存在本地还是和用户id关联就看自己了,
到这里基本就没有什么了,我是在项目中遇到了,初次试水,如有不合理的地方还请赐教,如果也可以为新手奉献一些思路那是最好不过的了