微信小程序——学习心得三

综合实例：评测小程序首页的实现
案例分析：

1.头部是由一个轮播图构成
2.中部由四个图像加小标题构成
3.底部是多个相同的图片加文字内容修饰
学习目标：
1.学习swiper标签实现轮播图的效果
2.学习页面布局和图片及文字的渲染
3.在实践过程中发现自己的问题，加强对操作的熟练性，和对代码的熟悉
案例实现步骤：
1.首先创建新的小程序项目，将原来的样式文件中的代码删除，基本文件全部初始化；
2.在微信公众平台下的微信开发文档的组件里找视图容器中的swiper标签，复制示例代码到index.wxml文件中，改变属性值如图所示，使轮播图可以自动播放；

然后设置swiper的属性，主要有autoplay，interval等属性，其中autoplay设置是否自动轮播；
接着使用block标签，放置要轮播的图片，图片的来源等一下从js文件中获取；
接着打开js文件，在js文件中的data函数里面定义图片的路径，这里放置了三张图片的路径；

接下来就是设置swiper的属性的一些值，比如设置autoplay为false，表示手动轮播。

图示效果：

3.再写出小标题的样式结构


结果如图所示：

4.页面结构可分为三层，第二层小标题已经写好，接下来是内容的填充，案例图是由四个居中的图片放置，所以接下来在内容中放置四个 标签下的方框，给其添加样式使达到图示效果；



再相对于pages文件创建一个images文件放置图片，将图片用image标签导入到
四个方框中，此时要注意图片文件的相对位置；


到这里图片就导入完成了，接下来对图片小标题进行样式的更改，运用position相对定路径和绝对路径将文字显示在图片上；
5.最后做第三部分下拉栏目，可以复制做精品推荐时的代码，将text中文字内容更改为“热门壁纸”和“全部壁纸”；

效果如下：

6.在再此view标签下创建新的view分类处理用image标签导入图片；

并对图片和文字栏块进行样式的修改；

用wx：for对 list-item 添加循环 ，再index.js文件中data下创建相对应命名的数组，放置多个元素，即可在页面中循环放置等同元素个数的相同栏目数；

效果如图所示：

7.接下来调整图片栏中的小头像，在与导入图片image标签后再添加一个image标签，将事先准备好的图像（jpg格式）导入后，对头像的样式进行修改，调试；


效果如图所示：

8.接下来修改文字栏中标题title和内容content

修改标题和文字的样式来符合案例样式：

效果如图：

9.最后完善各部分的尺寸大小问题，使页面看起来美观大方简洁，这样一个案例demo就做好了

最终效果图：

实验总结：
1.实验过程中已经基本掌握了轮播图的概念，利用数据绑定和js函数来实现图片的轮播
2.实验过程中也已经基本掌握到了页面布局的各种技巧方法，对于数据的把控更为敏感和准确
3.实验过程中对于某些标签的使用还有不熟练的地方，在实验结束后，加深了对这些标签等功能使用的理解，受益匪浅