家好，這里是正驚游戲，我是正驚小弟。

在這個文化生活日益豐富的時代，無論是電影明星、電視明星、抖音網紅還是游戲主播，都或多或少有著一群粉絲在背后默默地支持著他們，而由于粉絲群體來自不同年齡段、不同職業以及不同的興趣圈，因此追星的方式都不盡相同。

而作為喜愛著游戲同時也熱衷于追星的玩家群體，由于天生玩心很重，因此相對于其他粉絲群體，有著自己對明星更加獨特的情感表達方式，今天就讓我們來看看當玩家追起星來，到底有多拼。

最沙雕追星——黑粉自制蔡徐坤打籃球頁游！

最近最火的明星鬼畜素材，莫過于蔡徐坤，許多玩家將其做成了MOD，但最秀的還是@yangyuanhe369這位大佬，把“cxk打籃球”做成了一款網頁小游戲。

游戲的玩法就是經典的“打磚塊”，這是一款1975年就在街機上推出的小游戲。玩法簡單，想必許多玩家小時候都有玩過，只需要用鍵盤的方向鍵，控制蔡徐坤的方向就可以，如果沒接到球的話，就會獲得“CXK，你球掉了”這樣的提示。小弟我自己是沒通關最高難度，通關之后會獲得什么彩蛋，小弟我也不知道。

不過玩完這款游戲，說實話也蠻難受的，畢竟玩家需要無限洗腦循環“雞你太美”。

最硬核追星——硬核玩家竟然為明星開發游戲！

普通粉絲們在追星的時候正常都會選擇在演唱會上為其吶喊助威，或者在直播間里瘋狂地刷禮物，但是為了自己喜歡的明星開發出游戲來，則不是普通玩家和粉絲們能夠做到的事情。

在百度貼吧“楊超越吧”舉行的“楊超越杯編程大賽”上，來自全國各地（或者可以說世界各地）的楊超越粉絲們在吧主的倡議下，以最多5人小隊的形式，制作與楊超越相關的游戲、網頁、工具來參加比賽，而這個比賽也吸引了大量并非楊超越粉絲的硬核程序員們來參賽。

總計超過200名硬核粉絲和程序員們提交了近百個作品，除了簡單的數據分析工具、網站平臺以及各種小游戲以外，竟然還有粉絲開發了一款名為《超越傳說》的塞爾達傳說風的RPG動作游戲！

游戲的宣傳視頻一經放出，便讓許多玩家驚嘆于粉絲當中果然是人才濟濟，三五個人就能搞出一個游戲來，而它也成為了整個比賽中最為硬核的游戲作品，并在初賽階段獲得了第一名！

最霸氣追星——《絕地求生》制作人為內馬爾定制服務器

作為游戲界的大佬，《絕地求生》的制作人及其團隊可以說是眾多玩家心目中的明星，但是和其他玩家相同的是，他們同樣有著自己喜歡的明星，而這個明星，則是西方國家人民也非常喜歡的足球明星——內馬爾。

在被足球耽誤的吃雞選手內馬爾癡迷《絕地求生》并和朋友主播一起開黑后，他竟然給《絕地求生》的開發團隊發了一個推特，索要一個自定義服務器。而這樣的請求在常人眼中根本就是癡人說夢，而且官方曾表示停止接受自定義服務器的申請。

但是對于喜歡內馬爾的《絕地求生》制作人來說，這都不是事，馬上就答應了他的請求，Playerrunknown回復說“請給我發個私信，我會讓團隊里相關負責人跟進！”。不僅如此，在內馬爾生日的時候，《絕地求生》官方還送出了為內馬爾準備的禮物，包括背包、帽子、吃雞玩偶，還有四級盔——平底鍋！

在對待自己喜歡的明星這件事情上，不管是普通玩家還是游戲制作人這樣的高級玩家，也都是賣力地在追星?。?/p>

最惡搞追星——77位粉絲在吃雞中圍堵林更新

在廣大玩家眼中，追星一般都是在手機視頻、電視節目前看著影像中的明星，默默地支持，但是當明星出現在玩家的身邊，可以近距離接觸到時，玩家又會做出怎樣瘋狂的事情？

