家好，这里是正惊游戏，我是正惊小弟。

在这个文化生活日益丰富的时代，无论是电影明星、电视明星、抖音网红还是游戏主播，都或多或少有着一群粉丝在背后默默地支持着他们，而由于粉丝群体来自不同年龄段、不同职业以及不同的兴趣圈，因此追星的方式都不尽相同。

而作为喜爱着游戏同时也热衷于追星的玩家群体，由于天生玩心很重，因此相对于其他粉丝群体，有着自己对明星更加独特的情感表达方式，今天就让我们来看看当玩家追起星来，到底有多拼。

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

最近最火的明星鬼畜素材，莫过于蔡徐坤，许多玩家将其做成了MOD，但最秀的还是@yangyuanhe369这位大佬，把“cxk打篮球”做成了一款网页小游戏。

游戏的玩法就是经典的“打砖块”，这是一款1975年就在街机上推出的小游戏。玩法简单，想必许多玩家小时候都有玩过，只需要用键盘的方向键，控制蔡徐坤的方向就可以，如果没接到球的话，就会获得“CXK，你球掉了”这样的提示。小弟我自己是没通关最高难度，通关之后会获得什么彩蛋，小弟我也不知道。

不过玩完这款游戏，说实话也蛮难受的，毕竟玩家需要无限洗脑循环“鸡你太美”。

最硬核追星——硬核玩家竟然为明星开发游戏！

普通粉丝们在追星的时候正常都会选择在演唱会上为其呐喊助威，或者在直播间里疯狂地刷礼物，但是为了自己喜欢的明星开发出游戏来，则不是普通玩家和粉丝们能够做到的事情。

在百度贴吧“杨超越吧”举行的“杨超越杯编程大赛”上，来自全国各地（或者可以说世界各地）的杨超越粉丝们在吧主的倡议下，以最多5人小队的形式，制作与杨超越相关的游戏、网页、工具来参加比赛，而这个比赛也吸引了大量并非杨超越粉丝的硬核程序员们来参赛。

总计超过200名硬核粉丝和程序员们提交了近百个作品，除了简单的数据分析工具、网站平台以及各种小游戏以外，竟然还有粉丝开发了一款名为《超越传说》的塞尔达传说风的RPG动作游戏！

游戏的宣传视频一经放出，便让许多玩家惊叹于粉丝当中果然是人才济济，三五个人就能搞出一个游戏来，而它也成为了整个比赛中最为硬核的游戏作品，并在初赛阶段获得了第一名！

最霸气追星——《绝地求生》制作人为内马尔定制服务器

作为游戏界的大佬，《绝地求生》的制作人及其团队可以说是众多玩家心目中的明星，但是和其他玩家相同的是，他们同样有着自己喜欢的明星，而这个明星，则是西方国家人民也非常喜欢的足球明星——内马尔。

在被足球耽误的吃鸡选手内马尔痴迷《绝地求生》并和朋友主播一起开黑后，他竟然给《绝地求生》的开发团队发了一个推特，索要一个自定义服务器。而这样的请求在常人眼中根本就是痴人说梦，而且官方曾表示停止接受自定义服务器的申请。

但是对于喜欢内马尔的《绝地求生》制作人来说，这都不是事，马上就答应了他的请求，Playerrunknown回复说“请给我发个私信，我会让团队里相关负责人跟进！”。不仅如此，在内马尔生日的时候，《绝地求生》官方还送出了为内马尔准备的礼物，包括背包、帽子、吃鸡玩偶，还有四级盔——平底锅！

在对待自己喜欢的明星这件事情上，不管是普通玩家还是游戏制作人这样的高级玩家，也都是卖力地在追星啊！

最恶搞追星——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少太多，很多甲方爸爸动不动就要做一个小程序，学了小程序，以后可以接点外包苟活下…

自己摸索着玩了一个多星期，有点意思：

老规矩，记录下自己的学习过程，方便自己日后回顾，也方便后来者。看过网上很多

《从零开始学习微信小程序开发》类型的教程，大都废话太多，或者不是真的零基础

入门，学着学着者突然来些高深玩意，看得我头皮发麻读者一脸懵逼，笔者深知自学

循序渐进的重要性。另外，之前群里有小火汁问我学东西为啥那么快，其实，我学东西

还真不快，主要有几点：顺带分享下自己的学习姿势吧~

①兴趣驱动：「你想学」而非「要你学」，主动去探索而非被动接受。

②专注：心无旁骛，别一下折腾这个，一下子又折腾那个，三分钟热度。

③反思总结：及时总结归纳，形成自己的知识脉络，同时反思学习过程中的一些问题。

④去实践：你掌握多少知识，取决于你能调用多少，而非记忆了多少知识。

⑤度：把握一个度，知道自己要学习到什么程度，不要去钻牛角尖，等等。

大概就这些，笔者是前端小白，并不会深刨，只是希望初学者学完这个系列可以撸

出一个简单基本的小程序。现学现卖，难免有错，还望海涵，欢迎前端大神指出。如无

意外，一周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等等，敬请期待~