monsterk1：微信小程序上手篇《四》初级实践篇

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

  好了，废话不多说，先上小程序示例的效果图：

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

  前期准备：

  1.准备好图片，百度搜索多的是。

  2.准备好json格式内容，我们的内容是以json形式存储的。

  笔者是一名app开发，本想以json格式文件存储模型，但是一直找不到好的读取项目中本地json的方法，如有所知，能够评论告诉笔者，笔者先在此谢过。

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

1. [ {"url":"https://www.huizhou.cn/food/rdtj/201211/W020121126369710784664.jpg", "name":"猪肉", "price":"32.4"}, {"url":"https://www.sc115.com/wenku/uploads/allimg/131201/214G63238-0.jpg", "name":"水果", "price":"17.5"}, {"url":"https://img1.gtimg.com/jiangsu/pics/hv1/78/113/1901/123641418.jpg", "name":"蔬菜", "price":"10.2"}, {"url":"https://image.enmuo.com/CMS/2011/12/12/1/CMS_111212141009773_0E_400x267.jpg", "name":"玩具", "price":"50.1"}, {"url":"https://pic.58pic.com/58pic/15/68/58/80Q58PIC2Yz_1024.jpg", "name":"电脑", "price":"4500.2"} ]

  大家以这样的格式写就好，内容自定。

  做好前期准备，就正式进入敲代码阶段。

  首先创建项目，然后将项目中没有用的东西删除掉：

  1.utils的文件夹删除，此项目用不到；

  2.pages中的logs文件夹删除，此项目用不到；

  3.app.js中删除无用代码，留下一个空白的onLaunch方法和空白的globalData对象，app.json中删除"pages/logs/logs"，"navigationBarTitleText"改为我们的“小型超市购物”，app.wxss中我们将padding改为50rpx 0；

  4.index的每一个文件都清空；

[
{"url":"https://www.huizhou.cn/food/rdtj/201211/W020121126369710784664.jpg",
"name":"猪肉",
"price":"32.4"},
{"url":"https://www.sc115.com/wenku/uploads/allimg/131201/214G63238-0.jpg",
"name":"水果",
"price":"17.5"},
{"url":"https://img1.gtimg.com/jiangsu/pics/hv1/78/113/1901/123641418.jpg",
"name":"蔬菜",
"price":"10.2"},
{"url":"https://image.enmuo.com/CMS/2011/12/12/1/CMS_111212141009773_0E_400x267.jpg",
"name":"玩具",
"price":"50.1"},
{"url":"https://pic.58pic.com/58pic/15/68/58/80Q58PIC2Yz_1024.jpg",
"name":"电脑",
"price":"4500.2"}
]

  我们先从app.js文件着手，此时你的代码应该和我的一样：

1. App({
2. onLaunch: function () {
3.  
4. },