Skip to content

Commit

Permalink
feat: add emoji kitchen
Browse files Browse the repository at this point in the history
  • Loading branch information
LeeJim committed Oct 30, 2022
1 parent 6d39667 commit afea06f
Show file tree
Hide file tree
Showing 9 changed files with 388 additions and 130 deletions.
5 changes: 4 additions & 1 deletion miniprogram/app.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"pages": [
"pages/index/index",
"pages/kitchen/kitchen",
"pages/kitchen/index",
"pages/detail/index",
"pages/my/index",
"pages/myStarred/index",
Expand All @@ -22,6 +22,9 @@
}, {
"pagePath": "pages/learn/index",
"text": "技巧"
}, {
"pagePath": "pages/kitchen/index",
"text": "表情"
}, {
"pagePath": "pages/my/index",
"text": "我的"
Expand Down
4 changes: 4 additions & 0 deletions miniprogram/custom-tab-bar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ Component({
icon: 'tips',
value: 'learn',
label: '发现',
},{
icon: 'logo-android',
value: 'kitchen',
label: '表情',
}, {
icon: 'user',
value: 'my',
Expand Down
280 changes: 280 additions & 0 deletions miniprogram/pages/kitchen/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,280 @@
import { knownSupportedEmoji } from './supported';
let emojiData = {};
const LIMIT = 5;
import { show as showAd, create as createAd } from '../../utils/ad'

Page({
combineOriginUrl: '',

data: {
visible: false,
knownSupportedEmoji,
enableEmoji: [],
leftEmoji: '',
rightEmoji: '',
pos: '',
loadFail: false,
size: 30,
combineEnable: false,
combineUrl: '',
error: ''
},

onLoad() {
wx.showLoading({ title: '初始化数据ing...', mask: true })
wx.request({
url: 'https://how-to-cook-1255404841.cos.ap-shanghai.myqcloud.com/emoji/emoji.json',
success(res) {
emojiData = res.data;
},
fail(err) {
console.log(err);
},
complete() {
wx.hideLoading()
}
})

// load ad
this.combineImageAd = createAd('adunit-ac72850d870bb556');
this.combineImageAd.onClose((res) => {
if (res && res.isEnded) {
const combineUrl = this.getCombineCacheUrl();
this.setData({
combineUrl
})
wx.setStorageSync('combine-video-had-watched', true)
} else {
wx.showModal({
content: '仅需看 1 次视频,长期可用',
cancelText: '放弃',
confirmText: '继续',
success: (res) => {
if (res.confirm) {
showAd(this.combineImageAd)
} else {
this.setData({
leftEmoji: '',
rightEmoji: ''
})
}
}
})
}
})
this.combineImageAd.onError((err) => {
wx.showToast({ title: '广告加载失败,获得免费使用特权', icon: 'none' })
const combineUrl = this.getCombineCacheUrl();
this.setData({
combineUrl
})
})

this.downloadImageAd = createAd('adunit-7f93198b831fa868');
this.downloadImageAd.onClose((res) => {
if (res && res.isEnded) {
const url = this.getCombineCacheUrl();
this.downloadImage(url);
wx.setStorageSync('download-video-had-watched', true)
} else {
wx.showModal({
content: '仅需看 1 次视频,长期可下载',
cancelText: '放弃',
confirmText: '继续',
success: (res) => {
if (res.confirm) {
showAd(this.downloadImageAd)
}
}
})
}
})
this.downloadImageAd.onError((err) => {
wx.showToast({ title: '广告加载失败,获得免费下载特权', icon: 'none' })
this.downloadImage(url);
})
},

handleSelected(e) {
const { pos } = e.currentTarget.dataset;
const { leftEmoji } = this.data;

if (pos == 'right') {
if (leftEmoji == '') {
wx.showToast({ icon: 'none', title: '从左边开始' })
return;
}
this.setData({
enableEmoji: knownSupportedEmoji.map(e => {
const target = emojiData[leftEmoji].find(item => {
if (e === leftEmoji) {
return item.leftEmoji == e && item.rightEmoji == e;
}
return item.leftEmoji == e || item.rightEmoji == e;
})
return {
isValid: !!target,
id: e,
// date: target ? target.date : ''
}
})
})
}
this.setData({ visible: true, pos, size: 30 })
},

onVisibleChange(e) {
this.setData({ visible: e.detail.visible })
},

handleSelectedEmoji(e) {
const { pos, rightEmoji } = this.data;
const { id, valid } = e.target.dataset;

if (pos == 'right' && !valid) return;

if (pos == 'left' && rightEmoji) {
this.setData({ rightEmoji: '', combineUrl: '', combineEnable: false })
}

this.setData({ [`${pos}Emoji`]: id, visible: false });

if (pos == 'right') {
this.getCombineImageOriginUrl()
this.handleLimit()
}
},

handleLimit() {
const combineTimes = wx.getStorageSync('combine-times') || 0;
const videoHadWatched = wx.getStorageSync('combine-video-had-watched') || false;

if (Number(combineTimes) > LIMIT && !videoHadWatched && this.combineImageAd) {
if (this.combineImageAd) {
showAd(this.combineImageAd)
}
} else {
const combineUrl = this.getCombineCacheUrl();
this.setData({
combineUrl
})
}
},

getCombineImageOriginUrl() {
const { leftEmoji, rightEmoji } = this.data;
const fix = str => str.split("-")
.filter(x => x !== "fe0f")
.join("_")

const target = emojiData[leftEmoji].find(item => item.leftEmoji == leftEmoji && item.rightEmoji == rightEmoji || item.leftEmoji == rightEmoji && item.rightEmoji == leftEmoji);

if (target) {
this.combineOriginUrl = `https://www.gstatic.com/android/keyboard/emojikitchen/${target.date}/u${fix(target.leftEmoji)}/u${fix(target.leftEmoji)}_u${fix(target.rightEmoji)}.png`;
}
},

onCombileLoadError() {
this.setData({ loadFail: true });
const { leftEmoji, rightEmoji } = this.data;

if (!this.combineOriginUrl) return

wx.showLoading({ title: '绘制中', mask: true })

wx.request({
url: `https://api.africans.cn/cooking`,
method: 'POST',
data: {
url: this.combineOriginUrl,
leftEmoji,
rightEmoji
},
success: (res) => {
if (res.data.errcode == 0) {
this.setData({ loadFail: false })
} else {
wx.showToast({
title: '未知错误', icon: '',
})
}
},
fail: (err) => {
wx.showToast({
title: err.errmsg
})
this.setData({ loadFail: false })
},
complete() {
wx.hideLoading()
}
})
},

onScrollToLower() {
this.setData({
size: this.data.size + 30
})
},

onCombineLoaded() {
const combineTimes = wx.getStorageSync('combine-times');

this.setData({ combineEnable: true });
wx.setStorageSync('combine-times', Number(combineTimes) + 1);
},

handleShowTips() {
const { leftEmoji, rightEmoji } = this.data;

if (!leftEmoji && !rightEmoji) {
wx.showToast({ title: '先点击左上角', icon: 'none' })
}
},

downloadImage(src) {
const handleFail = (err) => {
console.log(err);
this.setData({ error: err.errMsg })
wx.showToast({ title: `${err.errMsg}`, icon: 'none' })
}
wx.getImageInfo({
src
}).then(({ path }) => {
wx.saveImageToPhotosAlbum({
filePath: path
}).then(() => {
const downloadTimes = wx.getStorageSync('download-times') || 0

wx.showToast({ title: '下载成功~', icon : 'none' });
wx.setStorageSync('download-times', Number(downloadTimes) + 1)
}).catch(handleFail)
}).catch(handleFail)
},

getCombineCacheUrl() {
const { leftEmoji, rightEmoji } = this.data;
const url = `https://how-to-cook-1255404841.cos.ap-shanghai.myqcloud.com/combine/${leftEmoji}---${rightEmoji}.png`;

return url;
},

handleDownload() {
const url = this.getCombineCacheUrl();
const downloadTimes = wx.getStorageSync('download-times') || 0;
const videoHadWatched = wx.getStorageSync('download-video-had-watched') || false;

if (Number(downloadTimes) > LIMIT && !videoHadWatched && this.downloadImageAd) {
showAd(this.downloadImageAd)
} else {
this.downloadImage(url);
}
},

onShareAppMessage() {
return {
title: '表情厨房',
path: '/pages/kitchen/index'
}
},
})
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -41,4 +41,9 @@
width: 100rpx;
height: 100rpx;
padding: 24rpx;
}

.actions {
display: flex;
justify-content: center;
}
72 changes: 72 additions & 0 deletions miniprogram/pages/kitchen/index.wxml
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@

<view class="container">
<view class="box box-a" bind:tap="handleSelected" data-pos="left">
<image
wx:if="{{leftEmoji}}"
class="emoji"
src="https://how-to-cook-1255404841.cos.ap-shanghai.myqcloud.com/emoji/svg/emoji_u{{_.fix(leftEmoji)}}.svg" />
<t-icon wx:else name="add" />
</view>
<view class="box box-b" bind:tap="handleSelected" data-pos="right">
<image
wx:if="{{rightEmoji}}"
class="emoji"
src="https://how-to-cook-1255404841.cos.ap-shanghai.myqcloud.com/emoji/svg/emoji_u{{_.fix(rightEmoji)}}.svg" />
<t-icon wx:else name="add" />
</view>
</view>

<view class="box box-result" bind:tap="handleShowTips">
<image
wx:if="{{!loadFail && combineUrl}}"
class="emoji"
bind:load="onCombineLoaded"
bind:error="onCombileLoadError"
src="{{combineUrl}}" />
</view>

{{error}}

<view class="actions">
<t-button theme="primary" size="small" disabled="{{!combineEnable}}" variant="outline" bind:tap="handleDownload">下载表情</t-button>
</view>

<!-- <view class="actions" style="margin-top: 20px">
<t-button theme="primary" disabled variant="outline" bind:tap="handleEdit">编辑表情</t-button>
</view> -->

<t-popup visible="{{visible}}" bind:visible-change="onVisibleChange" placement="bottom">
<scroll-view class="popup-wrapper" scroll-y bindscrolltolower="onScrollToLower">
<view class="block" bind:tap="handleSelectedEmoji">
<view wx:if="{{enableEmoji.length > 0}}">
<block wx:for="{{enableEmoji}}" wx:key="index" >
<image
wx:if="{{index < size}}"
class="emoji"
data-id="{{item.id}}"
data-valid="{{item.isValid}}"
style="{{item.isValid ? '' : 'opacity: .2;'}}"
src="https://how-to-cook-1255404841.cos.ap-shanghai.myqcloud.com/emoji/svg/emoji_u{{_.fix(item.id)}}.svg" />
</block>
</view>
<view wx:else>
<block wx:for="{{knownSupportedEmoji}}" wx:key="index" >
<image
wx:if="{{index < size}}"
lazy-load
class="emoji"
data-id="{{item}}"
src="https://how-to-cook-1255404841.cos.ap-shanghai.myqcloud.com/emoji/svg/emoji_u{{_.fix(item)}}.svg" />
</block>
</view>
</view>
</scroll-view>
</t-popup>

<wxs module="_">
module.exports.fix = function(str) {
return str.split("-")
.filter(function(x) { return x !== "fe0f" })
.join("_")
}
</wxs>
Loading

0 comments on commit afea06f

Please sign in to comment.