微信小程序开发，快捷方便，容易上手，学习成本不高，但是好的程序员必须要经常开发来积攒经验才为上策。在我的微信小程序入门篇中，笔者把微信小程序的demo通读了一遍，可以说收获良多，很多东西只有在自己理解的情况下才能牢牢记住，通过现有的知识做出能力范围内可以实现的东西，这对于开发者来说是最好的实践。因此笔者在这里特别推出一个初级教程，而其中的知识基本上都是在demo中就可以获得的，只要你通读了我之前的文章，我相信你也能开发出一个简单的小程序。 好了，废话不多说，先上小程序示例的效果图：

由于demo能学到的有限，笔者暂时能想出来的实例就是类似这样的应用，不过技术都是一步一步增长的，从小做起，然后才能强大。

1.准备好图片，百度搜索多的是。 2.准备好json格式内容，我们的内容是以json形式存储的。

这里笔者给大家一份自己写的json，仅供参考：

大家以这样的格式写就好，内容自定。 做好前期准备，就正式进入敲代码阶段。 首先创建项目，然后将项目中没有用的东西删除掉： 1.utils的文件夹删除，此项目用不到； 2.pages中的logs文件夹删除，此项目用不到； 3.app.js中删除无用代码，留下一个空白的onLaunch方法和空白的globalData对象，app.json中删除”pages/logs/logs”，”navigationBarTitleText”改为我们的“小型超市购物”，app.wxss中我们将padding改为50rpx 0； 4.index的每一个文件都清空； 我们先从app.js文件着手，此时你的代码应该和我的一样：

很空，且让我们慢慢添加。在这里，我希望复习一下之前demo中运用的传值方法，记得demo中有个方法是：

很多读者应该都记得，而且对于新手来说这个方法不好用，很难理解，因此我们在这里再复习一遍，自己来使用它（cb这个参数笔者现在才知道全称应该是callback，回传值）。 我们现在也写一个方法，名为getItem，用来获取我们商品的列表数据：

这个方法就是获取我们的商品数据的，在这里，我们仿照demo中的写法，在globalData中设置一个值（有一些读者可能会想的比较明白，可能事后会发现这个值根本用不到，只不过我们是为了模仿demo的写法才用的这个值）：

在这里我们有个空的items，这个就是我们的商品数据，然后我们再模仿getUserInfo中的写法：

因为我们的items此时为空的，所以第一个if我们是走不进去的，然后在else中我们直接设置了items，用我们前期准备的json赋值给它，它就成了一个数组，数组中包含对象。在这之后我们回传这个值给callback的参数，让其能够获取我们的商品数据。 到这里，我们的app的代码都码好了，很简单，这里的逻辑只是让app公开一个方法回调，拿到我们设置的json（这里又可以举一反三，用请求同理）。接下来我们就要开始处理index文件了。 在文件中我们输入page，系统自动会给我们拼接上Page({…})代码，回车即可：

内容很多，我们将多余代码删除，只留下：

在这里我们不需要options这个参数（这个参数后面会用到），删除即可。 现在来说一下逻辑，我们需要在这个首页显示的是一个列表，因此我要拿到数据来展示，而数据在app的实例中我们写了一个方法叫做getItem来获取，为了保存这个数据，我们需要一个变量来存储它，既然如此，我们先在data中设定一个存储用的变量：

为什么是数组？我们的json和getItem返回的本来就是一个数组，所以我们创建一个数组去存储它。 之后我们就要去获取它，很简单在onLoad方法中，我们去调用app的getItem方法，因此别忘了先获取app实例：

然后在onLoad中调用：

这个方法很眼熟，跟demo中几乎一样吧。记得getItem的参数我们已经定义为了function，所以在这里我们需要传入一个function，其次既然它符合了function，别忘了我们后面还有回调用的callback(this.globalData.items)方法，所以我们要用一个参数去接收它，我在这里用了item（在实际开发中使用items更好，这里是方便读者区分）。在我们的获取到商品数据的同时，我们使用setData将它传输给我们index中的items变量进行存储，这样我们就可以在wxml中获取我们的数据了。 来到wxml中，我们需要一个大容器来展示数据：

这个容器是根据container的样式，而container是保存在app.wxss中，如果你不知道具体内容，可以回去看一下。既然有了容器，我们就需要展示。我们的目的是展示一个列表，我之前的文章说了，block是我们将来经常用到的东西，在这里我们正好使用它：