这个美团外卖的小程序我是从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来获取位置数据
wx.getLocation({
type: "wgs84",
success: function (res) {
var lat = res.latitude;//纬度
var lng = res.longitude;//经度
console.log("lat:" + lat);
console.log("lng:" + lng);
that.getCity(lat, lng);//调用自己写的函数获得城市信息
},
})
获取到数据之后就要利用百度的api来将具体的经纬度转为位置的信息了。所以这里的话可以自己封装一个函数来使用,这里就是上面代码所用到的getCity函数。