欢迎光临,了解微信小程序开发,就上易用通! QQ登录

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

发布:2018-02-02 14:56浏览:来源:网络 编辑:cola

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

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

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

  前期准备:

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

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

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

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


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

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


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




免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。

在线客服1:
点击这里给我发消息

在线客服2:
点击这里给我发消息

商务客服:
点击这里给我发消息

服务时间:
9:00-18:00(工作日)