微信小程序和微信公众号（H5）开发总结

做小程序和公众号开发1年多了，遇到一些坑，总结下：

1，最近基于微信公众号开发H5时，线上环境和测试环境问题，微信提供了开发者工具-公众平台测试帐号的功能，但是我们的项目是要获取unionid，通过unionid打通公众号H5和小程序的数据，但要获取unionid，需要把公众号绑定到开放平台下，微信提供的测试账号无法绑定到微信开放平台下，所以这个功能的测试会受限制

解决方案：一年多申请过3个公众号，拿其中另一个公众号，创建菜单，并绑定到微信开放平台下，做测试，unionid可以正常获取，各个测试场景都可以测试到位。

另外，用测试公众号开发的过程中，除了unionid没法正常获取外，其余的功能可以正常联调，点击菜单的过程中因为有菜单点击，会报没有网页授权权限，这个解决办法

是需要点击测试账号中的网页授权接口的修改，如下：

微信小程序和微信公众号（H5）开发总结

{
"button":[
{
"name":"营销素材",
"sub_button":[
{
"type": "miniprogram",
"name": "营销素材",
"url": "pages/tabs/tabs",
"appid": "",
"pagepath": "pages/tabs/tabs"
},
{
"type": "view",
"name": "购买会员",
"url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=&redirect_uri=https%3A%2F%2F%2Fsucaigzh%2Findex.html&response_type=code&scope=snsapi_base&state=123&connect_redirect=1#wechat_redirect"
}]
},
{
"type":"view",
"name":"招聘相册",
"url":"https://open.weixin.qq.com/connect/oauth2/authorize?appid=&redirect_uri=https%3A%2F%2F%2Fzp%2Findex.html&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect"
}
]
}

2，微信公众号H5开发的分享到朋友圈的过程中，一直报config:fail,Error: 系统错误，错误码：63002。根本原因是url是前台每次都要传给后端接口，因为前端菜单点击时，code每次都会变化，后台如果写死，会导致签名用的code跟前端传给微信的code不一致

解决方案：后台动态获取url，

@ApiOperation("招聘相册城市列表")
   @RequestMapping(value = "/share", method = {RequestMethod.GET,RequestMethod.POST})
   public ResultDTO<List<ZpJob>> photoCityList(HttpServletRequest request) {
       try {
           long time = System.currentTimeMillis();
           log.info("PhotoController photoCityList started...");
           Map<String,Object> result = new HashMap<String,Object>();
//           JSONObject config = JSConfig(request);
//           result.put("appId", config.getString("appId"));
//           result.put("timestamp", config.getString("timestamp"));
//           result.put("nonceStr", config.getString("nonceStr"));
//           result.put("signature", config.getString("signature"));


           //2、获取Ticket
       String jsapi_ticket = tokenUtils.getJSTicket();;

       //3、时间戳和随机字符串
       String noncestr = UUID.randomUUID().toString().replace("-", "").substring(0, 16);//随机字符串
       String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//时间戳

       System.out.println("jsapi_ticket:"+jsapi_ticket+"\n时间戳："+timestamp+"\n随机字符串："+noncestr);

       //4、获取url
//       String url="https%3A%2F%2Fqingzhu.kdaren.com%2FzpTest%2Findex.html%3Fcode%3D011eD50003FJFK1qw0200s4XuG1eD50L%26state%3DSTATE";
//       url = URLDecoder.decode(url);
       String url = request.getParameter("url").trim();
       url = URLDecoder.decode(url);
       /*根据JSSDK上面的规则进行计算，这里比较简单，我就手动写啦
       String[] ArrTmp = {"jsapi_ticket","timestamp","nonce","url"};
       Arrays.sort(ArrTmp);
       StringBuffer sf = new StringBuffer();
       for(int i=0;i<ArrTmp.length;i++){
       sf.append(ArrTmp[i]);
       }
       */

       //5、将参数排序并拼接字符串
       String str = "jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url;

       //6、将字符串进行sha1加密
       String signature =SHA1(str);

           result.put("appId", appid);
           result.put("timestamp", timestamp);
           result.put("nonceStr", noncestr);
           result.put("signature", signature);
       System.out.println("参数："+str+"\n签名："+signature);
           log.info("PhotoController photoCityList Method:cost time {}", System.currentTimeMillis() - time);
           return new ResultDTO().ok(result);
       } catch (Exception e) {
           e.printStackTrace();
           log.error("招聘相册城市列表查询失败", e);
           return new ResultDTO().error("招聘相册城市列表查询失败");
       }
   }

   public static String SHA1(String decript) {
   try {
   MessageDigest digest = java.security.MessageDigest.getInstance("SHA-1");
   digest.update(decript.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 "";
   }

秒客网

微信小程序和微信公众号（H5）开发总结

相关文章