暗潮：微信小程序第一彈：虐狗結婚證

本小程序會持續完善，如今只是一個小模塊。

二話不說，先貼效果圖。

開發環境及框架

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 = "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，提供臨時真機體驗資格（說得好像很值錢的樣子，實際上免費提供）。

固然，若是你自己會小程序，這個仍是很好去跳過限制的

順帶這裏求一我的一塊兒玩小程序，共享服務器。（尼瑪吃不消啊）

若是你以爲，哎喲，這小夥子不錯，請贊助我。