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

2017-01-11


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


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

开发环境及框架


后端:国产java极速框架JFinal(超级好用有木有啊)

前端:WEUI WXSS版(微信团队出品的,自己写样式不管怎么写都丑啊)

数据库:MySQL

服务器:Linux Nginx Tomcat

开发流程


用户打开小程序后,本程序获取用户的昵称,头像展示在前台

用户输入姓名后,系统根据用户的openid生成结婚证图片链接(重复生成自动覆盖上一张)

判断如果是在开发者工具里面运行。则提示需找我获取体验资格。

后端关键代码详情


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 = "https://api.weixin.qq.com/sns/jscode2session?";

        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: 'https://www.0713jc.com/wx/getMarryPic',

        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: 'https://www.0713jc.com/wx/getWxCode',

            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链接列表

    })

  }


})

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


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


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




0
收藏