楊勝潔 鞠宏軍

摘要：《基于微信小程序的下決定轉(zhuǎn)盤》采用了微信小程序框架+微信云開發(fā)進行搭建，涉及JavaScript，NodeJs，Canvas等前端方面知識。開發(fā)這款小程序的目的在于幫助更多患有選擇困難癥的人能夠快速地對一些小決定做出判斷，使用游戲的形式既能解決問題又給生活增加了樂趣。該程序主要功能有：自定義轉(zhuǎn)盤內(nèi)容、自定義轉(zhuǎn)盤選項的概率、作弊模式指定轉(zhuǎn)盤的結(jié)果、按鈕觸發(fā)轉(zhuǎn)盤旋轉(zhuǎn)、手勢觸發(fā)按鈕旋轉(zhuǎn)、分享旋轉(zhuǎn)結(jié)果等。

關(guān)鍵詞：微信小程序（JavaScript）;云開發(fā)（NodeJs）;選擇困難癥;轉(zhuǎn)盤（Canvas）

中圖分類號：TP311.52? ? ? 文獻標識碼：A

文章編號：1009-3044（2020）26-0004-04

Abstract：“By wheel to make decision based on WeChat small program ”uses WeChat small program framework + WeChat cloud development to build， involving JavaScript， NodeJs， Canvas and other front-end knowledge. The purpose of this small app is to help more people with choice difficulties to make quick judgments on some small decisions. Using the form of games can not only solve problems but also add fun to life. The main functions of the program are： custom rotary table content， custom rotary table option probability， cheating mode to specify the result of the rotary table， button trigger rotary table rotation， gesture trigger button rotation， share the rotary result， etc.

Key words： WeChat small program; WeChat cloud development; selective disorder; wheel

1 背景

當前社會的發(fā)展日新月異，我們的生活也隨之發(fā)生了翻天覆地的變化。在交通工具方面，從汽車承包一切到現(xiàn)在的飛機、高鐵、滴滴打車一應俱全;選購商品方面，從淘寶獨掌大權(quán)到現(xiàn)在的京東、拼多多、蘇寧等電商平臺百花齊放;美食方面就更加豐富了，就連日常的生活用品都有各種各樣的品牌?？萍嫉陌l(fā)展推動了人們生活水平的提高，也催生了很多企業(yè)的發(fā)展，然后當面對琳瑯滿目的商品時，很多人都會陷入選擇的困境。同樣的功能，不同的款式，差不多的性價比，這些因素都導致了患有嚴重選擇困難癥的人群越來越多。人們往往會糾結(jié)于一些結(jié)果與產(chǎn)生的影響無關(guān)緊要的事物，比如“今天吃什么”“ 明天穿什么 ”等這一類的問題，然而當我們陷入糾結(jié)的時候，無形中浪費了很多寶貴的時間，甚至可能會錯過某些東西，比如雙11購物，當你還在糾結(jié)買哪一款的時候優(yōu)惠已經(jīng)停止。所以，針對這樣的人群，我們需要一個能夠幫助他們做一些小決定的應用程序，讓他們能夠?qū)ι钪械默嵤卵杆俚刈龀鲞x擇，提高生活質(zhì)量，采用轉(zhuǎn)盤的游戲形式增加生活的樂趣，減少選擇的痛苦。

2 系統(tǒng)需求分析

2.1 自定義轉(zhuǎn)盤內(nèi)容

此功能作為程序中最基本的功能，用戶可通過自己的需要，制作出相應的轉(zhuǎn)盤，在此基礎(chǔ)上，該程序還特意新增了對轉(zhuǎn)盤中每個選項自定義概率的功能，即當用戶在創(chuàng)建一個新的轉(zhuǎn)盤時，他可以選擇概率均分的模式，也可以選擇自定義概率的模式。

2.2 觸發(fā)轉(zhuǎn)盤旋轉(zhuǎn)

此功能也是這個程序的核心，在市面上已經(jīng)有不少類似的小程序了，但是他們都只能夠通過按鈕來觸發(fā)轉(zhuǎn)盤的旋轉(zhuǎn)，為了能夠模擬更加真實的轉(zhuǎn)盤場景，該程序還特意實現(xiàn)了通過移動轉(zhuǎn)盤內(nèi)容區(qū)實現(xiàn)轉(zhuǎn)盤旋轉(zhuǎn)。

