小程序之二維碼掃描，並傳值到后台

1、wxml

<view class='section'>
    <view class="flex-wrp" style="flex-direction:row;">

      <view class="flex-item bcg_1" bindtap="clickSaoma">
        <view class='flex-item_bk1 flex-item_bk'>
          <image class='flex-item_img' mode="{{imageArray.mode}}" src="{{imageArray.url1}}"></image>
        </view>
        <text class='flex-item_title ziti'>{{imageArray.title1}}</text>
      </view>

      <view class="flex-item bcg_2">
        <view class='flex-item_bk2 flex-item_bk'>
          <image class='flex-item_img' mode="{{imageArray.mode}}" src="{{imageArray.url2}}"></image>
        </view>  
        <text class='flex-item_title ziti'>{{imageArray.title2}}</text>
      </view>

    </view>
    <view>{{show}}</view>
</view>

 

 

2、js

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    imageArray: {
        mode: 'aspectFit',//保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來
        url1: '/images/ewmkq.png', //字符串需要使用引號
        url2: '/images/klkq.png',
        title1: '掃碼考勤',
        title2: '口令考勤'
    },
    show:""
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
   
  },
  clickSaoma: function() {
    var that = this;

    // 調起客戶端掃碼界面，掃碼成功后返回對應的結果
    wx.scanCode({
      onlyFromCamera: true,
      success: (res) => {
        this.show = "結果:" + res.result + "二維碼類型:" + res.scanType + "字符集:" + res.charSet + "路徑:" + res.path;

        //變量設值可傳回頁面
        // that.setData({
        //   show: this.show
        // }),

        // 顯示消息提示框
        wx.showToast({
          title: '成功',
          icon: 'success',
          duration: 2000
        }),

        //向后台發送請求
        wx.request({
          url: 'http://cu6xda.natappfree.cc/wxcs/ewmData',
          method: 'POST',
          header: { 'content-type': 'application/x-www-form-urlencoded' },
          data: {
            msg: this.show
          },
          success: function (res) {
            wx.showToast({
              title: res,
              icon: 'success',
              duration: 2000
            })
          }
        })
      },
      fail: (res) => {
        wx.showToast({
          title: '失敗',
          icon: 'success',
          duration: 2000
        })
      },
      complete: (res) => {
      }
    });
  },
  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {
    
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
    
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

 

 

3、我后台簡短的寫了各struts，也可以用spring或者servrlt都是可以獲取到數據的

 

4、測試效果圖：