Article From:https://www.cnblogs.com/wangchengb/p/9065237.html

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({

  /**
   * The initial data of a page* * /Data: {ImageArray: {Mode:'aspectFit', / / keep the aspect ratio zoom the picture, so that the long edges of the picture can be completely displayed.Url1:'/images/ewmkq.png', / / String needs quotation marks.Url2:'/images/klkq.png',Title1: 'scavenging attendance',Title2: 'password attendance'},Show: ""},/ * * * * ** life cycle function -- monitor page loading* * /OnLoad: function (oPtions) {},ClickSaoma: function () {Var that = this;/ / the client scan interface is reset, and the corresponding result is returned after the scan code is successful.Wx.scanCode ({OnlyFromCamera: true,Success: (RES) => {This.show = "result:" +Res.result + "two-dimensional code type: + + res.scanType +" character set: + + res.charSet + "path: + res.path";/ / variable set value can be returned to the pageNoodles/ / that.setData ({/ / show: this.show/ /}),/ / display message prompt boxWx.showToast ({Title: 'success',Icon:'success',Duration: 2000}),/ / send a request back to the backgroundWx.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: 'failed',Icon:'success',Duration: 2000})},Complete: (RES) => {}});},/ * * * * ** life cycle function -- monitor page for initial rendering.* * /OnReady: FuNction () {},/ * * * * ** life cycle function -- monitor page display* * /OnShow: function () {},/ * * * * **Life cycle function -- monitor page hiding* * /OnHide: function () {},/ * * * * ** lifecycle function -- the uninstall of the listener page* * /OnUnload:Function () {},/ * * * * ** page related event handling function -- monitor user pull down actions.* * /OnPullDownRefresh: function () {},/ * * * * ** the processing function of the bottom event on the page* * /OnReachBottom: function () {},/ * * * * ** the user clicks on the right topCorner sharing* * /OnShareAppMessage: function () {}})

 

 

3、I wrote short struts in the background, or spring or servrlt.

 

4、Test effect diagram:

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *