整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
刀PPT提供免費總結(jié)報告PPT模板，籃球場籃球比賽PPT模板，模板是設(shè)計好的PPT模板直接打開編輯即可。
頁數(shù)：24頁
編號：PPT91122
大小：1.41MB
軟件：PowerPoint
格式：PPTX
比例：16:9
復(fù)制下載：
101dao.com/ppt/ppt-PPT91122.html
家好，這里是正驚游戲，我是正驚小弟。
在這個文化生活日益豐富的時代，無論是電影明星、電視明星、抖音網(wǎng)紅還是游戲主播，都或多或少有著一群粉絲在背后默默地支持著他們，而由于粉絲群體來自不同年齡段、不同職業(yè)以及不同的興趣圈，因此追星的方式都不盡相同。
而作為喜愛著游戲同時也熱衷于追星的玩家群體，由于天生玩心很重，因此相對于其他粉絲群體，有著自己對明星更加獨特的情感表達(dá)方式，今天就讓我們來看看當(dāng)玩家追起星來，到底有多拼。
最沙雕追星——黑粉自制蔡徐坤打籃球頁游！
最近最火的明星鬼畜素材，莫過于蔡徐坤，許多玩家將其做成了MOD，但最秀的還是@yangyuanhe369這位大佬，把“cxk打籃球”做成了一款網(wǎng)頁小游戲。
游戲的玩法就是經(jīng)典的“打磚塊”，這是一款1975年就在街機上推出的小游戲。玩法簡單，想必許多玩家小時候都有玩過，只需要用鍵盤的方向鍵，控制蔡徐坤的方向就可以，如果沒接到球的話，就會獲得“CXK，你球掉了”這樣的提示。小弟我自己是沒通關(guān)最高難度，通關(guān)之后會獲得什么彩蛋，小弟我也不知道。
不過玩完這款游戲，說實話也蠻難受的，畢竟玩家需要無限洗腦循環(huán)“雞你太美”。
最硬核追星——硬核玩家竟然為明星開發(fā)游戲！
普通粉絲們在追星的時候正常都會選擇在演唱會上為其吶喊助威，或者在直播間里瘋狂地刷禮物，但是為了自己喜歡的明星開發(fā)出游戲來，則不是普通玩家和粉絲們能夠做到的事情。
在百度貼吧“楊超越吧”舉行的“楊超越杯編程大賽”上，來自全國各地（或者可以說世界各地）的楊超越粉絲們在吧主的倡議下，以最多5人小隊的形式，制作與楊超越相關(guān)的游戲、網(wǎng)頁、工具來參加比賽，而這個比賽也吸引了大量并非楊超越粉絲的硬核程序員們來參賽。
總計超過200名硬核粉絲和程序員們提交了近百個作品，除了簡單的數(shù)據(jù)分析工具、網(wǎng)站平臺以及各種小游戲以外，竟然還有粉絲開發(fā)了一款名為《超越傳說》的塞爾達(dá)傳說風(fēng)的RPG動作游戲！
游戲的宣傳視頻一經(jīng)放出，便讓許多玩家驚嘆于粉絲當(dāng)中果然是人才濟濟，三五個人就能搞出一個游戲來，而它也成為了整個比賽中最為硬核的游戲作品，并在初賽階段獲得了第一名！
最霸氣追星——《絕地求生》制作人為內(nèi)馬爾定制服務(wù)器
作為游戲界的大佬，《絕地求生》的制作人及其團隊可以說是眾多玩家心目中的明星，但是和其他玩家相同的是，他們同樣有著自己喜歡的明星，而這個明星，則是西方國家人民也非常喜歡的足球明星——內(nèi)馬爾。
在被足球耽誤的吃雞選手內(nèi)馬爾癡迷《絕地求生》并和朋友主播一起開黑后，他竟然給《絕地求生》的開發(fā)團隊發(fā)了一個推特，索要一個自定義服務(wù)器。而這樣的請求在常人眼中根本就是癡人說夢，而且官方曾表示停止接受自定義服務(wù)器的申請。
但是對于喜歡內(nèi)馬爾的《絕地求生》制作人來說，這都不是事，馬上就答應(yīng)了他的請求，Playerrunknown回復(fù)說“請給我發(fā)個私信，我會讓團隊里相關(guān)負(fù)責(zé)人跟進！”。不僅如此，在內(nèi)馬爾生日的時候，《絕地求生》官方還送出了為內(nèi)馬爾準(zhǔn)備的禮物，包括背包、帽子、吃雞玩偶，還有四級盔——平底鍋！
在對待自己喜歡的明星這件事情上，不管是普通玩家還是游戲制作人這樣的高級玩家，也都是賣力地在追星啊！
最惡搞追星——77位粉絲在吃雞中圍堵林更新
在廣大玩家眼中，追星一般都是在手機視頻、電視節(jié)目前看著影像中的明星，默默地支持，但是當(dāng)明星出現(xiàn)在玩家的身邊，可以近距離接觸到時，玩家又會做出怎樣瘋狂的事情？
這次的主角是林更新，而他雖然沒有真正地出現(xiàn)在玩家們的身邊，卻在吃雞里和玩家們親密接觸，讓每一個玩家都可以跑到他跟前跟他嘮兩句，甚至拿起武器來比劃比劃。這樣美麗的場景之下，玩家們是不是應(yīng)該聚集在自己的愛豆面前，親切地看著他，聽他帶有磁性的聲音呢？
可惜在吃雞里，林更新卻體驗了一次真正的“追星”，而且是在赤手空拳的情況下被77個粉絲追著滿地圖跑。
而這些粉絲們也并不是要在追到明星后一起守護他的電競夢，而是要用平底鍋把林更新的腦袋拍扁！這群執(zhí)著的粉絲們追了幾條街道，翻過了幾座大山，還逼著林更新跳到了水里，依依不饒。
最后，在七十多個饑渴的粉絲的圍攻下，林更新的腦袋被平底鍋拍扁了，而這次的追星活動也以粉絲玩家的勝利告終，他們真的追到了明星，同時也教他做人，給他留下了深刻的陰影！
最護短追星——圣槍哥為追星怒懟粉絲承認(rèn)自己真菜
在游戲界，基本上所有玩家都不會承認(rèn)自己菜，因為不管誰來挑戰(zhàn)自己，都可以用“不服來solo”懟過去。
但是在遇到自己喜歡的明星被黑時，為了維護她，服軟和護短絕對是義不容辭的，而這次的主角圣槍哥不僅維護明星，怒懟粉絲，還親口承認(rèn)自己菜，到底是怎么一回事？
圣槍哥作為SS戰(zhàn)隊里的上單，參加了今年的LPL春季賽，但是在第一場比賽中，SS戰(zhàn)隊就以1-2輸給了BLG，而且后續(xù)比賽中明星選手圣槍哥更是以0-6的成績在15分鐘的時候就被推平了一血塔，這樣的表現(xiàn)讓對他寄予厚望的粉絲們難以接受，甚至于將圣槍哥技術(shù)變差的原因歸結(jié)于他此前在微博上瘋狂追星的行為。
但是對于粉絲們的猜測和質(zhì)問，圣槍哥直接就給與了反駁，而且為了防止因為自己的原因而讓喜歡的偶像背鍋，便在賽后怒懟粉絲，甚至于讓粉絲私信噴他，或者買票到現(xiàn)場噴他，絲毫不想讓自己的偶像形象受損。
對于一個游戲玩家來說，為了追星，甘愿承認(rèn)自己菜，也只能說他已經(jīng)是一名死忠粉了。
最真愛追星——LOL職業(yè)玩家為追星修改游戲神ID
作為RNG戰(zhàn)隊的打野選手，MLXG擁有著大量的粉絲，雖然他沒有參加今年年前的LPL賽區(qū)春季賽，但是由于經(jīng)常活躍在游戲直播間里，而且在直播游戲時也經(jīng)常做出一些吸睛舉動，因此很受玩家粉絲的喜愛。
而除了普通玩家會追星捧MLXG以外，竟然還有職業(yè)選手粉絲也對這位打野選手喜愛有加，不僅如此，他追星的方式也非常直接，那就是直接更改了自己在歐服注冊的游戲ID，而且這個神ID也讓許多網(wǎng)友直呼真實，因為這個ID就是“劉世宇”，也就是MLXG的真名！
不僅如此，這位來自SK的職業(yè)選手，他的段位比偶像的段位還要高，卻也依然在追星，可見MLXG這位來自LPL賽區(qū)的打野選手，已經(jīng)名揚海外了。而且這樣的行為，也可以感覺到這位職業(yè)選手對MLXG的喜愛，也確實是出于真愛！
一個正驚問題：蔡徐坤打籃球頁游，你能打到第幾關(guān)？
言
大家好，我是練習(xí)時長5年半的個人程序員菜虛鯤，我喜歡唱，跳，rap，籃球，CTRL！
為了避免律師含，就不po鯤鯤的原圖咯~
在小作坊待久了，都忘記自己的本職工作當(dāng)初進來是一枚Android開發(fā)了，寫寫下APP和py腳本，
偶爾幫人修修電腦。感覺如果自己大只點，可能飲水機的水都要我來換了…
因為一些原因，舊APP不再更新迭代了，新的APP沒開始做，不想賠錢把我開掉，
就把我晾著摸魚。而我自己比較臘雞，感覺出去會找不到好的工作（不想再去
小作坊，一個人玩好累，感覺再這樣下去，會廢掉…）
晾著摸魚不做事，工資照發(fā)，管理肯定不愿意啊，要給我找點事做做咯：
要不你學(xué)下前端吧，做下小程序，后面做APP了，你再回去做APP…
我TM，說得好像學(xué)東西不用學(xué)習(xí)成本一樣，特別是跨域，最怕最后四不像，啥也什么都學(xué)得半桶水，
如果真轉(zhuǎn)的話，我更想轉(zhuǎn)后端，畢竟前端技術(shù)更新?lián)Q代速度實在是太快了，是真的快，學(xué)不來學(xué)不來。
小程序外包的單子挺多的，畢竟開發(fā)一個小程序的成本比APP少太多，很多甲方爸爸動不動就要做一個小程序，學(xué)了小程序，以后可以接點外包茍活下…
自己摸索著玩了一個多星期，有點意思：
老規(guī)矩，記錄下自己的學(xué)習(xí)過程，方便自己日后回顧，也方便后來者。看過網(wǎng)上很多
《從零開始學(xué)習(xí)微信小程序開發(fā)》類型的教程，大都廢話太多，或者不是真的零基礎(chǔ)
入門，學(xué)著學(xué)著者突然來些高深玩意，看得我頭皮發(fā)麻讀者一臉懵逼，筆者深知自學(xué)
循序漸進的重要性。另外，之前群里有小火汁問我學(xué)東西為啥那么快，其實，我學(xué)東西
還真不快，主要有幾點：順帶分享下自己的學(xué)習(xí)姿勢吧~
①興趣驅(qū)動：「你想學(xué)」而非「要你學(xué)」，主動去探索而非被動接受。
②專注：心無旁騖，別一下折騰這個，一下子又折騰那個，三分鐘熱度。
③反思總結(jié)：及時總結(jié)歸納，形成自己的知識脈絡(luò)，同時反思學(xué)習(xí)過程中的一些問題。
④去實踐：你掌握多少知識，取決于你能調(diào)用多少，而非記憶了多少知識。
⑤度：把握一個度，知道自己要學(xué)習(xí)到什么程度，不要去鉆牛角尖，等等。
大概就這些，筆者是前端小白，并不會深刨，只是希望初學(xué)者學(xué)完這個系列可以擼
出一個簡單基本的小程序。現(xiàn)學(xué)現(xiàn)賣，難免有錯，還望海涵，歡迎前端大神指出。如無
意外，一周1-2更。不要有太多期待，因為還在準(zhǔn)備Android面試相關(guān)。廢話就那么多，
開始本系列教程。
0x1、你看這個面又長又寬（開發(fā)環(huán)境搭建）
官網(wǎng)點擊：「指南」-> 「開始」
1、申請賬號
賬號可以申請也可以不申請不是一定要申請賬號，如果你只是想自己瞎玩不發(fā)布的話，可以跳過這一步。
當(dāng)然，你也可以申請，申請后會給你的小程序分配一個「AppID」，類似于身份標(biāo)識。
可以在小程序后臺，依次點擊「設(shè)置」->「開發(fā)設(shè)置」獲取到這個「AppID」：
2、下載安裝微信開發(fā)者工具
官網(wǎng)依次點擊「工具」-> 「下載」，或者直接打開下述鏈接跳轉(zhuǎn)下載：
developers.weixin.qq.com/miniprogram…
用哪個版本看個人喜歡，筆者用的是開發(fā)版，你也可以使用穩(wěn)定版，下載完以后，
無腦下一步安裝即可。安裝完后，其實就可以直接進行小程序開發(fā)，只是微信開發(fā)者
工具自帶的IDE比較簡陋，沒有自帶api智能提醒和語法高亮等，寫起代碼來不是
很順手，所以一般只是拿微信開發(fā)者工具來「看下運行效果」和「調(diào)試」，
寫代碼的話用的看看運行效果，調(diào)試，二用第三方的IDE來編寫
代碼，常見的兩款組合：
VS Code+minapp插件
Sublime Text 3+Sublime wxapp插件
筆者使用的是前者，接著說下VS Code的下載安裝。
3、下載安裝VS Code并安裝minapp插件
VS Code直接在官網(wǎng)下載就好：code.visualstudio.com/，默認(rèn)英文。
如果你想使用中文可以按快捷鍵：
然后在彈出的對話框中輸入：「Configure Language」，如圖：
接著點擊「Install additional languages…」，如圖：
點擊后左側(cè)會出現(xiàn)一個插件安裝的，選擇中文，如圖：
安裝完，提示重啟，重啟后就是中文了，接著安裝一波minapp插件。點擊左側(cè)邊欄
的第四個圖標(biāo)，然后搜索欄鍵入「minapp」，然后點擊Install進行安裝，如圖：。
安裝后可能需要重啟，重啟即可。除此之外，還安利一個插件：「wechat-snippet」，
自動生成微信代碼片段，如果想了解更多插件可見VS官網(wǎng)：marketplace.visualstudio.com/
自己是從事了五年的前端工程師，整理了一份2019最全面前端學(xué)習(xí)資料，需要的伙伴可以私信“前端”獲取領(lǐng)取地址，對于學(xué)習(xí)web前端有任何問題（學(xué)習(xí)方法，學(xué)習(xí)效率，如何就業(yè)）都可以問我。
0x2、就像這個碗又大又圓（創(chuàng)建項目）
直接打開微信開發(fā)者工具，可以「新建項目」或者「導(dǎo)入項目」，填寫項目相關(guān)的信息，
這里如果你沒有申請賬號的話可以用隨機生成的AppID，如圖所示：
0x3、你們來這里吃飯（界面熟悉）
創(chuàng)建后會自動生成相關(guān)代碼，創(chuàng)建后的頁面如圖所示：
簡單介紹下，圈住的頁面內(nèi)容如下：
簡單說下頁面中圈住的部分都是些什么：
①菜單欄：提供項目，文件，編輯等相關(guān)操作，自己點開看就知道了。
②視圖開關(guān)：控制模擬器，編輯器和調(diào)試器視圖的顯示和隱藏。
③模擬器：模擬小程序在手機上的界面效果，上面的欄可以進行模擬器的相關(guān)配置：
模擬器分辨率、縮放比例、連接網(wǎng)絡(luò)方式、模擬操作、是否靜音、獨立成小窗口。
④編輯器-項目文件目錄：小程序文件目錄，頂部菜單依次為：添加文件、搜索文件、
從硬盤打開、折疊某個目錄，隱藏。
⑤編輯器-文件內(nèi)容編輯：就是編寫代碼的地方。
⑥調(diào)試器：定制版的Chrome開發(fā)者工具，用于調(diào)試：頁面結(jié)構(gòu)，CSS，抓包，AppData等。
⑧編譯相關(guān)：可以選擇編譯選項：普通編譯，添加編譯模式(直接打開特定頁面)或通過二維碼編譯，點擊編譯即可進行編譯。點擊預(yù)覽可以生成二維碼，然后在手機上查看效果。
⑨真機調(diào)試：同樣是生成二維碼掃描看效果，不過多了調(diào)試功能。
⑩切后臺：切換場景值。
?清緩存：就是清理緩存，可以清理：數(shù)據(jù)，文件，授權(quán)，網(wǎng)絡(luò)，登錄狀態(tài)。
?版本管理：小程序項目Git版本管理。
?詳情：項目的相關(guān)信息，項目配置，以及域名信息配置。
?頁面路徑：當(dāng)前頁面的路徑，場景值和頁面參數(shù)。
關(guān)于微信開發(fā)者工具的界面的簡單介紹就到這里，接著我們來說下小程序的基本結(jié)構(gòu)。
0x4、覺得飯很好吃（基本結(jié)構(gòu)）
1、四類文件
小程序一般由下面四類文件組成：
json：配置文件，頁面和開發(fā)工具的相關(guān)配置。
wxml：模板文件，堆砌控件形成小程序頁面，有點像HTML。
wxss：樣式文件，調(diào)整頁面樣式，有點像CSS。
js：腳本邏輯文件，完成一些邏輯處理操作，比如發(fā)起請求，事件觸發(fā)等。
簡單點說：wxml里寫頁面，wxss里寫樣式，js里寫邏輯，json里改配置。
2、三個重要的配置文件
①開發(fā)工具配置：「project.config.json」
開發(fā)者工具的統(tǒng)一配置，界面設(shè)置以及云函數(shù)相關(guān)，更多可見：
developers.weixin.qq.com/miniprogram…
②小程序全局配置：「app.json」
比如：頁面路徑列表，默認(rèn)窗口，底部tab欄，網(wǎng)絡(luò)超時等，更多可見：
developers.weixin.qq.com/miniprogram…
③單頁面配置：「page.json」
使用「同名.json」文件來對本頁面的窗口表現(xiàn)進行配置，會覆蓋app.json的window
中相同的配置項，更多可見：
developers.weixin.qq.com/miniprogram…
0x5、就像我給你們拉面一樣很開心（小程序初體驗）
接著，通過編寫一個簡陋的頁面，來體驗下小程序的開發(fā)~
1、全局窗口配置
先來配置一波小程序的窗口，要求如下：
蕾姆藍(lán)背景，白色文字，菜單欄顯示摳腚男孩
打開app.json文件，添加下述配置：
編譯運行后，效果如圖所示：
2、編寫簡陋頁面
接著開始著手編寫這個簡陋頁面，定義一個頂部頭像，新建asserts文件夾，
用來存放靜態(tài)資源文件，接著往index.wxml中添加一個image控件：
<image src="../../assets/codingboy.png" />
編譯運行后，效果如圖所示：
3、調(diào)整樣式
可以，很騷氣，但是作為頭像有點太大了，調(diào)整一下它的樣式，打開 index.wxss，添加一個類選擇器：
image標(biāo)簽設(shè)置一下這個選擇器：
<image class="user-icon-image" src="../../assets/codingboy.png"/>
編譯運行后，效果如圖所示：
Tips：這里還可以利用寬高自適應(yīng)的，即：設(shè)置寬度，保持原圖寬高比不變，高度自動變化。
為image標(biāo)簽設(shè)置屬性：mode="widthFix"，效果是一樣的。
4、獲取用戶授權(quán)
這里有個需求：
如果已經(jīng)獲取了用戶授權(quán)，就顯示微信頭像，否則顯示這個默認(rèn)頭像
在index.wxml中添加一個用于獲取用戶昵稱和頭像的按鈕
<button open-type="getUserInfo">獲取頭像昵稱</button>
編譯運行后，點擊按鈕會彈出一個授權(quán)對話框：
點擊允許即可完成授權(quán)，但是授權(quán)的信息并沒有保存起來。
5、獲取授權(quán)信息
授權(quán)是授權(quán)了，但是信息卻沒有拿到，button有一個屬性：bindgetuserinfo，
當(dāng)用戶點擊按鈕時，會返回獲取到的用戶信息，我們在這里綁定一個保存用戶信息
的回調(diào)函數(shù)，在index.js中添加下述代碼直接把授權(quán)信息給打印出來：
接著index.wxml中綁定一下：
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">獲取頭像昵稱</button>
清一波緩存，然后重新編譯，點擊獲取頭像昵稱的按鈕，對話框授權(quán)，在Console可以
看到用戶的相關(guān)信息：
6、保存授權(quán)信息
授權(quán)信息可以獲取到了，接下來我們通過定義一個變量的方式把信息保存下來，
另外，我們還需要定義一個變量作為是否獲得授權(quán)信息的標(biāo)記，用于控制顯示
微信頭像還是默認(rèn)頭像，打開index.js添加下述代碼：
修改下getUserInfo函數(shù)，修改后的代碼如下：
另外授權(quán)信息，其實可以通過app.globalData.userInfo獲取，在程序初始化的
時候在onLoad函數(shù)中去獲取下，添加一個onLoad函數(shù)，代碼如下：
7、wx:if，wx:elif，wx:else判斷結(jié)構(gòu)
接著在index.wxml中通過 wx:if 判斷是加載默認(rèn)圖還是微信頭像，代碼如下：
運行后可以看到顯示的是微信用戶昵稱和頭像，如圖：
接著調(diào)整一下樣式，外層包一個view，接著讓這兩個東西居中：
有點擠，頂部加padding，圖片圓角，調(diào)整背景顏色，index.wxss添加：
接著修改下index.wxml，代碼如下：
運行結(jié)果如下：
8、單機版天氣預(yù)報(wx:for循環(huán)結(jié)構(gòu))
只是點擊授權(quán)然后獲取頭像顯示，感覺好low，跟官方的例子有啥區(qū)別，加個
天氣預(yù)報的東東吧，這里采用的天氣接口是：魅族天氣API，接口地址如下：
aider.meizu.com/app/weather…
訪問看下，返回的數(shù)據(jù)如下：
開發(fā)初期，為了提高開發(fā)的效率，會先造假數(shù)據(jù)，前后端約定好接口的返回數(shù)據(jù)。
由后端寫一個接口返回假數(shù)據(jù)，或者前端本地跑一個mock服務(wù)器，也可以直接寫
死在程序中。這里為了方便，直接寫死，在index.js的page中添加下述數(shù)據(jù)：
接著index.wxml添加控件：
運行結(jié)果如下：
文字都堆疊到一起了，設(shè)置下樣式：
接著每個text設(shè)置下message-text這個類選擇器，運行效果如下：
接著把indexes里的數(shù)據(jù)也顯示出來，通過wx:for循環(huán)生成結(jié)點：
運行后結(jié)果如下：
文本都堆在一起密密麻麻的，寫個樣式：
運行結(jié)果如下
9、網(wǎng)絡(luò)版天氣預(yù)報(wx.request發(fā)起請求)
單機版的就完成了，接著通過wx.requests來請求接口，實現(xiàn)一個網(wǎng)絡(luò)版的天氣預(yù)報。
index.js中新增刷新天氣的函數(shù)
接著按鈕設(shè)置下點擊時觸發(fā)這個網(wǎng)絡(luò)請求：
<button style="margin-top: 50rpx" bindtap="refreshWeather">刷新天氣</button>
因為接口是http的，還需要微信開發(fā)者工具點開詳情，勾選下：
接著點擊運行，點擊刷新天氣，在Network選項卡可以看到發(fā)出的請求信息：
然后咧，微信小程序的視圖層和邏輯層類似MVVM模式，邏輯層只需對數(shù)據(jù)對象
更新，即可改變視圖層的數(shù)據(jù)數(shù)據(jù)顯示，這里setData后，對應(yīng)的控件也會改變。
到此一個非常簡單的天氣預(yù)報小程序就完成了。
小結(jié)
本節(jié)介紹了微信小程序開發(fā)環(huán)境的搭建，開發(fā)一個簡易天氣小程序體驗了一波微信
小程序，相信讀者對于微信小程序有個基本的了解了，接下來的章節(jié)會慢慢細(xì)化
一些知識點，比如控件定位，UI相關(guān)，請求封裝，開源開發(fā)框架WePY等等，敬請期待~
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
