本文给大家带来的是微信小程序简单的扫码扫一扫页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<import src="../../common/head.wxml" />
<import src="../../common/foot.wxml" />
<view class="container">
<template is="head" data="{{title: 'scanCode'}}"/>
<view class="page-body">
<view class="weui-cells__title">扫码结果</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell">
<view class="weui-cell__bd">{{result}}</view>
</view>
</view>
<view class="btn-area">
<button type="primary" bindtap="scanCode">扫一扫</button>
</view>
</view>
<template is="foot" />
</view>
|
二、wxss样式文件代码如下:
@import "../../common/lib/weui.wxss";
.weui-cell__bd{
min-height: 48rpx;
word-break: break-all;
}
|
三、js页面代码如下:
Page({
data: {
result: ''
},
scanCode: function () {
var that = this
wx.scanCode({
success: function (res) {
that.setData({
result: res.result
})
},
fail: function (res) {
}
})
}
})
|