在微信小程序中如何实现表情制作功能?

/ 0评 / 0

表情包很火大家都知道
很多在线网站,app都相应而生,,
今天来讲一讲怎么在微信小程序实现这个功能


<view class="all">
<view class="top-block">
<image class="image" mode="aspectFit" src="{{gifInfo.testPic}}"></image>
</view>
<form bindsubmit="makeGif">
<view class="line" wx:for="{{gifInfo.example}}">
<view class="tips">第{{index+1}}句</view>
<input class="input" name="{{index}}" placeholder="{{item}}" type="text"></input>
</view>
<button class="button" formType="submit" hoverClass="button-hover">一键生成</button>
</form>
</view><view class="adContainer">
<ad unit-id="adunit-db83411bc0a7051e" ad-intervals="30" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
</view>

老样子,确定首页,js也随之而出
var t = "#";

Page({
data: {
id: 0,
gifInfo: [],
gifUrl: ""
},
onLoad: function(t) {
this.setData({
id: t.id
}), this.getGifInfo(t.id);
},
getGifInfo: function(a) {
var i = this;
wx.request({
url: t + "/getGifList.php?id=" + a,
success: function(t) {
console.log(t.data), i.setData({
gifInfo: t.data
});
}
});
},
makeGif: function(a) {
var i = this, e = a.detail.value, o = JSON.stringify(e);
console.log(i.data.gifInfo.dir), console.log(o), wx.showLoading({
title: "努力合成中",
mask: !0
}), wx.request({
url: t + "/gifmake.php",
method: "POST",
data: {
dir: i.data.gifInfo.dir,
data: o
},
header: {
"content-type": "application/x-www-form-urlencoded"
},
success: function(t) {
wx.hideLoading(), i.setData({
gifUrl: t.data
}), wx.navigateTo({
url: "./showGif?gifUrl=" + t.data
});
}
});
},
onShareAppMessage: function(a) {
return {
title: "一个木函--表情制作",
path: "/pages/tools/gifMaker/editGif?id=" + this.data.id,
imageUrl: "https://api.isoyu.com/ARU_GIF_S.php"
};
}
});

首页确定,那么预览页
在这个过程中,图片很大很大
所以我们要加载很久<view class="all">
<view bindtap="toEditPage" class="card" data-id="{{item.id}}" hoverClass="card-hover" wx:for="{{gifList}}">
<view class="cover-image" style="background-image:url({{item.cover}});background-repeat:no-repeat;background-size:auto 100%;"></view>
<view class="title">{{item.name}}</view>
</view>
</view>

对应的js
var t = "#";

Page({
data: {
gifList: []
},
onLoad: function(t) {
wx.showLoading({
title: "等会,别急",
mask: !0
}), this.getGifList();
},
getGifList: function(i) {
var a = this;
wx.request({
url: t + "/getGifList.php",
success: function(t) {
wx.hideLoading(), console.log(t.data), a.setData({
gifList: t.data
});
},
fail: function() {
wx.hideLoading(), wx.showToast({
title: "服务器炸掉了,过会再来吧。"
});
}
});
},
toEditPage: function(t) {
var i = t.currentTarget.dataset.id;
wx.navigateTo({
url: "./editGif?id=" + i
});
},
onShareAppMessage: function(i) {
return {
title: "一个木函--表情制作",
path: "/pages/tools/gifMaker/gifMaker",
imageUrl: "https://api.isoyu.com/ARU_GIF_S.php"
};
}
});

但是这个不像前几篇那样
我们还需要用js把
动态图分帧


Page({
data: {
gifList: []
},
onLoad: function(t) {
wx.showLoading({
title: "等会,别急",
mask: !0
}), this.getGifList();
},
getGifList: function(i) {
var a = this;
wx.request({
url: t + "/getGifList.php",
success: function(t) {
wx.hideLoading(), console.log(t.data), a.setData({
gifList: t.data
});
},
fail: function() {
wx.hideLoading(), wx.showToast({
title: "服务器炸掉了,过会再来吧。"
});
}
});
},
toEditPage: function(t) {
var i = t.currentTarget.dataset.id;
wx.navigateTo({
url: "./editGif?id=" + i
});
},
onShareAppMessage: function(i) {
return {
title: "一个木函--表情制作",
path: "/pages/tools/gifMaker/gifMaker",
imageUrl: "https://api.isoyu.com/ARU_GIF_S.php"
};
}
});

最后再显示合成的GIF表情包
<view class="tips">小提示:点击图片可预览,点完长按可保存(设置里需要保存相册权限)</view>
<image bindtap="previewImage" class="image" mode="aspectFit" src="{{gifUrl}}"></image>

js同时也要兼顾跨域问题
Page({
data: {
gifUrl: "",
urlList: []
},
onLoad: function(t) {
var a = t.gifUrl, r = [];
console.log("接收到" + a), r.push(a), this.setData({
gifUrl: t.gifUrl,
urlList: r
});
},
previewImage: function(t) {
var a = this;
wx.previewImage({
urls: a.data.urlList,
current: a.data.gifUrl
});
},
onShareAppMessage: function(t) {
return {
title: "一个木函--表情制作",
path: "/pages/tools/gifMaker/showGif?gifUrl=" + this.data.gifUrl,
imageUrl: "https://api.isoyu.com/ARU_GIF_S.php"
};
}
});

这样就完成了这个功能

评论已关闭。