频道栏目
首页 > 微信学院 > 微信小程序 > 正文
微信小程序学习心得-订咖啡实战教程
2018-06-08 11:44:25           
收藏   我要投稿

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

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

 

点击复制链接 与好友分享!回本站首页
上一篇:会员小程序开发总结:条形码二维码实战教程
下一篇:微信小程序支付功能开发教程
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站