這次的主角是林更新，而他雖然沒有真正地出現在玩家們的身邊，卻在吃雞里和玩家們親密接觸，讓每一個玩家都可以跑到他跟前跟他嘮兩句，甚至拿起武器來比劃比劃。這樣美麗的場景之下，玩家們是不是應該聚集在自己的愛豆面前，親切地看著他，聽他帶有磁性的聲音呢？

可惜在吃雞里，林更新卻體驗了一次真正的“追星”，而且是在赤手空拳的情況下被77個粉絲追著滿地圖跑。

而這些粉絲們也并不是要在追到明星后一起守護他的電競夢，而是要用平底鍋把林更新的腦袋拍扁！這群執著的粉絲們追了幾條街道，翻過了幾座大山，還逼著林更新跳到了水里，依依不饒。

最后，在七十多個饑渴的粉絲的圍攻下，林更新的腦袋被平底鍋拍扁了，而這次的追星活動也以粉絲玩家的勝利告終，他們真的追到了明星，同時也教他做人，給他留下了深刻的陰影！

最護短追星——圣槍哥為追星怒懟粉絲承認自己真菜

在游戲界，基本上所有玩家都不會承認自己菜，因為不管誰來挑戰自己，都可以用“不服來solo”懟過去。

但是在遇到自己喜歡的明星被黑時，為了維護她，服軟和護短絕對是義不容辭的，而這次的主角圣槍哥不僅維護明星，怒懟粉絲，還親口承認自己菜，到底是怎么一回事？

圣槍哥作為SS戰隊里的上單，參加了今年的LPL春季賽，但是在第一場比賽中，SS戰隊就以1-2輸給了BLG，而且后續比賽中明星選手圣槍哥更是以0-6的成績在15分鐘的時候就被推平了一血塔，這樣的表現讓對他寄予厚望的粉絲們難以接受，甚至于將圣槍哥技術變差的原因歸結于他此前在微博上瘋狂追星的行為。

但是對于粉絲們的猜測和質問，圣槍哥直接就給與了反駁，而且為了防止因為自己的原因而讓喜歡的偶像背鍋，便在賽后怒懟粉絲，甚至于讓粉絲私信噴他，或者買票到現場噴他，絲毫不想讓自己的偶像形象受損。

對于一個游戲玩家來說，為了追星，甘愿承認自己菜，也只能說他已經是一名死忠粉了。

最真愛追星——LOL職業玩家為追星修改游戲神ID

作為RNG戰隊的打野選手，MLXG擁有著大量的粉絲，雖然他沒有參加今年年前的LPL賽區春季賽，但是由于經常活躍在游戲直播間里，而且在直播游戲時也經常做出一些吸睛舉動，因此很受玩家粉絲的喜愛。

而除了普通玩家會追星捧MLXG以外，竟然還有職業選手粉絲也對這位打野選手喜愛有加，不僅如此，他追星的方式也非常直接，那就是直接更改了自己在歐服注冊的游戲ID，而且這個神ID也讓許多網友直呼真實，因為這個ID就是“劉世宇”，也就是MLXG的真名！

不僅如此，這位來自SK的職業選手，他的段位比偶像的段位還要高，卻也依然在追星，可見MLXG這位來自LPL賽區的打野選手，已經名揚海外了。而且這樣的行為，也可以感覺到這位職業選手對MLXG的喜愛，也確實是出于真愛！

一個正驚問題：蔡徐坤打籃球頁游，你能打到第幾關？

言

大家好，我是練習時長5年半的個人程序員菜虛鯤，我喜歡唱，跳，rap，籃球，CTRL！

在小作坊待久了，都忘記自己的本職工作當初進來是一枚Android開發了，寫寫下APP和py腳本，

偶爾幫人修修電腦。感覺如果自己大只點，可能飲水機的水都要我來換了…

因為一些原因，舊APP不再更新迭代了，新的APP沒開始做，不想賠錢把我開掉，

就把我晾著摸魚。而我自己比較臘雞，感覺出去會找不到好的工作（不想再去

小作坊，一個人玩好累，感覺再這樣下去，會廢掉…）

晾著摸魚不做事，工資照發，管理肯定不愿意啊，要給我找點事做做咯：

