AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:02:43

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:暗潮:微信小程序实战第一弹:虐狗结婚证
相关的资讯,希望对您有帮助。

暗潮:微信小程序实战第一弹:虐狗结婚证

本文作者:暗潮,来自授权地址开发环境及框架后端:国产java极速框架JFinal(超级好用有木有啊)前端:WEUI WXSS版(微信团队出品的,自己写样式不管怎么写都丑啊)数据库:MySQL服务器:Linux Nginx Tomcat开发流程 ...

本文作者:暗潮,来自授权地址

开发环境及框架

  1. 后端:国产java极速框架JFinal(超级好用有木有啊)
  2. 前端:WEUI WXSS版(微信团队出品的,自己写样式不管怎么写都丑啊)
  3. 数据库:MySQL
  4. 服务器:Linux Nginx Tomcat

开发流程

  1. 用户打开小程序后,本程序获取用户的昵称,头像展示在前台
  2. 用户输入姓名后,系统根据用户的openid生成结婚证图片链接(重复生成自动覆盖上一张)
  3. 判断如果是在开发者工具里面运行。则提示需找我获取体验资格。

后端关键代码详情

2个方法,一个是接收前台传入的参数生成图片并返回处理结果的,一个是获取用户openid时候的前置请求

  1. private static final WeixinInfo weixinInfo = WeixinInfo.dao.getWeixinInfoById(5);
  2. /**
  3. * 创建一个接口,用户需传递姓名和微信openid
  4. * 每个用户只能创建一张(为服务器考虑,重复生成则覆盖上一张)
  5. * 返回结果有failok两种
  6. */
  7. public void getMarryPic() {
  8. Map map = new HashMap<>();
  9. String result = fail;
  10. String openid = getPara(openid);
  11. String name = getPara(name);
  12. if (name != null && !name.equals()) {
  13. ImgMarkUtil.mark(getRequest().getServletContext().getRealPath(/) + /jiehun/yuan2.jpg, getRequest().getServletContext().getRealPath(/) + jiehun/ + openid + .jpg, name);
  14. result = ok;
  15. map.put(imgurl, weixinInfo.get(host) + /jiehun/ + openid + .jpg);
  16. }
  17. map.put(result, result);
  18. renderJson(map);
  19. }
  20. public void getWxCode() {
  21. String js_code = getPara(js_code);
  22. String alipayURL = https://api.weixin.qq.com/sns/jscode2session?;
  23. renderText(HttpUtils.post(alipayURL, appid= + weixinInfo.get(appid) + &secret= + weixinInfo.get(appsecret)
  24. + &grant_type=authorization_code + &js_code= + js_code));
  25. }

通过读取本地原图片,把用户传入的姓名弄成水印附在图片上,随后根据openid生成文件名。

  1. public static void mark(String srcImgPath, String outImgPath, String waterMarkContent) {
  2. try {
  3. // 读取原图片信息
  4. File srcImgFile = new File(srcImgPath);
  5. Image srcImg = ImageIO.read(srcImgFile);
  6. int srcImgWidth = srcImg.getWidth(null);
  7. int srcImgHeight = srcImg.getHeight(null);
  8. // 加水印
  9. BufferedImage bufImg = new BufferedImage(srcImgWidth, srcImgHeight, BufferedImage.TYPE_INT_RGB);
  10. Graphics2D g = bufImg.createGraphics();
  11. g.drawImage(srcImg, 0, 0, srcImgWidth, srcImgHeight, null);
  12. Font font = new Font(Songti TC, Font.PLAIN, 22);
  13. g.setColor(Color.GRAY); //根据图片的背景设置水印颜色
  14. g.setFont(font);
  15. int x = srcImgWidth - getWatermarkLength(waterMarkContent, g) - 3;
  16. int y = srcImgHeight - 3;
  17. g.drawString(waterMarkContent, 222, 213);
  18. SimpleDateFormat dateFormat = new SimpleDateFormat(yyyy年MM月dd日);
  19. String dateString = dateFormat.format(new Date());
  20. g.drawString(dateString, 222, 310);
  21. g.drawString(J421122-2, 242, 403);
  22. g.dispose();
  23. // 输出图片
  24. FileOutputStream outImgStream = new FileOutputStream(outImgPath);
  25. ImageIO.write(bufImg, jpg, outImgStream);
  26. outImgStream.flush();
  27. outImgStream.close();
  28. } catch (Exception e) {
  29. e.printStackTrace();
  30. }
  31. }

小程序代码

index.js

  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5. data: {
  6. imgurl: ,
  7. userInfo: {},
  8. openid: ,
  9. username: ,
  10. imagehide:true
  11. }, nameChange: function (e) {
  12. this.setData({
  13. username: e.detail.value
  14. })
  15. },
  16. makeit: function () {
  17. var that = this;
  18. if ( app.isnull(this.data.username)) {
  19. app.alert(姓名必填哦);
  20. }else if(app.isnull(this.data.openid)){
  21. app.alert(本程序需要获取微信昵称头像,故在开发者工具上无法运行,只能在实体机上进行体验。请加QQ群560656394获取体验资格);
  22. } else {
  23. wx.request({
  24. url: https://www.0713jc.com/wx/getMarryPic,
  25. data: { name: this.data.username, openid: this.data.openid },
  26. method: GET,
  27. success: function (res) {
  28. var timestamp = new Date().getTime();
  29. that.setData({
  30. imgurl: res.data.imgurl + ?t= + timestamp,
  31. imagehide:false
  32. })
  33. }
  34. })
  35. }
  36. },
  37. onLoad: function () {
  38. var that = this;
  39. wx.login({
  40. success: function (res) {
  41. if (res.code) {
  42. //发起网络请求
  43. wx.request({
  44. url: https://www.0713jc.com/wx/getWxCode,
  45. data: {
  46. js_code: res.code
  47. }, success: function (res) {
  48. var openid = res.data.openid;
  49. wx.getUserInfo({
  50. success: function (res) {
  51. var userInfo = res.userInfo
  52. that.setData({
  53. userInfo: userInfo,
  54. openid: openid
  55. })
  56. }
  57. })
  58. }
  59. })
  60. } else {
  61. console.log(获取用户登录态失败! + res.errMsg)
  62. }
  63. }
  64. });
  65. }, tobig: function () {
  66. var that = this;
  67. wx.previewImage({
  68. urls: [that.data.imgurl] // 需要预览的图片http链接列表
  69. })
  70. }
  71. })

为了简洁易读,没有放表现层的一些东西,所有的源代码我放在服务器了。

地址是:http://www.czcczc.cc/lgjhz.zip

注意:出于图片生成对服务器的消耗,本小程序默认不能在开发者工具上直接运行,要体验可以加群QQ:560656394,提供临时真机体验资格(说得好像很值钱的样子,实际上免费提供)。


28阅读 | 0评论
你的回应
写文章

6996