2.3 管理轉(zhuǎn)盤

此功能也是作為該程序的基礎(chǔ)功能之一。即對用戶所創(chuàng)建決定做相應的增刪改查的操作，程序中的決定分為用戶個人的決定和熱門決定，對于用戶個人的決定，可以放心地做所有增刪改查，但對于熱門決定用戶只能夠在熱門決定的基礎(chǔ)上修改成為自己的決定，而不能夠更改熱門決定以及刪除熱門決定。

2.4 作弊模式指定旋轉(zhuǎn)結(jié)果

此功能算是該程序最有亮點的功能了，是為了增加程序的趣味性特意增加的該功能。可以假設(shè)一個場景，當吃完飯決定誰洗碗的時候，如果這時候使用下決定的作弊模式來指定某一個人，并且不告訴他，相信這個時候這個小程序就能夠給這件枯燥乏味的事情帶來一些小樂趣了。

2.5 分享用戶的旋轉(zhuǎn)結(jié)果

用戶可以將自己的旋轉(zhuǎn)結(jié)果分享給微信好友，好友點擊分享卡片進入小程序，小程序會有一個初始旋轉(zhuǎn)的效果，并且旋轉(zhuǎn)結(jié)果為用戶分享的結(jié)果，并且系統(tǒng)將提示：Ta選中了……這里需要注意的是，作弊模式將不能分享。

3 系統(tǒng)設(shè)計

3.1 功能設(shè)計

1） 實現(xiàn)根據(jù)用戶輸入的轉(zhuǎn)盤選項進行轉(zhuǎn)盤的繪制。

2） 實現(xiàn)轉(zhuǎn)盤的旋轉(zhuǎn)，包括按鈕觸發(fā)和手勢觸發(fā)。

3） 實現(xiàn)旋轉(zhuǎn)結(jié)果的算法設(shè)計。

4） 實現(xiàn)作弊模式。

5） 實現(xiàn)對用戶個人決定的增、刪、改、查，熱門決定的查詢。

6） 實現(xiàn)對歷史記錄的增、刪、分享、查詢。

7） 實現(xiàn)分享用戶旋轉(zhuǎn)結(jié)果。

具體功能結(jié)構(gòu)如圖1所示。

3.2 系統(tǒng)總E-R圖

4 系統(tǒng)實現(xiàn)

4.1 轉(zhuǎn)盤的繪制

轉(zhuǎn)盤的繪制采用的canvas去進行繪制的?；镜乃悸肥沁@樣的：將轉(zhuǎn)盤上的每一個選項看成一個扇形塊，通過找到每一個扇形塊圓弧的起始坐標和終點坐標以及原點坐標，通過將這三點連接起來，再加上起始坐標與終點坐標之間的圓弧就可以繪制出一個扇形塊了，最后將扇形塊填充上指定的顏色，最后將扇形塊通過起始點的坐標連接起來即可形成轉(zhuǎn)盤的樣式。

在繪制轉(zhuǎn)盤時，首先就需要計算各選項之間的數(shù)據(jù)。在計算這些數(shù)據(jù)之前，必須知道角度與弧度之間的轉(zhuǎn)換公式：2 * Math.PI * 弧度 = 360°，這里為了方便理解，可以把轉(zhuǎn)盤的圓弧拉直，想象成一條直線。在繪制轉(zhuǎn)盤時，需要傳入一個數(shù)組作為繪制函數(shù)的參數(shù)，數(shù)組的每一項也就是轉(zhuǎn)盤上的每一個扇形塊，數(shù)組中每一項里會有一個該項所占總比例的多少的具體數(shù)值，這個數(shù)值就可以看成剛才所說的那條直線上的線段，也就是轉(zhuǎn)盤上扇形塊的圓弧。因為是通過canvas去進行繪制，canvas里有一個繪制圓弧的API，content.arc（）這個方法接受六個參數(shù)：圓心X坐標、圓心Y坐標、圓的半徑、圓弧的起始角度、圓弧的終點角度、是否是順時針繪制，所以需要將數(shù)組中的圓弧轉(zhuǎn)換成角度傳入這個API去進行繪制，然后再將數(shù)組中的文字填充到對應的扇形塊即可。最后再在圓心上繪制一個轉(zhuǎn)盤指針的底座，然后在找合適的三個點形成一個三角形做轉(zhuǎn)盤的指針，這樣就完成了整個轉(zhuǎn)盤的繪制。效果如圖3所示。

