閑暇里，想學一下微信小程序，
於是，用微信小程序原生做了個掃雷玩。
以下略作總結，分享給大家。
微信里下拉，輸入【mini計算器】，
看到這個圖標的就是了：
說好的掃雷，怎么變成計算器了？原因后面解釋...
初探小程序
入門非常簡單，想做很好不容易。
對於稍有 web 開發基礎（主要是前端）的人來講，
入門微信小程序確實非常簡單，看，文件結構：
以頁面名為文件夾，其下包含該頁面的四個文件：
-
js文件
[pagename.js]里面就是JS代碼 -
wxml
[pagename.wxml]是書寫頁面結構的文件，相當於[.html] -
wxss
[pagename.wxss]是書寫頁面樣式的文件，相當於[.css] -
json文件
一個配置文件，可以針對該頁面做配置，覆蓋掉上層配置。
其中，一個頁面必須有[.js]文件和[.wxml]文件，
樣式文件[.wxss]和配置文件[.json]是可以省略的。
不同於最外面的[app.json]，
page下的單個頁面的[.json]文件，
只對當前頁面的窗口表現進行配置。
（也就是僅僅是app.json里的子項目：window）
就前端頁面三大件（js、html、css）而言，
摸起來的手感 寫起來的感覺是一樣的，
所以說入門十分簡單，可以說沒啥門檻；
但因為又有很大差異，所以做好不容易。
（本次小樣例不涉及任何第三方框架）
首先，
頁面元素方面，並不能使用 html 的標簽，
而是要使用微信小程序提供給的基本組件，
或者封裝自定義組件。
比如，你的 html 可以通篇 div 搞下來
（當然這不科學，應當按照語義化來使用標簽），
在 wxml 里可以全用對應的基本標簽 view，
來布局實現一個簡單頁面。
第二，
在樣式文件中，雖然寫法基本一致，
但有一些卻是不支持的，比如動畫。
在小程序中，要用js調用animate方法。
而要讓動畫循環播放，在 css 中，
只要在animation中指定infinite就可以，
但在小程序的js中，就得通過定時器來實現，
而且，還有坑（最佳實踐肯定是要借助第三方庫）。
第三，
再說說js文件。
因為小程序代碼是限定在微信小程序特定的環境下，
所以跟web的js環境是不一樣的。
- 不能直接訪問頁面元素，沒有 document 這樣的對象
- 用過前端框架的會覺得熟悉，代碼寫在人家框架下
（App對象，Page對象。。） - 不能使用像
eval、Function之類的方法
關於發布
一定要閱讀官方制定的規則
按說，所有的小程序發布，都要選擇合適的分類的。
分類有兩級，可以看下現在都有什么分類：
（截幾個圖感受一下）
規則中就有，所選類目必須要與自己的小程序是相符的。
我在發布時，粗略通讀了官方要求的內容，
其中有一條不允許自動播放視頻音頻，
於是就改掉了掃雷中自動播放的背景音樂，
以免因不合規影響審核的通過。
這里還有提一點的就是，
小程序與小游戲，
微信推出小程序后，本來是不允許發布游戲類的，
后來開放了游戲，不過作為小游戲，
雖然廣義上屬於小程序（申請小程序，選擇類目：游戲，
就變成小游戲了，開發時是有區別的），
其實是完全不同的！
代碼構成不同，運行環境不同，開發的接口不同，
小游戲實際上只是給你提供一個 canvas 畫布，
而普通小程序就相當於web頁面了。
所以，根本上就是不同的。
關於開發
首先，
去注冊一個小程序，在新建項目時要填AppID，
或者，
不注冊的話在微信開發工具新建時選擇測試ID。
注冊的話，需要用一個沒有注冊過任何跟微信相關的郵箱。
已綁定過公眾號或小程序的郵箱不可以。
現在小程序支持注銷了，注銷之后的郵箱是可以用的。
開發環境
首先，
下載官方的【微信開發工具】，
一個並不太好用的IDE，但是離不開它。
因為只有它可以讓你編譯和預覽。
新建項目界面：
然后，
上我們的主力工具：Visual Studio Code，
即 VSCode；安裝一個插件：miniapp。
於是就可以愉快的開發了。
開發完了
可以在微信開發工具點版本管理，
能提交到微信公眾平台的體驗版上。
審核
在微信公眾平台將體驗版提交審核，
審核時間為1到7天，會有通過的通知，
通過之后，就是可將審核通過的版本發布上線了。
體驗版可以邀請開發者掃碼體驗，
開發版只有在開發時掃碼在真機啟動。
（總共有三種：開發版，體驗版，發布版）
掃雷
終於到了本文主題中的[掃雷]環節。
本來應當是作為游戲去開發，
一開始就用頁面寫出來實現的，
所以，發布的時候，怎么選類別，
就成了大難題，原因上面提到了。
因為它的本質是小程序，
所以如果選游戲類就編譯不了了，更沒法發布，
選小程序有沒有合適的類目可選，
沒辦法，把它嵌套進另外一個小程序里吧，
【mini計算器】是我寫的另外一個小程序，
簡單界面和功能，計算器，加一個跳轉入口，
引導到掃雷頁面，就可以作為工具里的計算類別。
本來還擔心審核能不能通過，結果欣慰啊。
很開心寫了能發布。
玩一把吧
打開[mini計算器]小程序，看到的是計算器界面，
這個沒啥好玩的，點上面的[經典掃雷益智]，
選擇難易度[簡單/一般/困難]，就進入游戲了。
右上角有一個音樂符號點擊可以打開或關閉背景音樂。
多么懷舊啊，是不是讓你想起了當年在XP機器上的歡樂時光啊。
設計它並不復雜，主要注意兩點：
-
雷區單元格的幾個狀態
初始化/翻開是數字/翻開是雷/翻開是空/已被標記/踩到雷 -
點擊單元格后，是不是雷，
不是類的時候，是數字還是空白，
是數字的時候，不同數字不同顏色，
是空白的時候，要循環遞歸翻開周圍的格子直到非空
其它，布局上用flex很容易實現。
最后一點吧，就是關於雷的分布，
最初代碼中用了最簡單的實現辦法，
就是通過Math.ramdom這個隨機數方法，
被大佬反饋，雷分布不均，
打算改用洗牌算法讓它均勻，
改了還得提交審核，等。
mini計算器
這個更簡單，沒啥好說的，
主要是解決丟失精度問題。
如圖：
當然，這種不合理現象在我們的簡易計算器里是不存在的
其次就是，點擊數字與點擊各個功能按鈕的業務邏輯，
包括要實現計算式（輸入歷史）的顯示，
這里面改了好多bug呢（捂臉）
附
源碼
mini-cale
https://gitee.com/coder-monkey/mini-calc
完全開源，都看到這兒了，點個star再走唄，又不要錢。
官方文檔
微信小程序 官方文檔地址
https://developers.weixin.qq.com/miniprogram/dev/framework/
通過本文的介紹應該能讓你了解個大概吧，
要上手開發自己的小程序的話，
多翻翻官方文檔，
你一定行的！
有任何問題可以給我發消息~
我也在不斷學習