原創聲明:本文為作者原創,未經允許不得轉載,經授權轉載需注明作者和出處
本小程序會持續完善,現在只是一個小模塊。
二話不說,先貼效果圖。
開發環境及框架
后端:國產java極速框架JFinal(超級好用有木有?。?br>前端: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
當然,如果你本身會小程序,這個還是很好去跳過限制的
順帶這里求一個人一起玩小程序,共享服務器。(尼瑪吃不消?。?/p>
如果你覺得,哎喲,這小伙子不錯,請贊助我。