tossCoin 拋硬幣

拋硬幣，并不是因為硬幣能幫你決定什么，而是因為在硬幣拋出的那一刻，答案便會出現(xiàn)在你心里。

DEMO

演示

微信小程序碼

支付寶小程序碼

運(yùn)行平臺

微信小程序、支付寶小程序、H5、ios、安卓

使用 uni-app 開發(fā)，除微信小程序、支付寶小程序外，其他端未測試

框架/工具

功能需求

拋擲方式選擇(二期)

硬幣浮光

硬幣3D旋轉(zhuǎn)

硬幣陰影

硬幣種類選擇

自定義硬幣圖片(二期)

音效

音效選擇

背景皮膚

提示語，拋硬幣理論

拋擲統(tǒng)計

拋擲次數(shù)

字次數(shù)，占比

人頭次數(shù)，占比

清空數(shù)據(jù)

報警監(jiān)控(二期)

APP端(三期)

我要吐槽-意見反饋

彩蛋 (等待你的發(fā)現(xiàn)~~)

彈出框美化(二期)

轉(zhuǎn)發(fā)分享

圖片使用WebP格式

適配小程序pc(ipad)端

觸摸震動

支付寶版小程序

更新日志

1.2.0

【新增】適配支付寶小程序

1.1.2

【修復(fù)】統(tǒng)計記錄顯示在硬幣結(jié)果之前

【修復(fù)】觸發(fā)清除定時器

1.1.1

【修復(fù)】模擬器、pc端小程序下硬幣背面沒有鏡像翻轉(zhuǎn)

1.1.0

【新增】轉(zhuǎn)發(fā)分享

1.0.0

【新增】意見反饋

【新增】彩蛋

【新增】背景皮膚

0.4.0

【修復(fù)】切換硬幣狀態(tài)時頻閃的問題

【新增】確認(rèn)清空記錄時增加提示框

0.3.1

【修復(fù)】音效和硬幣旋轉(zhuǎn)不同步的問題

【優(yōu)化】畫面樣式

0.3.0

【新增】硬幣皮膚選擇、音效選擇、清空記錄

【修復(fù)】因?qū)胱煮w文件導(dǎo)致頁面渲染失敗的問題

0.2.0

【修復(fù)】真機(jī)模式下硬幣旋轉(zhuǎn)時圖片左右抖動

【新增】硬幣旋轉(zhuǎn)音效

0.1.0

【初始化】繪制硬幣、掃光、陰影、旋轉(zhuǎn)、統(tǒng)計

填坑

問題1

現(xiàn)象：第二次拋擲結(jié)果和上一次相同時，沒有發(fā)生旋轉(zhuǎn)效果

原因：animation 沒能重復(fù)觸發(fā)

解決：使用 setTimeout 方法，先移除 class 在添加新的 class 重新觸發(fā) animation

問題2

現(xiàn)象：硬幣掃光效果，在移動端會超出硬幣范圍顯示

原因：transform 使 border-radius 失效

解決：使用 mask-image: radial-gradient(white, black);

問題3

現(xiàn)象：rotateX() 為90deg 時，不能顯示

原因： 目標(biāo)旋轉(zhuǎn)90度后，成平行狀態(tài)，以默認(rèn)角度無法觀測到

解決：使用 perspective(100px) 調(diào)整角度

問題4

現(xiàn)象：小程序真機(jī)運(yùn)行下，硬幣反面不斷鏡像翻轉(zhuǎn)直到停下

原因：rotateY(180deg) 方法使圖片進(jìn)行翻轉(zhuǎn)，但是每次運(yùn)行時，被不斷觸發(fā)

解決：將圖片翻轉(zhuǎn)放在該目標(biāo)的子元素上

問題5

現(xiàn)象：小程序真機(jī)運(yùn)行下，界面內(nèi)容顯示不全

原因：導(dǎo)入字體文件后，報錯，影響界面渲染

解決：修改導(dǎo)入字體方式，如下：

把iconfont.css 的全部代碼 全部復(fù)制到App.vue文件style里

或者(在static目錄下創(chuàng)建一個css文件，在main.js引入即可 import "./static/icon-font/iconfont.css")

然后 刪除 src: url('iconfont.eot?t=1562306471309'); / IE9 /

url('iconfont.woff?t=1562306471309') format('woff'),

url('iconfont.ttf?t=1562306471309') format('truetype'), / chrome, firefox, opera, Safari, Android, iOS 4.2+ /

url('iconfont.svg?t=1562306471309#iconfont') format('svg'); / iOS 4.1- /

只保留轉(zhuǎn)為base64的 woff2的即可

問題6

現(xiàn)象：硬幣旋轉(zhuǎn)的音效延遲

原因：音效加載時間長，加上音頻文件較大，而且需要網(wǎng)絡(luò)下載

解決：使用 onPlay() 方法，等待音頻加載后再旋轉(zhuǎn)硬幣，另外壓縮音頻文件體積，并放入本地文件中

問題7

現(xiàn)象：無法修改 button 樣式

原因：uni-app 自帶的border

解決：用 button::after{ border: none;} 可以去掉

問題8

現(xiàn)象："navigationBarTextStyle": "black" 屬性在支付寶小程序中無效

原因：支付寶小程序文字顏色和標(biāo)題前景色共用一個屬性

解決：navigationBarBackgroundColor屬性不在支付寶小程序中使用

"globalStyle": {

"navigationBarTextStyle": "black",

"navigationBarTitleText": "來拋硬幣",

// #ifdef MP-WEIXIN

"navigationBarBackgroundColor": "#f8f8f8",

// #endif

"backgroundColor": "#f7f8fa"

}

問題9

現(xiàn)象：支付寶小程序頁面不能自適應(yīng)高度

原因：支付寶小程序 沒有 page 根元素標(biāo)簽

解決：最外層加一個view標(biāo)簽，style=“height:100vh”

總結(jié)

以上是生活随笔為你收集整理的计算机抛硬币模拟器,GitHub - Jameszyq/tossCoin: 抛硬币，微信小程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。