Skip to content

Commit afea06f

Browse files
committed
feat: add emoji kitchen
1 parent 6d39667 commit afea06f

File tree

9 files changed

+388
-130
lines changed

9 files changed

+388
-130
lines changed

miniprogram/app.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"pages": [
33
"pages/index/index",
4-
"pages/kitchen/kitchen",
4+
"pages/kitchen/index",
55
"pages/detail/index",
66
"pages/my/index",
77
"pages/myStarred/index",
@@ -22,6 +22,9 @@
2222
}, {
2323
"pagePath": "pages/learn/index",
2424
"text": "技巧"
25+
}, {
26+
"pagePath": "pages/kitchen/index",
27+
"text": "表情"
2528
}, {
2629
"pagePath": "pages/my/index",
2730
"text": "我的"

miniprogram/custom-tab-bar/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ Component({
1010
icon: 'tips',
1111
value: 'learn',
1212
label: '发现',
13+
},{
14+
icon: 'logo-android',
15+
value: 'kitchen',
16+
label: '表情',
1317
}, {
1418
icon: 'user',
1519
value: 'my',

miniprogram/pages/kitchen/index.js

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
import { knownSupportedEmoji } from './supported';
2+
let emojiData = {};
3+
const LIMIT = 5;
4+
import { show as showAd, create as createAd } from '../../utils/ad'
5+
6+
Page({
7+
combineOriginUrl: '',
8+
9+
data: {
10+
visible: false,
11+
knownSupportedEmoji,
12+
enableEmoji: [],
13+
leftEmoji: '',
14+
rightEmoji: '',
15+
pos: '',
16+
loadFail: false,
17+
size: 30,
18+
combineEnable: false,
19+
combineUrl: '',
20+
error: ''
21+
},
22+
23+
onLoad() {
24+
wx.showLoading({ title: '初始化数据ing...', mask: true })
25+
wx.request({
26+
url: 'https://how-to-cook-1255404841.cos.ap-shanghai.myqcloud.com/emoji/emoji.json',
27+
success(res) {
28+
emojiData = res.data;
29+
},
30+
fail(err) {
31+
console.log(err);
32+
},
33+
complete() {
34+
wx.hideLoading()
35+
}
36+
})
37+
38+
// load ad
39+
this.combineImageAd = createAd('adunit-ac72850d870bb556');
40+
this.combineImageAd.onClose((res) => {
41+
if (res && res.isEnded) {
42+
const combineUrl = this.getCombineCacheUrl();
43+
this.setData({
44+
combineUrl
45+
})
46+
wx.setStorageSync('combine-video-had-watched', true)
47+
} else {
48+
wx.showModal({
49+
content: '仅需看 1 次视频,长期可用',
50+
cancelText: '放弃',
51+
confirmText: '继续',
52+
success: (res) => {
53+
if (res.confirm) {
54+
showAd(this.combineImageAd)
55+
} else {
56+
this.setData({
57+
leftEmoji: '',
58+
rightEmoji: ''
59+
})
60+
}
61+
}
62+
})
63+
}
64+
})
65+
this.combineImageAd.onError((err) => {
66+
wx.showToast({ title: '广告加载失败,获得免费使用特权', icon: 'none' })
67+
const combineUrl = this.getCombineCacheUrl();
68+
this.setData({
69+
combineUrl
70+
})
71+
})
72+
73+
this.downloadImageAd = createAd('adunit-7f93198b831fa868');
74+
this.downloadImageAd.onClose((res) => {
75+
if (res && res.isEnded) {
76+
const url = this.getCombineCacheUrl();
77+
this.downloadImage(url);
78+
wx.setStorageSync('download-video-had-watched', true)
79+
} else {
80+
wx.showModal({
81+
content: '仅需看 1 次视频,长期可下载',
82+
cancelText: '放弃',
83+
confirmText: '继续',
84+
success: (res) => {
85+
if (res.confirm) {
86+
showAd(this.downloadImageAd)
87+
}
88+
}
89+
})
90+
}
91+
})
92+
this.downloadImageAd.onError((err) => {
93+
wx.showToast({ title: '广告加载失败,获得免费下载特权', icon: 'none' })
94+
this.downloadImage(url);
95+
})
96+
},
97+
98+
handleSelected(e) {
99+
const { pos } = e.currentTarget.dataset;
100+
const { leftEmoji } = this.data;
101+
102+
if (pos == 'right') {
103+
if (leftEmoji == '') {
104+
wx.showToast({ icon: 'none', title: '从左边开始' })
105+
return;
106+
}
107+
this.setData({
108+
enableEmoji: knownSupportedEmoji.map(e => {
109+
const target = emojiData[leftEmoji].find(item => {
110+
if (e === leftEmoji) {
111+
return item.leftEmoji == e && item.rightEmoji == e;
112+
}
113+
return item.leftEmoji == e || item.rightEmoji == e;
114+
})
115+
return {
116+
isValid: !!target,
117+
id: e,
118+
// date: target ? target.date : ''
119+
}
120+
})
121+
})
122+
}
123+
this.setData({ visible: true, pos, size: 30 })
124+
},
125+
126+
onVisibleChange(e) {
127+
this.setData({ visible: e.detail.visible })
128+
},
129+
130+
handleSelectedEmoji(e) {
131+
const { pos, rightEmoji } = this.data;
132+
const { id, valid } = e.target.dataset;
133+
134+
if (pos == 'right' && !valid) return;
135+
136+
if (pos == 'left' && rightEmoji) {
137+
this.setData({ rightEmoji: '', combineUrl: '', combineEnable: false })
138+
}
139+
140+
this.setData({ [`${pos}Emoji`]: id, visible: false });
141+
142+
if (pos == 'right') {
143+
this.getCombineImageOriginUrl()
144+
this.handleLimit()
145+
}
146+
},
147+
148+
handleLimit() {
149+
const combineTimes = wx.getStorageSync('combine-times') || 0;
150+
const videoHadWatched = wx.getStorageSync('combine-video-had-watched') || false;
151+
152+
if (Number(combineTimes) > LIMIT && !videoHadWatched && this.combineImageAd) {
153+
if (this.combineImageAd) {
154+
showAd(this.combineImageAd)
155+
}
156+
} else {
157+
const combineUrl = this.getCombineCacheUrl();
158+
this.setData({
159+
combineUrl
160+
})
161+
}
162+
},
163+
164+
getCombineImageOriginUrl() {
165+
const { leftEmoji, rightEmoji } = this.data;
166+
const fix = str => str.split("-")
167+
.filter(x => x !== "fe0f")
168+
.join("_")
169+
170+
const target = emojiData[leftEmoji].find(item => item.leftEmoji == leftEmoji && item.rightEmoji == rightEmoji || item.leftEmoji == rightEmoji && item.rightEmoji == leftEmoji);
171+
172+
if (target) {
173+
this.combineOriginUrl = `https://www.gstatic.com/android/keyboard/emojikitchen/${target.date}/u${fix(target.leftEmoji)}/u${fix(target.leftEmoji)}_u${fix(target.rightEmoji)}.png`;
174+
}
175+
},
176+
177+
onCombileLoadError() {
178+
this.setData({ loadFail: true });
179+
const { leftEmoji, rightEmoji } = this.data;
180+
181+
if (!this.combineOriginUrl) return
182+
183+
wx.showLoading({ title: '绘制中', mask: true })
184+
185+
wx.request({
186+
url: `https://api.africans.cn/cooking`,
187+
method: 'POST',
188+
data: {
189+
url: this.combineOriginUrl,
190+
leftEmoji,
191+
rightEmoji
192+
},
193+
success: (res) => {
194+
if (res.data.errcode == 0) {
195+
this.setData({ loadFail: false })
196+
} else {
197+
wx.showToast({
198+
title: '未知错误', icon: '',
199+
})
200+
}
201+
},
202+
fail: (err) => {
203+
wx.showToast({
204+
title: err.errmsg
205+
})
206+
this.setData({ loadFail: false })
207+
},
208+
complete() {
209+
wx.hideLoading()
210+
}
211+
})
212+
},
213+
214+
onScrollToLower() {
215+
this.setData({
216+
size: this.data.size + 30
217+
})
218+
},
219+
220+
onCombineLoaded() {
221+
const combineTimes = wx.getStorageSync('combine-times');
222+
223+
this.setData({ combineEnable: true });
224+
wx.setStorageSync('combine-times', Number(combineTimes) + 1);
225+
},
226+
227+
handleShowTips() {
228+
const { leftEmoji, rightEmoji } = this.data;
229+
230+
if (!leftEmoji && !rightEmoji) {
231+
wx.showToast({ title: '先点击左上角', icon: 'none' })
232+
}
233+
},
234+
235+
downloadImage(src) {
236+
const handleFail = (err) => {
237+
console.log(err);
238+
this.setData({ error: err.errMsg })
239+
wx.showToast({ title: `${err.errMsg}`, icon: 'none' })
240+
}
241+
wx.getImageInfo({
242+
src
243+
}).then(({ path }) => {
244+
wx.saveImageToPhotosAlbum({
245+
filePath: path
246+
}).then(() => {
247+
const downloadTimes = wx.getStorageSync('download-times') || 0
248+
249+
wx.showToast({ title: '下载成功~', icon : 'none' });
250+
wx.setStorageSync('download-times', Number(downloadTimes) + 1)
251+
}).catch(handleFail)
252+
}).catch(handleFail)
253+
},
254+
255+
getCombineCacheUrl() {
256+
const { leftEmoji, rightEmoji } = this.data;
257+
const url = `https://how-to-cook-1255404841.cos.ap-shanghai.myqcloud.com/combine/${leftEmoji}---${rightEmoji}.png`;
258+
259+
return url;
260+
},
261+
262+
handleDownload() {
263+
const url = this.getCombineCacheUrl();
264+
const downloadTimes = wx.getStorageSync('download-times') || 0;
265+
const videoHadWatched = wx.getStorageSync('download-video-had-watched') || false;
266+
267+
if (Number(downloadTimes) > LIMIT && !videoHadWatched && this.downloadImageAd) {
268+
showAd(this.downloadImageAd)
269+
} else {
270+
this.downloadImage(url);
271+
}
272+
},
273+
274+
onShareAppMessage() {
275+
return {
276+
title: '表情厨房',
277+
path: '/pages/kitchen/index'
278+
}
279+
},
280+
})
File renamed without changes.

miniprogram/pages/kitchen/kitchen.less renamed to miniprogram/pages/kitchen/index.less

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,9 @@
4141
width: 100rpx;
4242
height: 100rpx;
4343
padding: 24rpx;
44+
}
45+
46+
.actions {
47+
display: flex;
48+
justify-content: center;
4449
}
Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
2+
<view class="container">
3+
<view class="box box-a" bind:tap="handleSelected" data-pos="left">
4+
<image
5+
wx:if="{{leftEmoji}}"
6+
class="emoji"
7+
src="https://how-to-cook-1255404841.cos.ap-shanghai.myqcloud.com/emoji/svg/emoji_u{{_.fix(leftEmoji)}}.svg" />
8+
<t-icon wx:else name="add" />
9+
</view>
10+
<view class="box box-b" bind:tap="handleSelected" data-pos="right">
11+
<image
12+
wx:if="{{rightEmoji}}"
13+
class="emoji"
14+
src="https://how-to-cook-1255404841.cos.ap-shanghai.myqcloud.com/emoji/svg/emoji_u{{_.fix(rightEmoji)}}.svg" />
15+
<t-icon wx:else name="add" />
16+
</view>
17+
</view>
18+
19+
<view class="box box-result" bind:tap="handleShowTips">
20+
<image
21+
wx:if="{{!loadFail && combineUrl}}"
22+
class="emoji"
23+
bind:load="onCombineLoaded"
24+
bind:error="onCombileLoadError"
25+
src="{{combineUrl}}" />
26+
</view>
27+
28+
{{error}}
29+
30+
<view class="actions">
31+
<t-button theme="primary" size="small" disabled="{{!combineEnable}}" variant="outline" bind:tap="handleDownload">下载表情</t-button>
32+
</view>
33+
34+
<!-- <view class="actions" style="margin-top: 20px">
35+
<t-button theme="primary" disabled variant="outline" bind:tap="handleEdit">编辑表情</t-button>
36+
</view> -->
37+
38+
<t-popup visible="{{visible}}" bind:visible-change="onVisibleChange" placement="bottom">
39+
<scroll-view class="popup-wrapper" scroll-y bindscrolltolower="onScrollToLower">
40+
<view class="block" bind:tap="handleSelectedEmoji">
41+
<view wx:if="{{enableEmoji.length > 0}}">
42+
<block wx:for="{{enableEmoji}}" wx:key="index" >
43+
<image
44+
wx:if="{{index < size}}"
45+
class="emoji"
46+
data-id="{{item.id}}"
47+
data-valid="{{item.isValid}}"
48+
style="{{item.isValid ? '' : 'opacity: .2;'}}"
49+
src="https://how-to-cook-1255404841.cos.ap-shanghai.myqcloud.com/emoji/svg/emoji_u{{_.fix(item.id)}}.svg" />
50+
</block>
51+
</view>
52+
<view wx:else>
53+
<block wx:for="{{knownSupportedEmoji}}" wx:key="index" >
54+
<image
55+
wx:if="{{index < size}}"
56+
lazy-load
57+
class="emoji"
58+
data-id="{{item}}"
59+
src="https://how-to-cook-1255404841.cos.ap-shanghai.myqcloud.com/emoji/svg/emoji_u{{_.fix(item)}}.svg" />
60+
</block>
61+
</view>
62+
</view>
63+
</scroll-view>
64+
</t-popup>
65+
66+
<wxs module="_">
67+
module.exports.fix = function(str) {
68+
return str.split("-")
69+
.filter(function(x) { return x !== "fe0f" })
70+
.join("_")
71+
}
72+
</wxs>

0 commit comments

Comments
 (0)