要不你學下前端吧，做下小程序，后面做APP了，你再回去做APP…

我TM，說得好像學東西不用學習成本一樣，特別是跨域，最怕最后四不像，啥也什么都學得半桶水，

如果真轉的話，我更想轉后端，畢竟前端技術更新換代速度實在是太快了，是真的快，學不來學不來。

小程序外包的單子挺多的，畢竟開發一個小程序的成本比APP少太多，很多甲方爸爸動不動就要做一個小程序，學了小程序，以后可以接點外包茍活下…

自己摸索著玩了一個多星期，有點意思：

老規矩，記錄下自己的學習過程，方便自己日后回顧，也方便后來者?？催^網上很多

《從零開始學習微信小程序開發》類型的教程，大都廢話太多，或者不是真的零基礎

入門，學著學著者突然來些高深玩意，看得我頭皮發麻讀者一臉懵逼，筆者深知自學

循序漸進的重要性。另外，之前群里有小火汁問我學東西為啥那么快，其實，我學東西

還真不快，主要有幾點：順帶分享下自己的學習姿勢吧~

①興趣驅動：「你想學」而非「要你學」，主動去探索而非被動接受。

②專注：心無旁騖，別一下折騰這個，一下子又折騰那個，三分鐘熱度。

③反思總結：及時總結歸納，形成自己的知識脈絡，同時反思學習過程中的一些問題。

④去實踐：你掌握多少知識，取決于你能調用多少，而非記憶了多少知識。

⑤度：把握一個度，知道自己要學習到什么程度，不要去鉆牛角尖，等等。

大概就這些，筆者是前端小白，并不會深刨，只是希望初學者學完這個系列可以擼

出一個簡單基本的小程序?，F學現賣，難免有錯，還望海涵，歡迎前端大神指出。如無

意外，一周1-2更。不要有太多期待，因為還在準備Android面試相關。廢話就那么多，

開始本系列教程。

0x1、你看這個面又長又寬（開發環境搭建）

官網點擊：「指南」-> 「開始」

1、申請賬號

賬號可以申請也可以不申請不是一定要申請賬號，如果你只是想自己瞎玩不發布的話，可以跳過這一步。

當然，你也可以申請，申請后會給你的小程序分配一個「AppID」，類似于身份標識。

可以在小程序后臺，依次點擊「設置」->「開發設置」獲取到這個「AppID」：

2、下載安裝微信開發者工具

官網依次點擊「工具」-> 「下載」，或者直接打開下述鏈接跳轉下載：

developers.weixin.qq.com/miniprogram…

用哪個版本看個人喜歡，筆者用的是開發版，你也可以使用穩定版，下載完以后，

無腦下一步安裝即可。安裝完后，其實就可以直接進行小程序開發，只是微信開發者

工具自帶的IDE比較簡陋，沒有自帶api智能提醒和語法高亮等，寫起代碼來不是

很順手，所以一般只是拿微信開發者工具來「看下運行效果」和「調試」，

寫代碼的話用的看看運行效果，調試，二用第三方的IDE來編寫

代碼，常見的兩款組合：

VS Code+minapp插件

Sublime Text 3+Sublime wxapp插件

筆者使用的是前者，接著說下VS Code的下載安裝。

3、下載安裝VS Code并安裝minapp插件

VS Code直接在官網下載就好：code.visualstudio.com/，默認英文。

如果你想使用中文可以按快捷鍵：

然后在彈出的對話框中輸入：「Configure Language」，如圖：

接著點擊「Install additional languages…」，如圖：

點擊后左側會出現一個插件安裝的，選擇中文，如圖：

安裝完，提示重啟，重啟后就是中文了，接著安裝一波minapp插件。點擊左側邊欄

的第四個圖標，然后搜索欄鍵入「minapp」，然后點擊Install進行安裝，如圖：。

安裝后可能需要重啟，重啟即可。除此之外，還安利一個插件：「wechat-snippet」，

自動生成微信代碼片段，如果想了解更多插件可見VS官網：marketplace.visualstudio.com/

自己是從事了五年的前端工程師，整理了一份2019最全面前端學習資料，需要的伙伴可以私信“前端”獲取領取地址，對于學習web前端有任何問題（學習方法，學習效率，如何就業）都可以問我。

