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