4.2 轉(zhuǎn)盤的旋轉(zhuǎn)

轉(zhuǎn)盤繪制完成后接著就可以將轉(zhuǎn)盤旋轉(zhuǎn)起來了。旋轉(zhuǎn)的基本思路是這樣的：上面說到轉(zhuǎn)盤中每一個扇形塊都有一個起始角度和終止角度，那么第一塊的起始角度就可以看作是整個轉(zhuǎn)盤繪制的起始角度，當我們按照每一個扇形塊的固定角度不停地更改每一塊的起始角度，通過連續(xù)地改變角度進行轉(zhuǎn)盤的繪制就形成了旋轉(zhuǎn)的視覺效果，效果如圖4所示。

4.3 手動旋轉(zhuǎn)轉(zhuǎn)盤的實現(xiàn)

當轉(zhuǎn)盤轉(zhuǎn)動起來之后，接下來要怎么實現(xiàn)手指在轉(zhuǎn)盤上移動，轉(zhuǎn)盤也跟著旋轉(zhuǎn)呢？具體思路是這樣的：當手指落下時需要記住手指落下的坐標，并隨時記錄手指移動的坐標，這兩個坐標與原點就形成了一個夾角，這個夾角就是轉(zhuǎn)盤需要移動的角度。如圖5所示。

移動夾角的計算可以通過sin、cos函數(shù)計算每一個點與x正向軸之間的夾角，也可以使用JavaScript的Math.atan2（）API去計算相應的角度，Math.atan2（）返回的是從原點（0，0）到（x，y）點的線段與x軸正方向之間的平面角度（弧度值）。當?shù)玫较鄳慕嵌戎笤賹⑦@個角度轉(zhuǎn)換成弧度，這個弧度也就是上面所說的轉(zhuǎn)盤需要移動的距離了。當手指在轉(zhuǎn)盤上移動的時候，不停地計算相應的夾角，再調(diào)用相應的轉(zhuǎn)盤繪制函數(shù)就可以實現(xiàn)手動旋轉(zhuǎn)轉(zhuǎn)盤了。三角函數(shù)夾角計算如圖6所示。

4.4 自定義概率方法的實現(xiàn)

旋轉(zhuǎn)轉(zhuǎn)盤每一個選項都可以選擇1～99之間的數(shù)值，那么當該項選定自己的值之后，它所占的比例就是全部選項的值除以本身的值，當這個值越大那么生成的轉(zhuǎn)盤該扇形塊的面積就越大，因為上面說到當繪制轉(zhuǎn)盤時，會傳入一個數(shù)組作為每個扇形塊的數(shù)值，數(shù)組中每條數(shù)據(jù)都有自己所占的比例對應的圓的弧度值。自定義概率實現(xiàn)效果如圖7所示。

4.5 轉(zhuǎn)盤旋轉(zhuǎn)結(jié)果的算法實現(xiàn)

因為涉及自定義概率，也就是每個選項的概率不一定一致，因此我們需要設(shè)計一個算法去對結(jié)果進行計算，基本的思路是這樣的：因為選項最多支持12項，所以我們可以把所有的決定的選項都看作是12項，也就是把所有的決定轉(zhuǎn)盤都看作有12個扇形塊，每個扇形塊的面積一樣，那么概率問題就轉(zhuǎn)換為每個選項占多少個扇形塊的問題了。比如有三項概率均分的選項，那么每一項就占四個扇形塊，用它們的索引作數(shù)組項的話，我們就可以得到這樣一個數(shù)組：[0，0，0，0，1，1，1，1，2，2，2，2]。如果有三項自定義概率的選項，它們的概率分別設(shè)置為（10，20，30），那么通過計算，它們所占的圓弧比例就分別為（1/6， 1/3， 1/2），然后通過計算就可以得到最后的概率數(shù)組是：[0，0，1，1，1，1，2，2，2，2，2，2]，因為選中每一個扇形塊的概率是一樣的，當對應選項所占的扇形塊越多，概率也就越大。這樣就實現(xiàn)了轉(zhuǎn)盤結(jié)果的計算。

4.6 作弊模式的實現(xiàn)

