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

开发环境及框架

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

开发流程

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

后端关键代码详情

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

 private static final WeixinInfo weixinInfo = WeixinInfo.dao.getWeixinInfoById(5);
    /**
     * 创建一个接口，用户需传递姓名和微信openid
     * 每个用户只能创建一张（为服务器考虑，重复生成则覆盖上一张）
     * 返回结果有fail和ok两种
     */
    public void getMarryPic() {
        Map map = new HashMap<>();
        String result = "fail";
        String openid = getPara("openid");
        String name = getPara("name");
        if (name != null && !name.equals("")) {
            ImgMarkUtil.mark(getRequest().getServletContext().getRealPath("/") + "/jiehun/yuan2.jpg", getRequest().getServletContext().getRealPath("/") + "jiehun/" + openid + ".jpg", name);
            result = "ok";
            map.put("imgurl", weixinInfo.get("host") + "/jiehun/" + openid + ".jpg");
        }
        map.put("result", result);
        renderJson(map);
    }
    public void getWxCode() {
        String js_code = getPara("js_code");
        String alipayURL = "";
        renderText(HttpUtils.post(alipayURL, "appid=" + weixinInfo.get("appid") + "&secret=" + weixinInfo.get("appsecret")
                + "&grant_type=authorization_code" + "&js_code=" + js_code));
    }

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

public static void mark(String srcImgPath, String outImgPath, String waterMarkContent) {
        try {
            // 读取原图片信息
            File srcImgFile = new File(srcImgPath);
            Image srcImg = ImageIO.read(srcImgFile);
            int srcImgWidth = srcImg.getWidth(null);
            int srcImgHeight = srcImg.getHeight(null);
            // 加水印
            BufferedImage bufImg = new BufferedImage(srcImgWidth, srcImgHeight, BufferedImage.TYPE_INT_RGB);
            Graphics2D g = bufImg.createGraphics();
            g.drawImage(srcImg, 0, 0, srcImgWidth, srcImgHeight, null);
            Font font = new Font("Songti TC", Font.PLAIN, 22);
            g.setColor(Color.GRAY); //根据图片的背景设置水印颜色
            g.setFont(font);
            int x = srcImgWidth - getWatermarkLength(waterMarkContent, g) - 3;
            int y = srcImgHeight - 3;
            g.drawString(waterMarkContent, 222, 213);
            SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy年MM月dd日");
            String dateString = dateFormat.format(new Date());
            g.drawString(dateString, 222, 310);
            g.drawString("J421122-2", 242, 403);
            g.dispose();
            // 输出图片
            FileOutputStream outImgStream = new FileOutputStream(outImgPath);
            ImageIO.write(bufImg, "jpg", outImgStream);
            outImgStream.flush();
            outImgStream.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

小程序代码

index.js

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    imgurl: "",
    userInfo: {},
    openid: "",
    username: "",
    imagehide:true
  }, nameChange: function (e) {
    this.setData({
      username: e.detail.value
    })
  },
  makeit: function () {
    var that = this;
    if ( app.isnull(this.data.username)) {
      app.alert("姓名必填哦");
    }else if(app.isnull(this.data.openid)){
      app.alert("本程序需要获取微信昵称头像，故在开发者工具上无法运行，只能在实体机上进行体验。请加QQ群560656394获取体验资格");
    } else {
      wx.request({
        url: ',
        data: { name: this.data.username, openid: this.data.openid },
        method: 'GET',
        success: function (res) {
          var timestamp = new Date().getTime();
          that.setData({
            imgurl: res.data.imgurl + "?t=" + timestamp,
            imagehide:false
          })
        }
      })
    }
  },
  onLoad: function () {
    var that = this;
    wx.login({
      success: function (res) {
        if (res.code) {
          //发起网络请求
          wx.request({
            url: ',
            data: {
              js_code: res.code
            }, success: function (res) {
              var openid = res.data.openid;
              wx.getUserInfo({
                success: function (res) {
                  var userInfo = res.userInfo
                  that.setData({
                    userInfo: userInfo,
                    openid: openid
                  })
                }
              })
            }
          })
        } else {
          console.log('获取用户登录态失败！' + res.errMsg)
        }
      }
    });
  }, tobig: function () {
    var that = this;
    wx.previewImage({
      urls: [that.data.imgurl] // 需要预览的图片http链接列表
    })
  }
})

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

地址是：

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