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添加：
page { background: #f6f6f6; position: relative; padding-top: 30rpx; color: #323233; } .user-icon-wrapper{ display:flex; justify-content: center; flex-direction: column; align-items: center } .user-icon-image{ width: 150rpx; border-radius: 20rpx; } .authorize-button{ margin-top: 30rpx; } .nickname-text{ margin-top: 30rpx; }
接着修改下index.wxml，代码如下：
<!-- index.wxml --> <block wx:if="{{!hasUserInfo && canIUse}}"> <view class="user-icon-wrapper"> <image class="user-icon-image" src="../../assets/codingboy.png" mode="widthFix" /> <button class="authorize-button" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> </view> </block> <block wx:else> <view class="user-icon-wrapper"> <image class="user-icon-image" src="{{userInfo.avatarUrl}}" mode="widthFix" /> <text class="nickname-text">{{userInfo.nickName}}</text> </view> </block>
运行结果如下：
