微信小程序制作简单的商品列表页，实现价格求和_微信小程序 制作产品清单

微信小程序制作简单的商品列表页，实现价格求和

准备工作
1、node.js
2、微信开发者工具
目录结构

客户端代码实现

• index.wxml

<view class="contain">
  <form bindsubmit="submit">
  <view>
    <text id="top">商品</text>
    <checkbox-group name="skills">
      <label wx:for="{{skill}}" wx:key="value">
        <checkbox value="{{item.value}}" checked="{{item.checked}}">
          <!-- {{item.name}} -->
       <image id="img" src="../image/{{item.name}}.jpg"></image>
        <view><text>{{item.text}}</text></view>
        </checkbox>
      </label>
     
    </checkbox-group>
  </view>
  <button form-type="submit">提交</button>
  <text id="sum">合计:{{result}}</text>
  </form>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

• index.wxss

/* pages/index/index.wxss */
.contain{
  margin: 15px auto;
}
#top{
  /* margin:0 auto; */
  margin-left: 20px;
}
#img{
  /* float: left; */
  width: 120px;
  height: 120px;
}

label{
  height: 150px;
  position: relative;
  display: block;
  margin-left: 20px;

}
label view{
  position: absolute;
  display: inline;
  padding-right: 20px;
  padding-top: 50px;
}
#sum{
  margin-left: 20px;
}

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

• index.js

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    skill: [
      {name:'01',value:600,checked:false,text:'宇智波佐助\n价格: 600.00'},
      {name:'02',value:300,checked:false,text:'宇智波鼬\n价格: 300.00'},
      {name:'03',value:500,checked:false,text:'旗木卡卡西\n价格: 500.00'},
      {name:'04',value:700,checked:false,text:'路飞、红发香克斯\n价格: 700.00'},
      {name:'07',value:350,checked:true,text:'索隆\n价格: 350.00'},
      {name:'08',value:799,checked:true,text:'路飞\n价格: 799.00'},
    ],
    result:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  submit:function(e){
    var that=this
    wx.request({
      method:'POST',
      url: 'http://127.0.0.1:3000',
      data:e.detail.value,
      success:function (res){
        const a=res.data.skills
        // console.log(a)
        //求和计算
        const reducer=(accumlator,currentValue)=>parseInt(accumlator)+parseInt(currentValue)
        
        console.log(a.reduce(reducer))
        const sum=a.reduce(reducer)
        that.setData({result:sum})
        
      }
    })
  },


})
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
94
95

• index.json

{
  "navigationBarBackgroundColor":"#fff",
  "navigationBarTitleText":"商品列表",
  "navigationBarTextStyle":"black",
  "usingComponents": {}
}
1
2
3
4
5
6

服务器端代码实现

• server.js

const express=require('express')
const bodyParser =require('body-parser')
const app=express()
app.use(bodyParser.json())
//处理post请求
app.post('/',(req,res) => {
  console.log(req.body)
  res.json(req.body)
})
app.listen(3000,()=>{
  console.log('server running at http://127.0.0.1:3000')
})
1
2
3
4
5
6
7
8
9
10
11
12

效果展示