6.1
本文针对零基础同学，不喜勿喷
今天来开始带领大家零基础入门小程序开发，并且开发一款属于自己的商城类小程序。
本套课程属于实战入门系列。带领大家一边学习小程序实现，一边开发实战项目。
首先声明一点：即便你没有一点点编程基础，也可以跟着这套课程来入门小程序开发。因为本套课程主要就是面向零基础人员。所以讲解的都是一些通俗易懂的入门技能。所以完全不用担心自己不懂编程。
老规矩，先看我的最终的效果图。
大家可以看到。我们效果图里有以下功能点。- 小程序商品列表
- 商品下单
- 订单生成
- 订单支付
- 微信支付功能
- 订单列表
- 支付成功状态回调
- 支持成功消息推送通知
- 小程序云开发
- 小程序云推送
我们接下来要做的，就是跟着老师的视频和笔记，一步步操作，一步步学习。来开发一款属于我们自己的商城小程序。
不管你是想入门编程开发，想做程序员，想开发小程序，还是想提升自己的编程能力，都可以跟着这套课程来实现零基础入门，提升自己的技能。
本套课程你能收获到什么？
- 每节课都有对应的图文讲解
- 每节课都会有对应的源码
- 老师会创建一个飞聊群或者微信群来专门解答大家的问题
- 老师后面还会专门录制视频来讲解本套课程
- 跟着这套课程，完全可以实现零基础入门小程序
- 跟着这套课程，完全可以自己独立开发一款电商小程序
本套课程适合人群
- 想入门编程开发的同学
- 完全零基础的同学
- 编程小白
- 在校大学生
- 店铺老板，个体工商户（想开发自己的的小程序的人士）
- 前端开发（想提升自己技能）
- 后端开发（想了解小程序开发）
接下来就跟着老师，3小时入门小程序，并开发一款属于自己的电商小程序吧。
来带大家看下第六节课的内容，本节课程比较基础，主要面对零基础人员。
如果已经入门的同学觉得简单，就去文末点击查看原文，查看后面的视频
《小程序商品列表页的简单实现》
先带大家看下效果图
本节知识点
- 列表布局的实现
- 图片的显示
- 标题和价格的显示
- 底部分割线的实现
我们的这节的列表页面比较简单，因为要教零基础的同学入门，所以前面课程讲的都比较基础，如果你已经有编程基础了，前面的入门课程可以跳过直接去看后面的课程。
一，定义index.wxml列表布局
这里的列表布局实现也是比较简单的，只是在上一节的基础上多了一个image组件。完整代码如下
代码语言：javascript复制<view class="good-item" wx:for="{{datalist}}">
<image class="good-image" src="{{item.pic}}"></image>
<view class="good-detail">
<view>商品: {{item.title}}</view>
<view>价格： {{item.price}} 元 </view>
</view>
</view>二，定义index.js页面
可以看出我们的index.js页面比上一节的代码只是多了一些字段，
- pic：图片链接
- title： 商品标题
- price：商品价格
而我们这里做的就是在datalist里的定义了四个商品数据。
三，index.wxss定义列表样式和分割线等
我们的index.wxss就是用来定义列表的样式用的。
代码语言：javascript复制.good-item {
display: flex;
width: 100%;
padding: 10px;
border-bottom: 1px solid #eee;
}
.good-image {
width: 150px;
height: 100px;
border: 1px solid #eee;
}
.good-detail {
font-size: 14px;
margin-left: 10px;
}到这里我们的商品列表就实现了，但是我们这里的数据是写死在本地的，我们通常商品的列表数据要从服务器上动态的去获取。后面的章节就会带领大家借助小程序云开发来实现动态的商品列表。
THE END
本套课程主要就是面向零基础人员。所以讲解的都是一些通俗易懂的入门技能。所以完全不用担心自己不懂编程。
