微信小程序开发--初级实践

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

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

前期准备：

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

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

[  
        {"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的每一个文件都清空；
我们先从app.js文件着手，此时你的代码应该和我的一样：

App({  
  onLaunch: function () {  

  },  

  globalData:{  
  }  
})  

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

getUserInfo:function(cb)  

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

getItem : function (callback) {  
},  

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

globalData:{  
    items:null   
  }  

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

if (this.globalData.items) {  
      typeof callback == "function" && callback(this.globalData.items)  
    }  
    else {  
      this.globalData.items = [  
        {"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"}  
    ]  
    typeof callback == "function" && callback(this.globalData.items)  
    }  

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

Page({  
  data:{  
    String1  
  },  
  onLoad:function(options){  
    // 生命周期函数--监听页面加载  
    String2  
  },  
  onReady:function(){  
    // 生命周期函数--监听页面初次渲染完成  
    String3  
  },  
  onShow:function(){  
    // 生命周期函数--监听页面显示  
    String4  
  },  
  onHide:function(){  
    // 生命周期函数--监听页面隐藏  
    String5  
  },  
  onUnload:function(){  
    // 生命周期函数--监听页面卸载  
    String6  
  },  
  onPullDownRefresh: function() {  
    // 页面相关事件处理函数--监听用户下拉动作  
    String7  
  },  
  onReachBottom: function() {  
    // 页面上拉触底事件的处理函数  
    String8  
  },  
  onShareAppMessage: function() {  
    // 用户点击右上角分享  
    return {  
      title: 'title', // 分享标题  
      desc: 'desc', // 分享描述  
      path: 'path' // 分享路径  
    }  
  }  
})  

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

Page({  
  data:{  
    String1  
  },  
  onLoad:function(options){  
    // 生命周期函数--监听页面加载  
    String2  
  }  
})  

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

data: {  
    items:[]  
  },  

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

var app = getApp()  

然后在onLoad中调用：

onLoad: function () {  
    var that = this  
    app.getItem(function(item){  
      that.setData({  
        items:item,  
      })  
    })  
  },  

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

<view class="container">  
</view>  

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

<block wx:for="{{items}}" wx:for-item ="item" wx:key ="*this">  
</block>  

因为我们的items是一个数组，所以我们得需要用for语句去显示它，我们这里的用法与demo中无二，这样我们就能获取到items中每一个数据。其次，我希望每一条数据为一大块，而且需要有一定的间隔如：

我们首先要用一个view来承载一行一行的格子：

<block wx:for="{{items}}" wx:for-item ="item" wx:key ="*this">  
<view>  
</view>   
</block>  

当然，这么简单是无法达成我们要的效果的，需要修改样式，在index.wxss中添加一个样式：

.item {  
    display: flex;  
    background-color: white;  
    flex-direction: row;  
    align-items: flex-start;  
    margin: 20rpx auto;  
    padding: 5rpx;  
    box-sizing: border-box;  
    border: 1px solid #d0d0d0;  
    border-radius: 2px;  
    width: 90%;  
}  

这个是我们整个一行的样式，如此一来我们就基本达到我们的效果，然后把样式表加入wxml中的view：

<block wx:for="{{items}}" wx:for-item ="item" wx:key ="*this">  
<view class="item">  
</view>   
</block>  

这步完成，大的框架已经搭好了，我们现在添加数据。首先添加商品名称，我希望序列号和商品名称显示在左上角：

<block wx:for="{{items}}" wx:for-item ="item" wx:key ="*this">  
<view class="item">  
<text>{{index + 1}}.{{item.name}}</text>  
</view>   
</block>  

然后，我们需要添加我们的商品图片，没有图片顾客怎么浏览商品呢：

<block wx:for="{{items}}" wx:for-item ="item" wx:key ="*this">  
<view class="item">  
<text>{{index + 1}}.{{item.name}}</text>  
<image src="{{item.url}}" mode="aspectFit"></image>  
</view>   
</block>  

现在看起来整个显示不够美观，商品名和图片紧贴在一起，图片太大，没事，我们添加样式就行：

.p{  
    padding-right:10rpx;  
}  
.image{  
    box-sizing: border-box;  
    border: 1px solid #d0d0d0;  
    width: 100px;  
    height: 80px;   
    background-color: 'white';  
}  

然后将样式加入：

<block wx:for="{{items}}" wx:for-item ="item" wx:key ="*this">  
<view class="item">  
<text class='p'>{{index + 1}}.{{item.name}}</text>  
<image class='image' src="{{item.url}}" mode="aspectFit"></image>  
</view>   
</block>  

好了，看上去美观多了是不是？最后我们把价格添加：

<block wx:for="{{items}}" wx:for-item ="item" wx:key ="*this">  
<view class="item">  
<text class='p'>{{index + 1}}.{{item.name}}</text>  
<image class='image' src="{{item.url}}" mode="aspectFit"></image>  
<text>{{item.price}} 元</text>  
</view>   
</block>  

这样子整体效果还不是特别好，我们继续添加样式：

.price{  
    line-height: 80px;  
    width: 50%;  
    text-align: center;  
}  

加入样式：

<block wx:for="{{items}}" wx:for-item ="item" wx:key ="*this">  
<view class="item">  
<text class='p'>{{index + 1}}.{{item.name}}</text>  
<image class='image' src="{{item.url}}" mode="aspectFit"></image>  
<text class='price'>{{item.price}} 元</text>  
</view>   
</block>  

差不多了，我们的长相看的过去了，现在我的需求变成了点击每一行进去可以看详情，所以我们得新建一个页面来显示详情，添加item的文件，.js .wxss .wxml创建好。
记得需要在app.json中配置我们的新页面，不然无法显示和添加页面：

"pages":[  
    "pages/index/index",  
    "pages/item/item"  
  ],  

我们等等处理item文件，我们先来添加点击处理，来到index.js中，我们添加一个点击方法：

itemTap: function (event){  
  }  

我现在的需求是点击哪一行，哪一行的内容就要传到第二个页面，这样该如何实现呢？这个方法在demo中并没有体现，但是官方文档中有说明，在这里你们可以直接看我代码，在index.wxml中添加itemTap：

<block wx:for="{{items}}" wx:for-item ="item" wx:key ="*this">  
<view bindtap="itemTap" data-item="{{item}}" class="item">  
<text class='p'>{{index + 1}}.{{item.name}}</text>  
<image class='image' src="{{item.url}}" mode="aspectFit"></image>  
<text class='price'>{{item.price}} 元</text>  
</view>  
</block>  

为了获取我们点击到的数据，我们需要用到data-这个语句，这个语句data-之后是我们自定义的key，然后=之后是我们的value，这样我们就可以在js中以key-value的形式获取我们的数据，我们在这里传过去的是一个对象。
在index.js中我们修改点击事件的代码：

itemTap: function (event){  
    var item = event.currentTarget.dataset.item  
    wx.navigateTo({  
      url: '../item/item?name=' + item.name + '&url=' + item.url + '&price=' + item.price,  
    })  
  }  

event这个参数有哪些变量，我怎么知道里面有currentTarget这个变量？这里有个小技巧，先console.log(event)，运行一遍，然后在调试中看console信息，你就能知道event里面包含哪些变量。总之我们拿到了我们的数据，之后我们跳转到新的页面。在这里我们看到与demo中不同的代码?name=’+之后的代码，在这里笔者走了很多弯路，本来想要正向传值，但是系统又拿不到item的实例，后来我通过搜索别人大神和官方文档，我才知道微信小程序传值是以类似get方法的url拼接传值，真是有点意想不到。
这里传值在哪里接收呢，哈哈，这就要用到我们之前删除的options参数（往上拉，你会看到我说的参数）。
来到item.js，创建Page({…})代码：

Page({  
  data:{  
    String1  
  },  
  onLoad:function(options){  
    // 生命周期函数--监听页面加载  
    String2  
  }  
})  

看到了么，options参数，这里就能接收之前页面传过来的内容，它本身就是一个对象，因此我们直接创建一个对象去接收它：

Page({  
  data: {  
      item:{}  
  },  
  onLoad: function (options) {  
     this.setData({  
        item:options,  
      })  
 }  
})  

这样我们就获取了商品数据，然后我希望标题也能够变成商品的名字，虽然demo中没有用到这个方法，不过很幸运，系统正好给了这样一个接口：

wx.setNavigationBarTitle({  
        title: options.name,  
      })  

哈哈，简单，我们已经处理好所有的逻辑了，现在就来展示吧，item.wxml中：

<view class="container item">  
<image class="image" src="{{item.url}}" mode="aspectFit"></image>  
<text class="title">{{item.name}}</text>  
<text class="price">{{item.price}} 元</text>  
</view>  

item.wxss中：

.item {  
  align-items: center;    
  box-sizing: border-box;  
  border: 1px solid lightgrey;  
  border-radius: 5px;  
  margin: 0rpx 10rpx;  
  padding: 100rpx 0rpx 10rpx 10rpx;  
  background-color: lightcyan;  
}  
.image {  
    width: 100%;  
}  
.title {  
    border-bottom: 1px solid lightgray;  
    width: 80%;  
    line-height: 100px;  
    text-align: center;  
}  
.price {  
   line-height: 80px;  
   text-align: right;  
   width: 80%;  
   font-family: "YouYuan";  
   font-size: 30px;  
   font-weight: bold;  
   font-style:oblique;  
}  

在这里关于wxml中的代码和wxss中的代码我就不多加阐述，因为我希望读者你自己去显示，用不同的方法来显示内容～