微信小程序?qū)W習(xí)心得----訂咖啡
發(fā)布時(shí)間：2017-12-01 15:27 所屬欄目：小程序開(kāi)發(fā)教程
在微信小程序發(fā)布之后一個(gè)月的今天，微信小程序的火苗以及熄滅了一大半，他們都說(shuō)微信小程序只是火了一天而已，吐槽微信小程序各種弊端，各種不完善，但是不得不說(shuō)新的技術(shù)，新的視野展現(xiàn)在 ...
在微信小程序發(fā)布之后一個(gè)月的今天，微信小程序的火苗以及熄滅了一大半，他們都說(shuō)微信小程序只是火了一天而已，吐槽微信小程序各種弊端，各種不完善，但是不得不說(shuō)新的技術(shù)，新的視野展現(xiàn)在我們面前的時(shí)候，我們不得不對(duì)他心存敬畏。
注冊(cè)了微信小程序的公眾號(hào)，獲取到了openid，下載好了小程序開(kāi)發(fā)工具，就這樣開(kāi)始了我的小程序之旅。
話不多說(shuō)，先上效果圖：
先上代碼：
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">獲取當(dāng)前位置：</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
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data:{
select:'-1',
select1:'-1',
select2:'-1',
coffeeList : [
{id:1,coffee:"卡布奇諾"},
{id:2,coffee:"拿鐵"},
{id:3,coffee:"愛(ài)爾蘭"},
{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);
}
})
}
})
第一次真正自己寫微信小程序，挺不習(xí)慣的，無(wú)法操作dom是件特別頭疼的事情，就比如說(shuō)那么多按鈕，我需要我點(diǎn)擊的時(shí)候改變它的背景顏色，獲取我點(diǎn)擊的內(nèi)容，點(diǎn)擊傳參，以及調(diào)用微信內(nèi)部地圖的問(wèn)題等等。
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源
碼云倉(cāng)庫(kù):
本文地址：http://www.u-renovate.com/wxmini/doc/course/18013.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
