本文给大家带来的是微信小程序产品识别码查询结果页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/index/verificationDetail.wxml-->
<view class="container">
<view class="Codeinfo">
<view class=" font-size-18 font-color-c24e4e margin-bottom-40">查询结果</view>
<view class="font-color-999 margin-bottom-40">查询识别码：<text class="font-color-c24e4e">{{info.code}}</text>
</view>
<view class="line"></view>
<view class="margin-bottom-40 margin-top-50">产品名称：<text class="font-color-hei">{{info.name}}</text></view>
<view class="margin-bottom-40">产品规格：<text class="font-color-hei">{{info.norm}}</text></view>
<view class="margin-bottom-40">生产厂家：<text class="font-color-hei">{{info.factory}}</text></view>
<view class="margin-bottom-40">生产批次：<text class="font-color-hei">{{info.batch}}</text></view>
<view>质量体系：<text class="font-color-hei" >{{info.system}}</text></view>
</view>
</view>
|
二、wxss样式文件代码如下：
/* pages/index/verificationDetail.wxss */
.Codeinfo{
background-color: #fff;
margin-top:20rpx;
padding: 40rpx;
color: #999999;
}
.line{
width: 670rpx;
height: 2rpx;
background-color: #dcdcdc;
}
.margin-bottom-40{
margin-bottom: 40rpx;
}
.margin-top-50{
margin-top:50rpx;
}
|
三、js页面代码如下：
// pages/index/verificationDetail.js
Page({
data:{
info:{
code:null,
name:'永泰老酒1953',
norm:'500ml/瓶',
factory:'仁怀市茅台镇永泰酒业有限公司',
batch:'2015-06 A108',
system:'ISO-9002-2000'
}
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
this.setData({
'info.code':options.code
})
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
|
.jpg)
.jpg)
