小程序实现扫描二维码带着参数跳转到另外一个页面,实现对mysql数据库访问,并通过表格形式实现
使用场景:扫描公司内部公用车上的二维码,获取到vin号,同时链接到服务器上数据库,显示这辆车的使用人,使用时间,用途,同时可以实现对数据库的添加(备注:如果这辆车之前就存在在数据库中,则显示相关使用者的信息,如果是第一次扫描二维码,将自动将数据录入到数据库中),目前只实现了扫描二维码并且带着参数跳转页面,同时链接到数据库,显示信息,添加功能还没有实现。
效果预览如下:首页
点击按钮之后随便选择一张图片:
vin号后面就是二维码自身携带的信息,显示的是我在服务器服务器上自己建的数据库,添加按钮本来要实现的就是点击一下,可以实现添加一行数据,目前我现在还没有实现。
其他参数代码如下:
我总共有两个页面:
bind页面:
js代码:
const app = getApp()
Page({
data: {
result: ‘’
},
onLoad: function () {
},
getScancode: function () {
var _this = this;
// 允许从相机和相册扫码
wx.scanCode({
success: (res) => {
wx.navigateTo({
url: ‘…/bind/bind?title=’ + res.result
})
var result = res.result;
_this.setData({
result: result,
})
}
})
}
})
wxml代码:
扫描车身二维码
wxss代码:
.Scancode {
font-size: 39rpx;
background: #aaa;
position: fixed;
bottom: 1000rpx;
display: flex;
width: 90%;
justify-content: center;
color: #fff;
border-radius:59rpx;
margin-left:30rpx;
margin-right: 30rpx;
z-index:999;
}
index页面
js代码:
Page({
data: {
focus: false,
inputValue: ‘’,
items: []
},
onLoad: function (options) {
// 生命周期函数–监听页面加载
var that = this;
wx.request({
url: ‘你自己的网址’,
header: {
‘content-type’: ‘application/xml’ // 默认值
},
success(res) {
console.log(res.data);
that.setData({
list: res.data
})
},
})
this.setData({
title: options.title
})
}
})
wxml代码:
使用人
日期
用途
{{item.name}}
{{item.time}}
{{item.object}}
{{item.name}}
{{item.time}}
{{item.object}}
wxss代码:
.search{
display: flex;
flex-direction: row;
}
.yangshi {
float: left;
font-size: 26rpx;
}
.vin {
margin-top: 7rpx;
font-size: 26rpx;
}
.add{
margin-left: 250rpx;
float: right;
margin-top: 7rpx;
font-size: 26rpx;
}
.table {
border: 0px solid darkgray;
font-size: 12px;
height: 100rpx;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 2rem;
align-items: center;
}
.td {
width:40%;
justify-content: center;
text-align: center;
}
.bg-w{
background: snow;
}
.th {
width: 40%;
justify-content: center;
background: rgb(94, 99, 112);
color: #fff;
display: flex;
height: 2rem;
align-items: center;
}
app.json代码:
{
“pages”: [
“pages/index/index”,
“pages/bind/bind”
],
“window”: {
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#fff”,
“navigationBarTitleText”: “车联网”,
“navigationBarTextStyle”: “black”
}
}
服务器需要自己弄好,并且要用php配好,
php代码如下:
等添加按钮实现之后我再来更新。