零基础微信小程序初体验（b站黑马小程序课）

本篇文章简要记录微信小程序的第一个简单页面，课程是b站的免费课。大概用到的技术有微信小程序基础：轮播图、普通视图，tabBar，数据请求中的GET请求和一些简单的布局：flex布局等。

（ps：写在开头）       

        好久不写文章去记录生活了，写着写着突然发现在写的时候心特别静，感觉真不错。作为一个大三的学生，每天都感到无比的空虚，每天浑浑噩噩并没有学很多东西，希望写博客这个习惯能坚持下来吧，努力成为一个技术猿。

页面大概这个样子：

大概总结一下各个步骤：

首先建立一个新的微信小程序项目（使不使用云开发都可以），然后要把https域名配一下，配域名要在你小程序用的账号的后台去配，而且一定要注意符合https协议。然后将基本的页面删一删（原有的两个页面），将你需要的三个页面：首页、消息、联系我们分别在啊app.json中创建出来，

 注意你的首页要放到最前面。然后去底部导航栏tabBar页面，一样是在app.json中，在pages同级下创建，平台会自动创建第一个格式，然后你需要几个底部导航页面就复制粘贴几个，最少二个最多五个，然后将路径填进去，注意最后的图片自己写，不要用页面自动弹出来的，不然很可能加载不出来，注意.png一定不要省了！

 这时页面的基础样子已经有了，我们只需要去编辑每一个页面中的内容即可，这次只给首页填充完内容。

打开首页的js文件，开始请求数据（个人感觉小程序请求数据非常方便，比Ajax要方便）。先在data里准备两个数组，一个数组放轮播图，一个数组放九宫格数据。

然后请求轮播图，

直接用微信的wx:request即可，在获得url地址GET请求成功后，用一个箭头函数把res在控制台打印出来，可以看到数据都在res.data里面。

注意：请求数据的方法一定要在加载时就运行！否则会报错

 然后用微信的this.setData方法赋值，把res.datas里的数据给SwiperList数组。然后打开首页的wxml页面，创建轮播图区域，代码如下：

 直接用wx:for循环数组中数据即可，但是注意要加wx:key,一般多用id当做key值。可以给轮播图加上原点indicator-dots，然后设置自动播放autoplay并采用衔接滑动circular。

然后去首页的wxss页面去调试一下轮播图的样式

 给轮播图一个固定的高然后让图片高宽填满轮播图即可。

下面来请求九宫格数据，原理和请求轮播图的一样，代码如下（还是要注意在页面加载时就运行方法）：

 然后去wxml页面去搭建页面，原理也和轮播图一样

 接着去wxss页面把九宫格位置都设置好，大概思路是先给grid-list一个固定的高，然后设置flex布局，让子元素可以换行，然后给grid-item小盒子一个33.33%的宽度，让他们每行有三个，然后让小盒子也flex布局，把主轴设置成y轴，让图片和文字都居中显示。给图片一个固定的宽高，给文字一个上边距和大小，给小盒子设置左边框和底边框。这是要注意要给盒子box-sizing: border-box;否则会被撑下来。代码如下：

最后再在底部填充两张图片，较为简单就不总结了，注意一下图片的mode类型就好。