下单页面底部菜单
本节主要介绍下单页面的底部菜单界面如何实现。效果如图14-5所示。
1.布局分析
结构布局分析示意如图14-6所示。
根据上面的布局分析，我们会产生基础的框架，代码示例如下：
<view ><!--第1层-开始 -->没<view>金额</view><view>下单支付</view></view><!--第1层-结束 -->
根据效果图分析出框架的层级后，在每个层级的view加上样式，编码实现即可。
2.功能实现
.wxml文件代码示例如下：
<view class="footer"><view class="howMuch" style='width:50%'><view class="cost">金额：￥253.00</view></view><view class="pay" style='width:50%' bindtap='zhifu' >下单支付</view></view>
.wxss文件样式代码示例如下：
/*底部菜单*/.footer{display: flex;position: absolute;right: 0;left: 0;bottom:0;height: 100rpx;}.howMuch{position: relative;flex: 1;font-size: 28rpx;background: #ECECEC; line-height: 100rpx;padding-left: 10rpx;}.cost{margin-top: 20rpx;color: red;font-size: 40rpx; font-weight: bold;line-height: 50rpx;height: 50rpx;margin-left: 50rpx;}.pay{width: 200rpx;text-align: center;line-height: 100rpx;color: white;font-size: 30rpx;background: #CCCCCC;background: crimson ;color: white;}
小程序商城配备了javaweb、php、asp、net几个版本的后台、其他版本陆续制作中
【微信小程序参考资料】
（1）微信小程序学习路线 /
（2）Java微信小程序商城系统指导 /course/3066521
（3）PHP微信小程序商城系统指导 /course/3066518
（4）微信官方文档 https://developers./miniprogram/dev/framework/
18-微信小程序商城 下单页面底部菜单（微信小程序商城开发 小程序毕业设计 小程序源代码）（黄菊华-微信小程序开发教程）