0x2、就像這個碗又大又圓（創建項目）

直接打開微信開發者工具，可以「新建項目」或者「導入項目」，填寫項目相關的信息，

這里如果你沒有申請賬號的話可以用隨機生成的AppID，如圖所示：

0x3、你們來這里吃飯（界面熟悉）

創建后會自動生成相關代碼，創建后的頁面如圖所示：

簡單介紹下，圈住的頁面內容如下：

簡單說下頁面中圈住的部分都是些什么：

①菜單欄：提供項目，文件，編輯等相關操作，自己點開看就知道了。

②視圖開關：控制模擬器，編輯器和調試器視圖的顯示和隱藏。

③模擬器：模擬小程序在手機上的界面效果，上面的欄可以進行模擬器的相關配置：

模擬器分辨率、縮放比例、連接網絡方式、模擬操作、是否靜音、獨立成小窗口。

④編輯器-項目文件目錄：小程序文件目錄，頂部菜單依次為：添加文件、搜索文件、

從硬盤打開、折疊某個目錄，隱藏。

⑤編輯器-文件內容編輯：就是編寫代碼的地方。

⑥調試器：定制版的Chrome開發者工具，用于調試：頁面結構，CSS，抓包，AppData等。

⑧編譯相關：可以選擇編譯選項：普通編譯，添加編譯模式(直接打開特定頁面)或通過二維碼編譯，點擊編譯即可進行編譯。點擊預覽可以生成二維碼，然后在手機上查看效果。

⑨真機調試：同樣是生成二維碼掃描看效果，不過多了調試功能。

⑩切后臺：切換場景值。

?清緩存：就是清理緩存，可以清理：數據，文件，授權，網絡，登錄狀態。

?版本管理：小程序項目Git版本管理。

?詳情：項目的相關信息，項目配置，以及域名信息配置。

?頁面路徑：當前頁面的路徑，場景值和頁面參數。

關于微信開發者工具的界面的簡單介紹就到這里，接著我們來說下小程序的基本結構。

0x4、覺得飯很好吃（基本結構）

1、四類文件

小程序一般由下面四類文件組成：

json：配置文件，頁面和開發工具的相關配置。

wxml：模板文件，堆砌控件形成小程序頁面，有點像HTML。

wxss：樣式文件，調整頁面樣式，有點像CSS。

js：腳本邏輯文件，完成一些邏輯處理操作，比如發起請求，事件觸發等。

簡單點說：wxml里寫頁面，wxss里寫樣式，js里寫邏輯，json里改配置。

2、三個重要的配置文件

①開發工具配置：「project.config.json」

開發者工具的統一配置，界面設置以及云函數相關，更多可見：

developers.weixin.qq.com/miniprogram…

②小程序全局配置：「app.json」

比如：頁面路徑列表，默認窗口，底部tab欄，網絡超時等，更多可見：

developers.weixin.qq.com/miniprogram…

③單頁面配置：「page.json」

使用「同名.json」文件來對本頁面的窗口表現進行配置，會覆蓋app.json的window

中相同的配置項，更多可見：

developers.weixin.qq.com/miniprogram…

0x5、就像我給你們拉面一樣很開心（小程序初體驗）

接著，通過編寫一個簡陋的頁面，來體驗下小程序的開發~

1、全局窗口配置

先來配置一波小程序的窗口，要求如下：

蕾姆藍背景，白色文字，菜單欄顯示摳腚男孩

打開app.json文件，添加下述配置：

編譯運行后，效果如圖所示：

2、編寫簡陋頁面

接著開始著手編寫這個簡陋頁面，定義一個頂部頭像，新建asserts文件夾，

用來存放靜態資源文件，接著往index.wxml中添加一個image控件：

<image src="../../assets/codingboy.png" />

編譯運行后，效果如圖所示：

3、調整樣式

可以，很騷氣，但是作為頭像有點太大了，調整一下它的樣式，打開 index.wxss，添加一個類選擇器：

image標簽設置一下這個選擇器：

<image class="user-icon-image" src="../../assets/codingboy.png"/>

編譯運行后，效果如圖所示：

