tossCoin 拋硬幣

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

DEMO

演示

微信小程序碼

支付寶小程序碼

運行平臺

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

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

框架/工具

功能需求

拋擲方式選擇(二期)

硬幣浮光

硬幣3D旋轉

硬幣陰影

硬幣種類選擇

自定義硬幣圖片(二期)

音效

音效選擇

背景皮膚

提示語，拋硬幣理論

拋擲統計

拋擲次數

字次數，占比

人頭次數，占比

清空數據

報警監控(二期)

APP端(三期)

我要吐槽-意見反饋

彩蛋 (等待你的發現~~)

彈出框美化(二期)

轉發分享

圖片使用WebP格式

適配小程序pc(ipad)端

觸摸震動

支付寶版小程序

更新日志

1.2.0

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

1.1.2

【修復】統計記錄顯示在硬幣結果之前

【修復】觸發清除定時器

1.1.1

【修復】模擬器、pc端小程序下硬幣背面沒有鏡像翻轉

1.1.0

【新增】轉發分享

1.0.0

【新增】意見反饋

【新增】彩蛋

【新增】背景皮膚

0.4.0

【修復】切換硬幣狀態時頻閃的問題

【新增】確認清空記錄時增加提示框

0.3.1

【修復】音效和硬幣旋轉不同步的問題

【優化】畫面樣式

0.3.0

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

【修復】因導入字體文件導致頁面渲染失敗的問題

0.2.0

【修復】真機模式下硬幣旋轉時圖片左右抖動

【新增】硬幣旋轉音效

0.1.0

【初始化】繪制硬幣、掃光、陰影、旋轉、統計

填坑

問題1

現象：第二次拋擲結果和上一次相同時，沒有發生旋轉效果

原因：animation 沒能重復觸發

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

問題2

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

原因：transform 使 border-radius 失效

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

問題3

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

原因： 目標旋轉90度后，成平行狀態，以默認角度無法觀測到

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

問題4

現象：小程序真機運行下，硬幣反面不斷鏡像翻轉直到停下

原因：rotateY(180deg) 方法使圖片進行翻轉，但是每次運行時，被不斷觸發

解決：將圖片翻轉放在該目標的子元素上

問題5

現象：小程序真機運行下，界面內容顯示不全

原因：導入字體文件后，報錯，影響界面渲染

解決：修改導入字體方式，如下：

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

或者(在static目錄下創建一個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- /

只保留轉為base64的 woff2的即可

問題6

現象：硬幣旋轉的音效延遲

原因：音效加載時間長，加上音頻文件較大，而且需要網絡下載

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

問題7

現象：無法修改 button 樣式

原因：uni-app 自帶的border

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

問題8

現象："navigationBarTextStyle": "black" 屬性在支付寶小程序中無效

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

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

"globalStyle": {

"navigationBarTextStyle": "black",

"navigationBarTitleText": "來拋硬幣",

// #ifdef MP-WEIXIN

"navigationBarBackgroundColor": "#f8f8f8",

// #endif

"backgroundColor": "#f7f8fa"

}

問題9

現象：支付寶小程序頁面不能自適應高度

原因：支付寶小程序 沒有 page 根元素標簽

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。