微信小程序学习心得----订咖啡

      在微信小程序发布之后一个月的今天，微信小程序的火苗以及熄灭了一大半，他们都说微信小程序只是火了一天而已，吐槽微信小程序各种弊端，各种不完善，但是不得不说新的技术，新的视野展现在我们面前的时候，我们不得不对他心存敬畏。

　　注册了微信小程序的公众号，获取到了openid，下载好了小程序开发工具，就这样开始了我的小程序之旅。

　　话不多说，先上效果图：

先上代码：

html

<!--index.wxml-->
<view class="content">
<view class="clear">
<label class="title">咖啡的种类：</label>
<view wx:for="{{coffeeList}}" class="kindlist">
<button class="kindbtn {{select == index ? 'red':'gray'}}" bindtap="selectCoffee" data-id="{{item.coffee}}" data-num="{{index}}" >{{item.coffee}}</button>
</view>
</view>
<view class="clear">
<label class="title">温度：</label>
<view wx:for="{{temperatureList}}" class="kindlist">
<button class="kindbtn {{select1 == index ? 'red':'gray'}}" bindtap="selectTemperature" data-id="{{item.temperature}}" data-num="{{index}}">{{item.temperature}}</button>
</view>
</view>
<view class="clear">
<label class="title">口味：</label>
<view wx:for="{{takeList}}" class="kindlist">
<button class="kindbtn {{select2 == index ? 'red':'gray'}}" bindtap="selectTake" data-id="{{item.take}}" data-num="{{index}}">{{item.take}}</button>
</view>
</view>
<view class="clear">
<button class="kindbtn addr-btn" bindtap="getAddr">获取当前位置：</button>
<p class="addr">{{address}}</p>
</view>
<view class="clear">
<label class="title">备注：</label>
<input bindinput="bindKeyInput" class="remarkinput"/>
</view>
<view class="clear">
<label class="title">您选择的是：</label>
<span>{{selectedCoffee}}{{selectedTemperature}}{{selectedTake}}{{address}}{{remark}}</span>
</view>
<view class="clear">
<button bindtap="submitCoffee">确定</button>
</view>
</view>

css代码：

.content{
margin: 10px 0;
padding: 0 10px;
}
.title{
position: relative;
font-size: 14px;
}
.kindlist{
margin:10px 20px;
}
.kindbtn{
height:20px;
line-height: 20px;
font-size: 12px;
width: auto;
float: left;
position: flex;
margin-right: 20px;
margin-top: 10px;
color: #fff;
}
.clear{
clear: both;
padding-top: 20px;
}
.remarkinput{
border: 1px solid #ccc;
margin: 10px;
border-radius: 5px;
}
.selected{
background: red;
}
.gray{
background: #747B80;
}
.red{
background: #1FC659;
}
.addr{
font-size: 12px;
}
.addr-btn{
background: #54a384;
}

js代码：

//index.js
//获取应用实例
var app = getApp()
Page({
data:{
select:'-1',
select1:'-1',
select2:'-1',
coffeeList : [
{id:1,coffee:"卡布奇诺"},
{id:2,coffee:"拿铁"},
{id:3,coffee:"爱尔兰"},
{id:4,coffee:"炭烧咖啡"},
{id:5,coffee:"意大利咖啡"},
{id:6,coffee:"法式牛奶咖啡"},
{id:7,coffee:"曼特宁咖啡"}
],
temperatureList : [
{id:1,temperature:"去冰"},
{id:2,temperature:"少冰"},
{id:3,temperature:"常温"},
{id:4,temperature:"加热"}
],
takeList : [
{id:1,take:"少糖"},
{id:2,take:"多糖"}
]
},
selectCoffee:function(e){
console.log(e.target.dataset.num);
this.setData({
select:e.target.dataset.num,
selectedCoffee:e.target.dataset.id
});
},
selectTemperature:function(e){
this.setData({
select1:e.target.dataset.num,
selectedTemperature:e.target.dataset.id
});
},
selectTake:function(e){
this.setData({
select2:e.target.dataset.num,
selectedTake:e.target.dataset.id
});
},
bindKeyInput: function(e) {
this.setData({
remark: e.detail.value
})
},
getAddr: function(){
var that = this;
wx.chooseLocation({
success: function(res){
var point = {
latitude: res.latitude,
longitude: res.longitude
};
that.setData({
address : res.name || res.address
});
},
fail: function(res) {
console.log(res);
},
complete: function(res) {
console.log(res);
}
})
}
})

第一次真正自己写微信小程序，挺不习惯的，无法操作dom是件特别头疼的事情，就比如说那么多按钮，我需要我点击的时候改变它的背景颜色，获取我点击的内容，点击传参，以及调用微信内部地图的问题等等。