258资源分享网

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

 

 

 

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

 

　　注册了微信小程序的公众号，获取到了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);

}

})

}

})