微信点餐小程序设计与实现（一）_微信小程序点餐系统美食屋

本文所做的主要工作内容是微信小程序点餐程序的设计与实现。前端是基于微信小程序实现，小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，无需安装卸载。
这篇博客介绍微信点餐小程序菜单界面的布局、逻辑处理、数据处理。
点餐小程序菜单界面的布局代码如下

<view class="container">  
    <view wx:for="{
   {menus}}" wx:key="id" class="section">
      <view class="flex-wrp" style="flex-direction:row;">
      <image style="width: 500rpx; height: 200rpx; background-color: #eeeeee;" mode="aspectFill" src="{
   {item.image}}" bindtap="preview" data-imgsrc="{
   {item.image}}" >
      </image>
        <view class="flex-item">
         <text>{
   {
   item.name}}</text>\n
          <text class="flex-desc">{
   {
   item.description}}</text>\n
          <text class="red">¥ {
   {
   item.price}}</text>
          
        </view>   
              
      </view>
      <button type='primary' bindtap="onbuy" data-id="{
   {item.id}}">购买</button>  
    </view><!--section-->
</view><!--container-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

逻辑处理代码部分

var common = require('../../utils/common.js')
var app = getApp();
Page({
   
  data: {
   
    menus: null
  },
  onLoad: function (options) {
   
    // 页面初始化 options为页面跳转所带来的参数
    var that = this
    wx.request({
   
      url: common.baseUrl + 'index.php/api/menu/get_menus',
      header: {
   
        'content-type': 'application/json'
      },
      success: function (res) {
   
        that.setData({
   
          menus: res.data
        })
      }
    });
  },
  preview: function (e) {
   
    var imgsrc = e.target.dataset.imgsrc;
    wx.previewImage({
   
      current: imgsrc, // 当前显示图片的http链接
      urls: [imgsrc] // 需要预览的图片http链接列表
    })
  },
  onShareAppMessage: function () {
   
    return {
   
      title: '我在微餐厅点菜，快来啊',
      path: '/pages/menu/index'
    }
  },

  onbuy: function (e) {
   
    var id = e.target.dataset.id;
    wx.request({
   
      url: common.baseUrl + 'index.php/api/Shopping/add',
      method: 'get',
      data: {
   
        uid: app.d.userId,
        id:id
      },
      header: {
   
        'content-type': 'application/json'
      },
      success: function (res) {
   
        if (res.data.status == 1){
   
          wx.showToast({
   
            title: '添加成功',
            duration: 2000
          });
        }else{
   
          wx.showToast({
   
            title: res.data.err,
            duration: 2000
          });
        }

        
      },
      fail: function (e) {
   
        wx.showToast({
   
          title: e.data.err,
          duration: 2000
        });
      }
    });
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

后端数据处理代码如下

<?php
// 本类由系统自动生成，仅供测试用途
namespace Api\Controller;
use Think\Controller;
class ShoppingController extends Controller {
   

	//***************************
	//  会员获取购物车列表接口
	//***************************
	public function index(){
   
        $shopping=M("shopping_char");
        $product=M("menu");
		$user_id = intval($_REQUEST['user_id']);
		if (!$user_id
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15