当前位置:   article > 正文

美团外卖小程序_美团代码行数

美团代码行数

这个美团外卖的小程序我是从github上面找到的,然后参考他的代码完成的。所以界面和代码还是有点相似,毕竟现在我才刚开始学习,所以我认为参考大牛源码也是一种提升。因为里面有许多的技巧在里面,有的时候就可以不用这么纠结应该如何布局等。


这是一个首页界面,在写代码的时候,只要在app.json的pages的数组的第一行写上你要的首页路径就可以了,因为小程序是将获取到的第一条路径默认为首页。

这些页面都是采用组件写的,而且小程序的组件不多。只要学过前端的都能够很快的上手小程序的前台页面的编写,而且这里的前端都是采用动态的渲染方式的,所以就会有模板的使用出现。这里的模板开始和结束符为{{}}。

然后就是点击商家信息栏进入商家页面了。


这里面的话是采用scroll-view组件写的,因为左边的要滚动,右边的也要滚动。所以要采用scroll-view来写。这里的scroll-view要固定height的值,不然会出不来滚动的效果,不能用百分比的形式。然后按钮的话只要采用bindtap来绑定函数就ok了。这样子的话,只要我们点击图片就会触发事件,这里的bind是可冒泡的,采用catch的话就不会冒泡了。


之后就是订单的提交了,这里的话只要提取静态的购物车数据就ok了。之后直接显示出来,然后再请求url来进行订单的提交。

这个程序大概就是这样子了。

代码在这里:传送门


2017.7.19更新

在使用js的变量的时候,我发现var a=2,b=[]。这样子写有问题,他会说我的变量未定义。


定位添加:

在index.js里面可以使用wx自定义函数getLocation来获取位置数据

  1. wx.getLocation({
  2. type: "wgs84",
  3. success: function (res) {
  4. var lat = res.latitude;//纬度
  5. var lng = res.longitude;//经度
  6. console.log("lat:" + lat);
  7. console.log("lng:" + lng);
  8. that.getCity(lat, lng);//调用自己写的函数获得城市信息
  9. },
  10. })
获取到数据之后就要利用百度的api来将具体的经纬度转为位置的信息了。所以这里的话可以自己封装一个函数来使用,这里就是上面代码所用到的getCity函数。

  1. //获得城市
  2. getCity: function (lat, lng) {
  3. var that = this;
  4. var url = "http://api.map.baidu.com/geocoder/v2/";
  5. var param = {
  6. ak: 'QgDjg59KnbdsL14plwnoP5rUAGKyDYPe',
  7. location: lat + ',' + lng,
  8. output: 'json'
  9. };
  10. wx.request({
  11. url: url,
  12. data: param,
  13. success: function (res) {
  14. console.log(res);
  15. var city = res.data.result.addressComponent.district;
  16. var street = res.data.result.addressComponent.street;
  17. that.setData({
  18. city: city,
  19. street: street
  20. });
  21. }
  22. })
  23. }

这样子就可以获取到城市和街道的数据了,之后只要自己在前端页面调用就ok了。


然后就是对数据的动态加载,因为这里的数据是假的,所以做出来的也是假的加载条。



这里面其实是利用

