3小时带你开发一款商城类小程序（零基础入门小程序系列）

6.1

本文针对零基础同学，不喜勿喷

今天来开始带领大家零基础入门小程序开发，并且开发一款属于自己的商城类小程序。

本套课程属于实战入门系列。带领大家一边学习小程序实现，一边开发实战项目。

首先声明一点：即便你没有一点点编程基础，也可以跟着这套课程来入门小程序开发。因为本套课程主要就是面向零基础人员。所以讲解的都是一些通俗易懂的入门技能。所以完全不用担心自己不懂编程。

老规矩，先看我的最终的效果图。

大家可以看到。我们效果图里有以下功能点。

1. 小程序商品列表
2. 商品下单
3. 订单生成
4. 订单支付
5. 微信支付功能
6. 订单列表
7. 支付成功状态回调
8. 支持成功消息推送通知
9. 小程序云开发
10. 小程序云推送

我们接下来要做的，就是跟着老师的视频和笔记，一步步操作，一步步学习。来开发一款属于我们自己的商城小程序。

不管你是想入门编程开发，想做程序员，想开发小程序，还是想提升自己的编程能力，都可以跟着这套课程来实现零基础入门，提升自己的技能。

本套课程你能收获到什么？

1. 每节课都有对应的图文讲解
2. 每节课都会有对应的源码
3. 老师会创建一个飞聊群或者微信群来专门解答大家的问题
4. 老师后面还会专门录制视频来讲解本套课程
5. 跟着这套课程，完全可以实现零基础入门小程序
6. 跟着这套课程，完全可以自己独立开发一款电商小程序

本套课程适合人群

1. 想入门编程开发的同学
2. 完全零基础的同学
3. 编程小白
4. 在校大学生
5. 店铺老板，个体工商户（想开发自己的的小程序的人士）
6. 前端开发（想提升自己技能）
7. 后端开发（想了解小程序开发）

接下来就跟着老师，3小时入门小程序，并开发一款属于自己的电商小程序吧。

来带大家看下第六节课的内容，本节课程比较基础，主要面对零基础人员。

如果已经入门的同学觉得简单，就去文末点击查看原文，查看后面的视频

《小程序商品列表页的简单实现》

先带大家看下效果图

本节知识点

1. 列表布局的实现
2. 图片的显示
3. 标题和价格的显示
4. 底部分割线的实现

我们的这节的列表页面比较简单，因为要教零基础的同学入门，所以前面课程讲的都比较基础，如果你已经有编程基础了，前面的入门课程可以跳过直接去看后面的课程。

一，定义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;
}

到这里我们的商品列表就实现了，但是我们这里的数据是写死在本地的，我们通常商品的列表数据要从服务器上动态的去获取。后面的章节就会带领大家借助小程序云开发来实现动态的商品列表。

THE END

本套课程主要就是面向零基础人员。所以讲解的都是一些通俗易懂的入门技能。所以完全不用担心自己不懂编程。