作者 刘晓艳

打印首页

//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
\ No newline at end of file
... ...
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "快印帮",
"navigationBarTextStyle":"black"
}
}
... ...
/**app.wxss**/
@font-face {
font-family: 'iconfont'; /* project id 1056878 */
src: url('//at.alicdn.com/t/font_1056878_ji4zh6otyns.eot');
src: url('//at.alicdn.com/t/font_1056878_ji4zh6otyns.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1056878_ji4zh6otyns.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1056878_ji4zh6otyns.woff') format('woff'),
url('//at.alicdn.com/t/font_1056878_ji4zh6otyns.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1056878_ji4zh6otyns.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-xuanze:before {
content: "\e621";
}
.icon-lanmangouwuche:before {
content: "\e60a";
}
.icon-shangsanjiao:before {
content: "\e66e";
}
.icon-xuanze1:before {
content: "\e623";
}
.icon-erji:before {
content: "\e65a";
}
.icon-erji1:before {
content: "\e608";
}
.icon-sousuo:before {
content: "\e60d";
}
.icon-fenxiang:before {
content: "\e61a";
}
.icon-kefu:before {
content: "\e674";
}
.icon-xuanze2:before {
content: "\e600";
}
.icon-bianji:before {
content: "\e60e";
}
.icon-laba:before {
content: "\e645";
}
.icon-xuanze3:before {
content: "\e605";
}
.icon-xiala:before {
content: "\e61f";
}
.icon-shanchu:before {
content: "\e604";
}
.icon-ditu:before {
content: "\e656";
}
.icon-xiayibu:before {
content: "\e64a";
}
.icon-xiala1:before {
content: "\e624";
}
.icon-erji2:before {
content: "\e601";
}
.icon-gouwuche:before {
content: "\e677";
}
.icon-shanchu1:before {
content: "\e602";
}
... ...
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
classify: [{
img: '/images/icon_03@2x.png',
text: '111'
}, {
img: '/images/icon_03@2x.png',
text: '22'
}],
imgsUrl: ['/images/icon_11@2x.png', '/images/icon_11@2x.png'],
current_page:0
},
swiperCharge(e){
this.setData({
current_page: e.detail.current
})
},
onLoad: function() {
},
})
\ No newline at end of file
... ...
{
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--index.wxml-->
<view class='top_box'>
<view class='search_box'>
<view class='iconfont icon-sousuo'></view>
<view>搜索</view>
</view>
<view class='banner_box'>
<view class='banner_label'>
<text class='iconfont icon-laba'></text>
<text>快印帮搞活动啦,广告印刷样样有!</text>
</view>
<view class='swiper_content'>
<swiper class='swiper_box' bindchange='swiperCharge'>
<block wx:for='{{imgsUrl}}' wx:key>
<swiper-item>
<image src='{{item}}'></image>
</swiper-item>
</block>
</swiper>
<view class='dot_box'>
<block wx:for='{{imgsUrl}}' wx:key>
<view class="dot_item {{current_page==index?'dot_active':''}}"></view>
</block>
</view>
</view>
<view class='classify_box'>
<view class='classify_item' wx:for='{{[1,2,3,4]}}' wx:key>
<image src='/images/icon_03@2x.png'></image>
<view>网上打印</view>
</view>
</view>
</view>
</view>
<view class='content_box'>
<view class='title'>热门推荐</view>
<view class='list_box'>
<view class='item_list' wx:for='{{[1,2,3,4]}}' wx:key>
<image src='/images/icon_08@2x.png'></image>
<view class='list_content'>彩色喷墨一体机...</view>
<view class='list_price'>¥ 85.00</view>
</view>
</view>
</view>
<view class='img_box'>
<image src='/images/icon_10@2x.png'></image>
</view>
\ No newline at end of file
... ...
/**index.wxss**/
page {
background: #f0f0f0;
}
.top_box {
background: #fff;
padding: 20rpx 30rpx;
}
.search_box {
width: 100%;
height: 59rpx;
background: rgba(255, 255, 255, 1);
border: 1rpx solid #a0a0a0;
border-radius: 12rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #000;
}
.icon-sousuo {
font-size: 32rpx;
color: #ff5922;
margin-right: 10rpx;
}
.banner_box {
margin-top: 16rpx;
position: relative;
}
.swiper_box {
width: 100%;
height: 320rpx;
position: relative;
}
.swiper_box image {
width: 100%;
height: 320rpx;
}
.banner_label {
width: 100%;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.6);
font-size: 28rpx;
color: #000;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.icon-laba {
font-size: 34rpx;
margin-right: 10rpx;
}
.swiper_content {
position: relative;
}
.dot_box {
position: absolute;
bottom: 15rpx;
left: 0;
display: flex;
align-items: center;
}
.dot_item {
width: 11rpx;
height: 11rpx;
border: 1rpx solid rgba(255, 255, 255, 0.6);
border-radius: 50%;
margin-left: 20rpx;
}
.dot_active {
width: 11rpx;
height: 11rpx;
background: rgba(255, 255, 255, 1);
border-radius: 50%;
}
.classify_box {
display: flex;
align-items: center;
justify-content: space-around;
margin: 40rpx 0 20rpx 0;
}
.classify_item {
font-size: 26rpx;
text-align: center;
}
.classify_item image {
width: 60rpx;
height: 60rpx;
}
.content_box {
background: #fff;
padding: 30rpx;
margin-top: 16rpx;
}
.title {
font-size: 30rpx;
font-weight: bold;
color: #000;
text-align: center;
}
.list_box {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.item_list {
width: 30%;
margin-bottom: 20rpx;
}
.item_list image {
width: 205rpx;
height: 212rpx;
}
.list_content {
font-size: 24rpx;
color: #000;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.list_price {
font-size: 24rpx;
font-weight: bold;
color: #ff5922;
}
.img_box{
position: fixed;
top: 50%;
left: 45rpx;
transform: translateY(-50%);
}
.img_box image{
width: 94rpx;
height: 114rpx;
}
\ No newline at end of file
... ...
//logs.js
const util = require('../../utils/util.js')
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(log => {
return util.formatTime(new Date(log))
})
})
}
})
... ...
{
"navigationBarTitleText": "查看启动日志",
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--logs.wxml-->
<view class="container log-list">
<block wx:for="{{logs}}" wx:for-item="log">
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view>
... ...
.log-list {
display: flex;
flex-direction: column;
padding: 40rpx;
}
.log-item {
margin: 10rpx;
}
... ...
{
"description": "项目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true,
"autoAudits": false
},
"compileType": "miniprogram",
"libVersion": "2.6.0",
"appid": "wxdf7ee45f1c64c486",
"projectname": "dayin",
"debugOptions": {
"hidedInDevtools": []
},
"isGameTourist": false,
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}
\ No newline at end of file
... ...
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime
}
... ...