原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处
本小程序会持续完善,现在只是一个小模块。
二话不说,先贴效果图。
开发环境及框架
后端:国产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
当然,如果你本身会小程序,这个还是很好去跳过限制的
顺带这里求一个人一起玩小程序,共享服务器。(尼玛吃不消啊)
如果你觉得,哎哟,这小伙子不错,请赞助我。