使用场景：扫描公司内部公用车上的二维码，获取到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代码如下：
<?php //$name=$_GET[“name”];//接收参数 $hostname_conn = "自己的数据库的ip地址"; $database_conn = "自己的数据库名";//自己建数据库名 $username_conn = "root"; $password_conn = "数据库的密码"; //连接MYSQL数据库 $conn = mysqli_connect($hostname_conn, $username_conn, $password_conn,$database_conn)or trigger_error(mysqli_error(),E_USER_ERROR); if(!$conn){ echo '连接不成功！'; } $sql = "SELECT * FROM vin"; mysqli_query($conn, "set names 'utf8'"); $result = mysqli_query($conn, $sql); class Vin{ public $id; public $name; public $time; public $vin; public $object; } $data = array(); if (mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_assoc($result)) { $vin=new Vin(); $vin->id=$row['id']; $vin->name=$row['name']; $vin->time=$row['time']; $vin->vin=$row['vin']; $vin->object=$row['object']; $data[] = $vin; } echo json_encode($data,JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);//将请求结果转换为json格式 } ?>
等添加按钮实现之后我再来更新。
小程序实现扫描二维码带着参数跳转到另外一个页面 实现对mysql数据库访问 并通过表格形式实现
