小程序模板网

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

发布时间:2017-12-01 15:27 所属栏目:小程序开发教程

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

 
 
 
在微信小程序发布之后一个月的今天,微信小程序的火苗以及熄灭了一大半,他们都说微信小程序只是火了一天而已,吐槽微信小程序各种弊端,各种不完善,但是不得不说新的技术,新的视野展现在我们面前的时候,我们不得不对他心存敬畏。
 
  注册了微信小程序的公众号,获取到了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是件特别头疼的事情,就比如说那么多按钮,我需要我点击的时候改变它的背景颜色,获取我点击的内容,点击传参,以及调用微信内部地图的问题等等。


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18013.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询