Tips：這里還可以利用寬高自適應的，即：設置寬度，保持原圖寬高比不變，高度自動變化。

為image標簽設置屬性：mode="widthFix"，效果是一樣的。

4、獲取用戶授權

這里有個需求：

如果已經獲取了用戶授權，就顯示微信頭像，否則顯示這個默認頭像

在index.wxml中添加一個用于獲取用戶昵稱和頭像的按鈕

<button open-type="getUserInfo">獲取頭像昵稱</button>

編譯運行后，點擊按鈕會彈出一個授權對話框：

點擊允許即可完成授權，但是授權的信息并沒有保存起來。

5、獲取授權信息

授權是授權了，但是信息卻沒有拿到，button有一個屬性：bindgetuserinfo，

當用戶點擊按鈕時，會返回獲取到的用戶信息，我們在這里綁定一個保存用戶信息

的回調函數，在index.js中添加下述代碼直接把授權信息給打印出來：

接著index.wxml中綁定一下：

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">獲取頭像昵稱</button>

清一波緩存，然后重新編譯，點擊獲取頭像昵稱的按鈕，對話框授權，在Console可以

看到用戶的相關信息：

6、保存授權信息

授權信息可以獲取到了，接下來我們通過定義一個變量的方式把信息保存下來，

另外，我們還需要定義一個變量作為是否獲得授權信息的標記，用于控制顯示

微信頭像還是默認頭像，打開index.js添加下述代碼：

修改下getUserInfo函數，修改后的代碼如下：

另外授權信息，其實可以通過app.globalData.userInfo獲取，在程序初始化的

時候在onLoad函數中去獲取下，添加一個onLoad函數，代碼如下：

7、wx:if，wx:elif，wx:else判斷結構

接著在index.wxml中通過 wx:if 判斷是加載默認圖還是微信頭像，代碼如下：

運行后可以看到顯示的是微信用戶昵稱和頭像，如圖：

接著調整一下樣式，外層包一個view，接著讓這兩個東西居中：

有點擠，頂部加padding，圖片圓角，調整背景顏色，index.wxss添加：

接著修改下index.wxml，代碼如下：

運行結果如下：

8、單機版天氣預報(wx:for循環結構)

只是點擊授權然后獲取頭像顯示，感覺好low，跟官方的例子有啥區別，加個

天氣預報的東東吧，這里采用的天氣接口是：魅族天氣API，接口地址如下：

aider.meizu.com/app/weather…

訪問看下，返回的數據如下：

開發初期，為了提高開發的效率，會先造假數據，前后端約定好接口的返回數據。

由后端寫一個接口返回假數據，或者前端本地跑一個mock服務器，也可以直接寫

死在程序中。這里為了方便，直接寫死，在index.js的page中添加下述數據：

接著index.wxml添加控件：

運行結果如下：

文字都堆疊到一起了，設置下樣式：

接著每個text設置下message-text這個類選擇器，運行效果如下：

接著把indexes里的數據也顯示出來，通過wx:for循環生成結點：

運行后結果如下：

文本都堆在一起密密麻麻的，寫個樣式：

運行結果如下

9、網絡版天氣預報(wx.request發起請求)

單機版的就完成了，接著通過wx.requests來請求接口，實現一個網絡版的天氣預報。

index.js中新增刷新天氣的函數

接著按鈕設置下點擊時觸發這個網絡請求：

<button style="margin-top: 50rpx" bindtap="refreshWeather">刷新天氣</button>

因為接口是http的，還需要微信開發者工具點開詳情，勾選下：

接著點擊運行，點擊刷新天氣，在Network選項卡可以看到發出的請求信息：

然后咧，微信小程序的視圖層和邏輯層類似MVVM模式，邏輯層只需對數據對象

更新，即可改變視圖層的數據數據顯示，這里setData后，對應的控件也會改變。

到此一個非常簡單的天氣預報小程序就完成了。

小結

本節介紹了微信小程序開發環境的搭建，開發一個簡易天氣小程序體驗了一波微信

小程序，相信讀者對于微信小程序有個基本的了解了，接下來的章節會慢慢細化

一些知識點，比如控件定位，UI相關，請求封裝，開源開發框架WePY等等，敬請期待~