我写小程序像菜虚鲲——1、唱，跳，rap，篮球

小程序

引言

大家好，我是练习时长两年半的个人练习生菜虚鲲，我喜欢唱，跳，rap，篮球，Music！

为了避免律师含，就不po鲲鲲的原图咯~

在小公司呆久了，都忘记自己进来的时候是一个Android开发了，写下APP，写写脚本，偶尔帮人修修电脑，感觉如果我壮实点，可能饮水机的水都要我来换了...

因为一些原因，旧APP不更新迭代了，新的APP又还没开始做，不想赔钱开我，然后我就被晾着了。然后自己又腊鸡，感觉出去会找不到好的工作（不想再去小作坊了，一个人玩好累，感觉自己会废掉...）

晾着摸鱼不做事，工资照发，管理肯定不愿意，给我找点事做哇：

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

我TM，说得好像学东西不用学习成本一样，特别是跨域。最怕最后四不像，Android没玩溜，其他也不精。真转的话，我更想转后端，前端技术更新换代速度是真的快，学不来学不来。

唉，自己又不是大神，人在屋檐下，不得不低头，安慰自己：

学了小程序，以后能接下外包做做，毕竟开发一个小程序的成本比APP少多了，
很多甲方爸爸推广啥的都喜欢做下小程序~

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

老规矩，记录下自己的学习过程，方便自己回顾，也方便后来者。看过网上很多
《从零开始学习微信小程序开发》类型的教程，但是大都废话太多，或者不是真的
零基础入门，有点像四步画人物肖像的段子，前几节看着还行，突然来个高深的东西，
看得读者真是一脸懵逼，笔者深知自学循序渐进的重要性。

之前群里有小火汁问我学东西为啥那么快，其实，我学东西还真不快，顺带分享
下自己的学习姿势吧：

• 1.「兴趣驱动」

「你想学」和「要你学」两者带有的能量是不一样的，举个上学读书的例子。
笔者以前高中很喜欢物理，

的所带有的能量是不一样的，举个例子，
我把教程看完了，有点像以前读书，老师说啥你学啥填鸭式的教育
，

前者「主动」，后者「被动」，当你想达成某个目标时，你会竭尽所能xxx

• 2.「专注」

• 3.「反思总结」

把握一个度，别陷进去，钻牛角尖，把握一个度
多思考，总结，不钻牛角尖

当你做成某件事后，良性循环，促进你去学习。

接触一个新的事物本能的排斥，或者学习很慢，你可以先通过视频或者目录这类的，
了解这个东西大概是什么。 前期...
万物想通，比如Android里的mvvm双向绑定，小程序里就有。

说下：

小猪也是前端小白，很多都是现学现卖可能有些错误，欢迎前端大神指出，如无意外，一周1-2更吧，
不要抱有太多期待，因为还要准备下找工作，如果有内退岗，开始本系列内容。

最佳的学习方式就是官方文档，本系列也会跟着官网文档

微信小程序官网：https://developers.weixin.qq.com/miniprogram/dev/

0x1、你看这个面又长又宽（开发环境搭建）

官网点击：「指南」-> 「开始」

1、申请账号

不是一定要申请账号，如果你只是想自己瞎玩不发布的话，可以跳过这一步。
当然，你也可以申请，申请后会给你的小程序分配一个「AppID」，类似于身份标识。
可以在小程序后台，依次点击「设置」->「开发设置」获取到这个「AppID」：

2、下载安装微信开发者工具

官网依次点击「工具」-> 「下载」，或者直接打开下述链接跳转下载：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

用哪个版本看个人喜欢，笔者用的是开发版，你也可以使用稳定版，下载完以后，
无脑下一步安装即可。安装完后，其实就可以直接进行小程序开发，只是微信开发者
工具自带的IDE比较简陋，没有自带api智能提醒和语法高亮，写起代码来有点不是
很顺手，一般只是拿微信开发者工具来看看运行效果，调试，二用第三方IDE来编写
代码，常见的两款组合：

• VS Code + minapp插件
• Sublime Text 3 + Sublime wxapp插件

笔者使用的是前者，接着说下

3、下载安装VS Code并安装minapp插件

VS Code直接在官网下载就好：https://code.visualstudio.com/，默认英文。
如果你想使用中文可以按快捷键：

• Windows 或 Linux => Ctrl + Shift + P
• Mac => Command + Shift + P

然后在弹出的对话框中输入：「Configure Language」，如图：

接着点击「Install additional languages...」，如图：

点击后左侧会出现一个插件安装的，选择中文，如图：

安装完，提示重启，重启后就是中文了，接着安装一波minapp插件。点击左侧边栏
的第四个图标，然后搜索栏键入「minapp」，然后点击Install进行安装。

安装后可能需要重启，重启即可。除此之外，还安利一个插件：「wechat-snippet」，
自动生成微信代码片段，更多插件可见官网：https://marketplace.visualstudio.com/

看自己喜欢，笔者用的是开发版，你也可以用稳定版。
下载完无脑下一步安装，安装完后打开，然后创建一个新的项目，填写项目相关信息，这里如果你没有申请一个申请账号的话可以用随机生成的id。

创建后会生成工程相关的配置，然后进入微信开发者工具页面。

很少在上面写代码，智能补全，

2、就像这个碗又大又圆（创建项目）

3、你们来这里吃饭（界面熟悉）

4、觉得饭很好吃（基本结构）

5、就像我给你们拉面一样很开心（VSCode+）

「****」