本文来源自掘金
作者：coder-pig
链接：https://juejin.im/post/5cfdd89ef265da1b9253cf24
来源：掘金
引言
大家好，我是练习时长5年半的个人程序员菜虚鲲，我喜欢唱，跳，rap，篮球，CTRL！
为了避免律师含，就不po鲲鲲的原图咯~
在小作坊待久了，都忘记自己的本职工作当初进来是一枚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/，默认英文。
如果你想使用中文可以按快捷键：
Windows 或 Linux => Ctrl + Shift + P
Mac => Command + Shift + P
然后在弹出的对话框中输入：「Configure Language」，如图：
接着点击「Install additional languages…」，如图：
点击后左侧会出现一个插件安装的，选择中文，如图：
安装完，提示重启，重启后就是中文了，接着安装一波minapp插件。点击左侧边栏
的第四个图标，然后搜索栏键入「minapp」，然后点击Install进行安装，如图：。
安装后可能需要重启，重启即可。除此之外，还安利一个插件：「wechat-snippet」，
自动生成微信代码片段，如果想了解更多插件可见VS官网：marketplace.visualstudio.com/
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文件，添加下述配置：
"navigationBarBackgroundColor": "#5A78EA",
"navigationBarTitleText": "抠腚男孩",
"navigationBarTextStyle": "white"
编译运行后，效果如图所示：
2、编写简陋页面
接着开始着手编写这个简陋页面，定义一个顶部头像，新建asserts文件夹，
用来存放静态资源文件，接着往index.wxml中添加一个image控件：
<image src="../../assets/codingboy.png" />
编译运行后，效果如图所示：
3、调整样式
可以，很骚气，但是作为头像有点太大了，调整一下它的样式，打开 index.wxss，添加一个类选择器：
.user-icon-image{
width: 150rpx;
height: 150rpx;
}
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中添加下述代码直接把授权信息给打印出来：
getUserInfo: function(e){
app.globalData.userInfo = e.detail.userInfo
console.log(app.globalData.userInfo)
}
接着index.wxml中绑定一下：
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取头像昵称</button>
清一波缓存，然后重新编译，点击获取头像昵称的按钮，对话框授权，在Console可以
看到用户的相关信息：
6、保存授权信息
授权信息可以获取到了，接下来我们通过定义一个变量的方式把信息保存下来，
另外，我们还需要定义一个变量作为是否获得授权信息的标记，用于控制显示
微信头像还是默认头像，打开index.js添加下述代码：
Page({
data: {
userInfo: {}, //用户信息
hasUserInfo: false, //是否有用户信息
}
})
修改下getUserInfo函数，修改后的代码如下：
getUserInfo:function(e){
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo:true
})
}
另外授权信息，其实可以通过app.globalData.userInfo获取，在程序初始化的
时候在onLoad函数中去获取下，添加一个onLoad函数，代码如下：
onLoad:function(){
if(app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo:true
})
}
}
7、wx:if，wx:elif，wx:else判断结构
接着在index.wxml中通过 wx:if 判断是加载默认图还是微信头像，代码如下：
<block wx:if="{{!hasUserInfo}}"> <image class="user-icon-image" src="../../assets/codingboy.png" mode="widthFix" /> <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取头像昵称</button></block><block wx:else> <image class="user-icon-image" src="{{userInfo.avatarUrl}}" mode="widthFix" /> <text>{{userInfo.nickName}}</text></block>
运行后可以看到显示的是微信用户昵称和头像，如图：
接着调整一下样式，外层包一个view，接着让这两个东西居中：
.user-icon-wrapper{
display:flex;
justify-content: center;
flex-direction: column;
align-items: center
}
有点挤，顶部加padding，图片圆角，调整背景颜色，index.wxss添加：
接着修改下index.wxml，代码如下：
运行结果如下：
8、单机版天气预报(wx:for循环结构)
只是点击授权然后获取头像显示，感觉好low，跟官方的例子有啥区别，加个
天气预报的东东吧，这里采用的天气接口是：魅族天气API，接口地址如下：
访问看下，返回的数据如下：
开发初期，为了提高开发的效率，会先造假数据，前后端约定好接口的返回数据。
由后端写一个接口返回假数据，或者前端本地跑一个mock服务器，也可以直接写
死在程序中。这里为了方便，直接写死，在index.js的page中添加下述数据：
接着index.wxml添加控件：
运行结果如下：
文字都堆叠到一起了，设置下样式：
.message-text {
margin-left: 15rpx;
display: block;
margin-top: 50rpx;
}
接着每个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等等，敬请期待~
网友评论