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

  • • 发表于 4年前
  • • 作者 Geek
  • • 3732 人浏览
  • • 6 条评论
  • • 最后编辑时间 4年前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

本小程序会持续完善,现在只是一个小模块。

二话不说,先贴效果图。

开发环境及框架

后端:国产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

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

当然,如果你本身会小程序,这个还是很好去跳过限制的

顺带这里求一个人一起玩小程序,共享服务器。(尼玛吃不消啊)

如果你觉得,哎哟,这小伙子不错,请赞助我。

分享到:
评论区(共6条评论)
6条评论
Ctrl+Enter
作者

Geek

Geek

APP:0 帖子:1 回复:9 积分:64

已加入社区[1345]天

主人太懒,签名没设置!

作者详情》
Top