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

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

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

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

  前期准备:

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

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

  笔者是一名app开发,本想以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中的代码我就不多加阐述,因为我希望读者你自己去显示,用不同的方法来显示内容,在这里笔者感谢公司前端二胡同志友情帮助我编写部分css代码,毕竟笔者css还是个雏~

  • 7
    点赞
  • 6
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论

打赏作者

monsterk1

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值