scroll-view组件的bindscrolltolower事件来做的,这里面首先给出一个分组数据,然后等到滑到底部就会触发这个函数,就可以在里面做数据动态添加和动画效果出来了。这个函数会出现抖动的现象,所以要使用一个变量来控制只能进行一次。具体代码如下:
shop.js:
具体的更改代码在onLoading和addGoods和timeOut函数里面。
  1. var app = getApp();
  2. var server = require('../../utils/server.js');
  3. Page({
  4. /**
  5. * 页面的初始数据
  6. */
  7. data: {
  8. cart:{
  9. count:0,
  10. total:0
  11. },
  12. cartList:[],
  13. localList:[],
  14. isFreshing:false,
  15. loding:false,
  16. count:1,
  17. sum : 0,
  18. showCartDetail:false,
  19. defaultImg: 'http://global.zuzuche.com/assets/images/common/zzc-logo.png',
  20. },
  21. /**
  22. * 生命周期函数--监听页面加载
  23. */
  24. onLoad: function (options) {
  25. var shopId = options.id;
  26. var shop = server.selectedShopDetail(shopId);
  27. this.setData({
  28. shopId : shopId,
  29. shop : shop,
  30. sum : shop.menu.length
  31. });
  32. var menu = Array(shop.menu[0]);
  33. this.setData({
  34. menu: menu
  35. });
  36. console.log("myShop");
  37. console.log(this.data.shop);
  38. console.log(this.data.menu);
  39. //加载静态订单数据
  40. var res = wx.getStorageSync('orderList');
  41. if(res){
  42. if(res.count<0)res.count=0;
  43. this.setData({
  44. cart:{
  45. count:res.count==null?0:res.count,
  46. total:res.total
  47. }
  48. });
  49. console.log("shop---Loading");
  50. console.log(res.count,res.total,res.cartList);
  51. console.log(this.data.cart.count, this.data.cart.total);
  52. console.log("shop---end");
  53. if(!server.isEmptyObject(res.cartList)){
  54. this.setData({
  55. cartList:res.cartList,
  56. localList:server.filterEmptyObject(res.cartList)
  57. });
  58. }
  59. }
  60. //防止未定义数组的形式
  61. if (typeof this.data.cartList[this.data.shopId] == 'undefined' || server.isEmptyObject(this.data.cartList[this.data.shopId])) {
  62. var cartList = this.data.cartList;
  63. cartList[this.data.shopId] = [];
  64. this.setData({
  65. cartList: cartList
  66. })
  67. }
  68. console.log(this.data.localList, this.data.cartList)
  69. },
  70. /**
  71. * 生命周期函数--监听页面初次渲染完成
  72. */
  73. onReady: function () {
  74. },
  75. /**
  76. * 生命周期函数--监听页面显示
  77. */
  78. onShow: function () {
  79. },
  80. /**
  81. * 生命周期函数--监听页面隐藏
  82. */
  83. onHide: function () {
  84. },
  85. /**
  86. * 生命周期函数--监听页面卸载
  87. */
  88. onUnload: function () {
  89. },
  90. /**
  91. * 页面相关事件处理函数--监听用户下拉动作
  92. */
  93. onPullDownRefresh: function () {
  94. },
  95. /**
  96. * 页面上拉触底事件的处理函数
  97. */
  98. onReachBottom: function () {
  99. },
  100. /**
  101. * 用户点击右上角分享
  102. */
  103. onShareAppMessage: function () {
  104. },
  105. /**
  106. * 商品展示滚动
  107. */
  108. onGoodsScroll:function(e){
  109. var that = this;
  110. var scare = e.detail.scrollWidth / 250,
  111. scrollTop = e.detail.scrollTop,
  112. h = 0,
  113. selectOrder,
  114. len = this.data.shop.menu.length;
  115. this.data.shop.menu.forEach(function(classify,i){
  116. var _h = 37.5 + 94 * classify.menu.length;
  117. //console.log("srcollTop:" + scrollTop);
  118. //console.log(h - 100 / scare);
  119. if (scrollTop + 500 >= h ){
  120. selectOrder = classify.id;
  121. }
  122. h += _h;
  123. });
  124. this.setData({
  125. selectOrder: selectOrder
  126. });
  127. },
  128. /*
  129. 增加商品
  130. */
  131. addGoods:function(e){
  132. var that = this;
  133. if (!this.data.isFreshing && that.data.count < that.data.sum){
  134. this.setData({
  135. loding: true,
  136. isFreshing:true
  137. });
  138. setTimeout(this.timeOut, 2000);
  139. }
  140. },
  141. //定时增加
  142. timeOut:function(){
  143. var that = this;
  144. {
  145. var menu = that.data.menu;
  146. menu.push(that.data.shop.menu[that.data.count]);
  147. //console.log(that.data.count);
  148. that.setData({
  149. menu: menu,
  150. count: that.data.count + 1,
  151. loding:false,
  152. isFreshing:false
  153. });
  154. //console.log("jinrulimiandeshuju");
  155. }
  156. },
  157. showCartDetailf:function(){
  158. this.setData({
  159. showCartDetail : !this.data.showCartDetail
  160. });
  161. console.log(this.data.showCartDetail);
  162. },
  163. hiddenCartDetailf:function(){
  164. this.setData({
  165. showCartDetail : false
  166. });
  167. console.log(this.data.showCartDetail);
  168. },
  169. //检查下标
  170. checkOrderSame: function (name) {
  171. var list = this.data.cartList[this.data.shopId];
  172. for (var index in list) {
  173. if (list[index].name === name) {
  174. return index;
  175. }
  176. }
  177. return false;
  178. },
  179. //将饭菜加入购物车
  180. tapAddCart:function(e){
  181. var price = parseFloat(e.target.dataset.price);
  182. var name = e.target.dataset.name;
  183. var img = e.target.dataset.pic;
  184. var list = this.data.cartList;
  185. var sortedList = [];
  186. var index;
  187. if (index = this.checkOrderSame(name)){
  188. sortedList = list[this.data.shopId][index];
  189. var num = list[this.data.shopId][index].num;
  190. list[this.data.shopId][index].num = num + 1;
  191. list[this.data.shopId][index].pay = (num+1)*sortedList.price;
  192. }else{
  193. //console.log(this.data.cartList);
  194. //console.log(list);
  195. //console.log(this.data.shopId);
  196. var order={
  197. 'price' : price,
  198. 'name' : name,
  199. "num": 1,
  200. 'img' : img,
  201. 'shopId': this.data.shopId,
  202. 'shopName': this.data.shop.restaurant_name,
  203. 'pay': price,
  204. };
  205. list[this.data.shopId].push(order);
  206. sortedList = order;
  207. }
  208. this.setData({
  209. cartList : list,
  210. localList : server.filterEmptyObject(list)
  211. });
  212. this.addCount(sortedList);
  213. console.log(this.data.localList);
  214. },
  215. //删除购物车上的饭菜
  216. tapReduceCart:function(e){
  217. var name = e.target.dataset.name;
  218. var price = e.target.dataset.price;
  219. var list = this.data.cartList;
  220. var index,sortedList = [];
  221. if(index = this.checkOrderSame(name)){
  222. var num = list[this.data.shopId][index].num;
  223. if(num>1){
  224. sortedList = list[this.data.shopId][index];
  225. list[this.data.shopId][index].num = num - 1;
  226. }else{
  227. sortedList = list[this.data.shopId][index];
  228. list[this.data.shopId].splice(index,1);
  229. }
  230. }
  231. this.setData({
  232. cartList : list,
  233. localList : server.filterEmptyObject(list)
  234. });
  235. this.deduceCount(list);
  236. },
  237. //增加数量
  238. addCount: function (list) {
  239. var count = this.data.cart.count + 1,
  240. total = this.data.cart.total + list.price;
  241. total = Math.round(parseFloat(total));
  242. this.saveCart(count, total);
  243. },
  244. //减少数量
  245. deduceCount: function (list) {
  246. var count = this.data.cart.count - 1,
  247. total = this.data.cart.total - list.price;
  248. total = Math.round(parseFloat(total));
  249. this.saveCart(count, total);
  250. },
  251. //保存购物车的东西
  252. saveCart: function (count, total) {
  253. console.log(typeof total, total);
  254. if (isNaN(total))
  255. total = 0;
  256. console.log(typeof total,total);
  257. total = Math.round(parseFloat(total));
  258. this.setData({
  259. cart: {
  260. count: count,
  261. total: total
  262. }
  263. });
  264. wx.setStorage({
  265. key: 'orderList',
  266. data: {
  267. cartList: this.data.cartList,
  268. count: this.data.cart.count,
  269. total: this.data.cart.total
  270. }
  271. });
  272. },
  273. submit: function (e) {
  274. var total = this.data.cart.total
  275. wx.navigateTo({
  276. url: '/pages/order/order?pay=1&total=' + total
  277. })
  278. }
  279. })




功能上还是比较少,所以等到有时间再补吧


声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/232788
推荐阅读
相关标签
  

闽ICP备14008679号