微信小程序开发实例--美食健康菜谱Lite（一）
2017-12-14 本文已影响0人
乌云735
在媒体没有狂热聚焦的这半年，小程序正在加速狂飙，闷声发大财的人也越来越多。
75 天月入千万、双十一订单量超京东、日均超 1 亿的访问 UV，千万用户量产品比比皆是、线下千人大会座无虚席…… 这一切，都和半年前小程序刚经历的那场开发者集体恐慌，甚至大规模「逃离」形成了鲜明对比。
在最近的阿拉丁生态产业峰会的台下，2000 人的会场座无虚席，挤在台下的开发者和商家没人再纠结「到底该不该做小程序」，取而代之的话题变成了「谁会是下一个爆款」。
为了顺应时代潮流，不被时代抛弃，赶紧研究了下小程序，撸了个demo。
准备：
后端用LeanCloud实现，注册账号、准备数据。
准备就绪，开撸。。
请开始你的表演.jpg
首先打开小程序开发工具，创建项目，输入AppID
打开app.json，在"pages"下添加：
"pages": [
"pages/cookList/CookList"
]
刷新，开发工具会自动生成CookList.js，CookList.wxml，CookList.wxss等文件。
打开CookList.wxml
编辑template：
<template name="cook_item">
<view class='cook_info' data-cook_item="{{cook_item}}" bindtap="onItemClick">
<image class='cook_image' mode="aspectFill" src="{{cook_item.pic}}"></image>
<view class='float_view'>
<text class='cook_name'>{{cook_item.name}}</text>
<view class='cook_detail'>
<text class='cook_time'>时间：{{cook_item.cookingtime}}</text>
<text decode="{{true}}" space="{{true}}"> </text>
<text class='cook_people'>适合人数：{{cook_item.peoplenum}}</text>
</view>
</view>
</view>
</template>
小程序提供wx:for来实现列表的渲染：
<block wx:for="{{cookList}}" wx:for-index="index" wx:for-item="cook_item">
<template is="cook_item" data="{{cook_item, index}}" />
</block>
其中{{cookList}}在CookList.js中data下定义：
data: {
cookList: []
}
菜谱数据来源于LeanCloud，主要代码：
getCookList: function () {
var that = this
// wx.showNavigationBarLoading();
wx.showLoading({
title: '加载中',
})
var classid = that.data.classid
console.log('classid:' + classid)
new AV.Query('Cook_Dishes_Simple')
// .include('avatar') // avatar is an AV.File
.descending('createdAt')
.equalTo('classid', classid)
.limit(page_size)
.skip(page * page_size)
.find()
.then(cookList => {
var list = that.data.cookList
if (page == 0) {
list = []
}
list = list.concat(cookList)
this.setData({ cookList: list }),
wx.hideNavigationBarLoading(),
setTimeout(function () {
wx.hideLoading()
}, 200)
page++
wx.stopPullDownRefresh()
})
.catch(console.error);
},
全部代码如下：
CookList.js
const AV = require('../../libs/av-weapp-min.js');
var page_size = 5
var page = 0
Page({
/**
* 页面的初始数据
*/
data: {
cookList: [],
dishIndex: 0,
classid: '224',
dishNameList: [],
dishesList: [],
page: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
page = 0;
var dishNameList = []
this.setData({
dishesList: getApp().globalData.dishesList
})
this.data.dishesList.forEach(function (item, index, array) {
dishNameList.push(item.name);
});
this.setData({
dishNameList: dishNameList
})
},
getCookList: function () {
var that = this
// wx.showNavigationBarLoading();
wx.showLoading({
title: '加载中',
})
var classid = that.data.classid
console.log('classid:' + classid)
new AV.Query('Cook_Dishes_Simple')
// .include('avatar') // avatar is an AV.File
.descending('createdAt')
.equalTo('classid', classid)
.limit(page_size)
.skip(page * page_size)
.find()
.then(cookList => {
var list = that.data.cookList
if (page == 0) {
list = []
}
list = list.concat(cookList)
this.setData({ cookList: list }),
wx.hideNavigationBarLoading(),
setTimeout(function () {
wx.hideLoading()
}, 200)
page++
wx.stopPullDownRefresh()
}
)
.catch(console.error);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.getCookList()
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
page = 0
wx.stopPullDownRefresh()
this.getCookList()
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.getCookList()
},
listenerButtonPreviewImage: function (event) {
var picUrl = event.currentTarget.dataset.pic;
var cookInfo = this.data.cookInfo;
var progress = cookInfo.attributes.process;
var picUrls = this.data.picUrls;
console.log(picUrls)
console.log(progress)
if ((!picUrls || picUrls.length == 0) && progress) {
console.log('ssss')
progress.forEach(function (item, index, array) {
// ...
picUrls.push(item.pic);
console.log(item.pic)
});
this.setData({
picUrls: picUrls
})
}
console.log(picUrls)
wx.previewImage({
current: picUrl,
urls: picUrls,
success: function (res) {
console.log(res);
},
fail: function () {
console.log('fail')
},
complete: function () {
console.log('complete')
}
})
},
onItemClick: function (event) {
var item = event.currentTarget.dataset.cook_item;
// console.log(event);
console.log(item);
wx.navigateTo({
url: '../cookDetail/CookDetail?id=' + item.objectId
})
},
bindPickerChange: function (e) {
var index = e.detail.value
var classid = this.data.dishesList[index].classid
console.log('picker发送选择改变，携带值为', index)
this.setData({
dishIndex: index,
classid: classid
})
page = 0
this.getCookList()
if (wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop: 0
})
}
},
onSearchClicked: function () {
wx.navigateTo({
url: '../search/Search'
})
},
onUserClicked: function () {
var that = this;
AV.User.loginWithWeapp().then(user => {
that.globalData.userInfo = user.toJSON();
}).catch(console.error);
wx.navigateTo({
url: '../user/UserCenter'
})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
var name = this.data.cookInfo.name
var id = this.data.cookInfo.id
console.log(name)
console.log(id)
return {
title: "name",
desc: name,
path: '/pages/cookList/CookList'
}
}
})
CookList.wxml
<view class='content'>
<block wx:for="{{cookList}}" wx:for-index="index" wx:for-item="cook_item">
<template is="cook_item" data="{{cook_item, index}}" />
</block>
</view>
<view class="change_type">
<picker bindchange="bindPickerChange" value="{{dishIndex}}" range="{{dishNameList}}">
<view class="picker">
选择菜系：{{dishesList[dishIndex].name}}
</view>
</picker>
<image class="btn_icon search" bindtap='onSearchClicked' src='../../imgs/ic_search_white_24dp.png'></image>
<image class="btn_icon user" bindtap='onUserClicked' src='../../imgs/ic_account_circle_white_24dp.png'></image>
</view>
<template name="cook_item">
<view class='cook_info' data-cook_item="{{cook_item}}" bindtap="onItemClick">
<image class='cook_image' mode="aspectFill" src="{{cook_item.pic}}"></image>
<view class='float_view'>
<text class='cook_name'>{{cook_item.name}}</text>
<view class='cook_detail'>
<text class='cook_time'>时间：{{cook_item.cookingtime}}</text>
<text decode="{{true}}" space="{{true}}"> </text>
<text class='cook_people'>适合人数：{{cook_item.peoplenum}}</text>
</view>
</view>
</view>
</template>
CookList.wxss
.content {
width: 100%;
position: absolute;
display: flex;
flex-direction: column;
}
.cook_info {
width: 100%;
box-sizing: border-box;
position: relative;
}
.cook_image {
width: 100%;
}
.float_view {
width: 100%;
height: 110rpx;
opacity: 0.6;
background-color: #000;
position: absolute;
text-align: left;
display: flex;
flex-direction: column;
justify-content: space-between;
bottom: 10rpx;
box-sizing: border-box;
}
.cook_name {
width: 100%;
color: white;
font-size: 35rpx;
margin-top: 10rpx;
margin-left: 10rpx;
}
.cook_tags {
width: 100%;
color: white;
font-size: 25rpx;
margin-left: 10rpx;
margin-bottom: 10rpx;
position: absolute;
text-align: left;
bottom: 0rpx;
}
.cook_detail {
display: flex;
width: 100%;
color: white;
font-size: 25rpx;
margin-left: 10rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
text-align: left;
}
.float_layout {
position: fixed;
bottom: 30rpx;
color: white;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.change_type {
position: fixed;
bottom: 40rpx;
left: 30rpx;
font-size: 40rpx;
background: #eb1584;
opacity: 0.7;
padding: 10rpx;
padding-left: 20rpx;
padding-right: 20rpx;
border-radius: 60rpx;
color: white;
text-align: center;
justify-content: center;
height: 60rpx;
}
.btn_icon {
width: 65rpx;
height: 65rpx;
background: #eb1584;
opacity: 1;
padding: 10rpx;
border-radius: 50rpx;
position: fixed;
bottom: 40rpx;
right: 30rpx;
}
.search {
right: 140rpx;
}