隨機旋轉(zhuǎn)實現(xiàn)時，可以在旋轉(zhuǎn)之前就找到對應的結(jié)果下標，只是之前討論的都是隨機從各扇形塊之間取隨機值，當用戶選擇使用作弊模式后，就可以跳過隨機選取扇形塊這一步，之間將用戶選取的選項索引傳入旋轉(zhuǎn)的函數(shù)中，然后在這個選中的扇形塊的圓弧之間隨機取一個點，計算轉(zhuǎn)盤起始點與這個點間的弧度，也就知道轉(zhuǎn)盤需要旋轉(zhuǎn)的弧度了。這里值得一提的是，當用戶選擇了作弊模式，那么每一次的旋轉(zhuǎn)結(jié)果都將是這個結(jié)果，除非用戶手動取消這個結(jié)果。取消的入口也設(shè)計在打開作弊模式的入口里，這樣保證了功能的獨立性，避免出現(xiàn)UI上的冗余。作弊模式運行效果如圖8所示。

4.7 分享功能的實現(xiàn)

關(guān)于分享功能，在這個程序里不僅做了簡單地分享，還對用戶從分享的卡片進來的效果做了處理。就是當用戶將自己的旋轉(zhuǎn)結(jié)果分享出去的時候，會在這個分享中帶上相應的參數(shù)，也就是用戶分享出去的決定ID和選中的索引，這樣的當被分享的用戶從分享入口進入小程序的時候，轉(zhuǎn)盤會直接進行一次轉(zhuǎn)動，結(jié)果也是用戶分享出去的結(jié)果，這時，提示就是：「他選中了……」，這樣也在一定程度上提升了用戶的體驗，效果圖如圖9所示。

5 結(jié)束語

針對一些同類的小程序進行使用、體驗和分析，本小程序更全面、個性化更高、體驗更好，在原有隨機旋轉(zhuǎn)旋轉(zhuǎn)的基礎(chǔ)上增加了個性化定制轉(zhuǎn)盤、點擊按鈕選擇轉(zhuǎn)盤、分享轉(zhuǎn)盤的旋轉(zhuǎn)結(jié)果、默認提供熱門決定等功能，并且添加了作弊模式指定旋轉(zhuǎn)結(jié)果、自定義轉(zhuǎn)盤選項概率、根據(jù)手勢移動轉(zhuǎn)盤等亮點功能，從產(chǎn)品的UI設(shè)計完整性上盡可能給用戶提供最舒適的體驗。關(guān)于技術(shù)的選型上，在調(diào)研了各種技術(shù)棧之后選擇了微信小程序開發(fā)，在數(shù)據(jù)庫和后端的處理方面選擇了微信官方提供的云開發(fā)，云開發(fā)提供了一定限額的云數(shù)據(jù)庫以及更方便獨立開發(fā)者的相關(guān)功能，進一步的減少了開發(fā)的成本，最終得以成功上線并進行運營，上線小程序二維碼如下圖10所示。

參考文獻：

[1] 張帆， 陳思含. 微信小程序開發(fā)零基礎(chǔ)入門[M].北京：電子工業(yè)出版社，2017.

[2] 阮一峰. ES6標準入門[M].3版.北京：電子工業(yè)出版社， 2017.

[3] 王延平. 21天精通微信小程序開發(fā)[M].北京： 電子工業(yè)出版社，2017.

[4] Nicholas C Zakas. JavaScript高級程序設(shè)計[M].曹力， 張欣， 等譯.北京：人民郵電出版社，2006.

[5] 高洪濤. 從零開始學微信小程序開發(fā)[M].北京：電子工業(yè)出版社，2017.

[6] 樸靈. 深入淺出Node.js[M].北京：人民郵電出版社， 2013.

[7] 斯皮勒. Node.js開發(fā)實戰(zhàn)[M].北京：人民郵電出版社， 2009.

[8] 周俊鵬. 前端工程化：體系設(shè)計與實踐[M].北京：電子工業(yè)出版社， 2018.

[9] 夜雨. Sketch交互設(shè)計之美：從零基礎(chǔ)到完整項目實現(xiàn)[M].北京：北京大學出版社 2018.

[10] 騰訊微信官方.微信開發(fā)文檔[EB/OL].[2020-02-20]. https：//developers.weixin.qq.com/miniprogram/dev/framework/.

【通聯(lián)編輯：謝媛媛】