Skip with parameters in small program code scanning

Posted by mwichmann4 on Wed, 20 Nov 2019 21:15:21 +0100

The QR code to be scanned is generated by the grass QR code. This website is very good and easy to use. You can directly input the text to generate the QR code or put the link to generate the QR code.

Forage QR Code: https://cli.im/

index.wxml

<view class="container">
  <button bindtap='getScancode'>Binding vehicle</button>
</view>

index.js

//index.js
//Get application instance
const app = getApp()

Page({
  data: {
    result: ''

  },

  onLoad: function() {

  },

  getScancode: function() {
    var _this = this;
    // Allow scanning from camera and album
    wx.scanCode({
      success: (res) => {
        wx.navigateTo({
          url: '../navigator/navigator?title=' + res.result

        })
        var result = res.result;

        _this.setData({
          result: result,

        })
      }
    })

  }

})

navigator.wxml

<view> {{title}} </view>

navigator.js

Page({
  data: {},
  onLoad: function (options) {
    // Life cycle function -- listening to page loading
    this.setData({
      title: options.title
     
    })
  }
})

Simple effect: no css related code is written, mainly to realize this process

More detailed demo: (implemented in the project)

index.wxml

<! -- button at the bottom -- >
< button class ='scancode 'bindtap ='getscancode' > bind vehicle < / button >

index.wxss

/* Bottom button */
.Scancode {
  font-size: 39rpx;
  background: #010101;
  position: fixed;
  bottom: 35rpx;
  display: flex;
  width: 90%;
  justify-content: center;
  
  color: #fff;
  border-radius:10rpx;
  margin-left:30rpx;
  margin-right: 30rpx;
  z-index:999;
}

index.js

//index.js
//Get application instance
const app = getApp()

Page({
  data: {
    result: ''
  },

  onLoad: function() {

  },

  getScancode: function() {
    var _this = this;
    // Allow scanning from camera and album
    wx.scanCode({
      success: (res) => {
        wx.navigateTo({
          url: '../bind/bind?title=' + res.result

        })
        var result = res.result;

        _this.setData({
          result: result,

        })
      }
    })

  }

})

To jump to bind

bind.wxml

<view class='page_row'>
  <view class="search">

    <input class='carid' placeholder=" {{title}}" focus="{{focus}}" />
    <input class='carnumber' placeholder="Please enter the license plate number and driver's license number" focus="{{focus}}" />

    <button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="primary"> binding</button>

  </view>
  <view class='tip'>
    //After the positioning label is bound with the vehicle, you can see and track the vehicle position
  </view>
</view>
    

bind.wxss

.search input {
  height: 100rpx;
  border-radius: 5px;
  border: 1px solid #d0d0d0;
  margin: 100rpx 30rpx;
  padding: 0 15rpx;
}

.search button {
  border-radius: 5px;
  border: 1px solid #d0d0d0;
  margin: 100rpx 30rpx;
}

.tip {
  text-align: center;
  font-size: 34rpx;
}

/* Search list name */

.list_name {
  position: relative;
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  border-bottom: 1rpx solid #ddd;
}

/* List name */

.lab_name {
  position: absolute;
  left: 30rpx;
}

bind.js

Page({
  data: {
    focus: false,
    inputValue: ''
  },
  onLoad: function(options) {
    // Life cycle function -- listening to page loading
    this.setData({
      title: options.title

    })
  }
})

QR code to scan

 

 

Effect

 

Other QR code tools; A beautiful QR code tool website for online generation of literature and art

The demo written by hand is placed on github. If you need it, you can click the link to download it.
github address: https://github.com/wangxiaoting666/bind

Original author: miss qiche Technology blog: https://www.jianshu.com/u/05f416aefbe1
Post-90s front-end sister, love programming, love operation, love tossing. For a long time, we must summarize the technical problems encountered in our work.

Topics: github Programming