//concat()把两个或者多个数组链接在一起,但是不改变已经存在的数组
//而是返回一个链接之后的新数组
var a = [1,2,3];
a.concat([4,5]);
console.log(a);
//此处输出为 [1, 2, 3]
var a = [1,2,3];
a = a.concat([4,5]);
console.log(a);
//此处输出为 [1, 2, 3 ,4 ,5]
JS 根据数组 key 删除元素
var colors = ["red", "blue", "grey"];
var item = colors.splice(0, 1);
console.log(item); //"red"
console.log(colors); //["blue", "grey"]
Web 生成图片 html2canvas 示例
http://blog.liuguofeng.com/wp-content/uploads/2018/09/html2canvas.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Using an existing canvas to draw on</title>
<style>
button {
clear: both;
display: block;
}
</style>
</head>
<body>
<div><h1>这是HTML</h1>
<div id="content" style="width:200px;height:200px;background: rgba(100, 255, 255, 0.5);">
<img src='timg.jpg' style="width:100px;height:60px;">
<span>这是文字</span>
</div>
</div>
<h1>生成的图片</h1>
<canvas width="200" height="200"></canvas>
<script type="text/javascript" src="html2canvas.js"></script>
<button>点击生成图片</button>
<script type="text/javascript">
var canvas = document.querySelector("canvas");
document.querySelector("button").addEventListener("click", function() {
html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function(canvas) {
console.log('Drew on the existing canvas');
});
}, false);
</script>
</body>
</html>
微信小程序 日历

JS
const app = getApp()
const util = require('../../utils/util.js')
const date = require('../../utils/date.js')
Page({
data: {
year: 0,
month: 0,
date: ['日', '一', '二', '三', '四', '五', '六'],
dateArr: [],
isToday: 0,
isTodayWeek: false,
todayIndex: 0,
isClick:null
},
onLoad: function () {
var now = new Date()
console.log(now)
if (now.length>0){
var year = now.getFullYear();
var month = now.getMonth() + 1;
console.log('有 now')
} else {
var thedate = date.theDate()
var year = date.getFullYear(thedate)
var month = date.getMonth(thedate)
console.log('没有 now')
}
this.start(year, month)
this.isToday()
console.log('onLoad done')
},
isToday:function(){
let now = new Date();
var theDay = '' + now.getFullYear() + util.formatNumber(now.getMonth() + 1) + util.formatNumber(now.getDate())
this.setData({
isToday: theDay,
isClick: theDay
})
},
start: function (year, month){
month = Number(month)
this.dateInit(year, month-1);
this.setData({
year: year,
month: month,
})
},
dateInit: function (setYear, setMonth) {
//全部时间的月份都是按0~11基准,显示月份才+1
let dateArr = []; //需要遍历的日历数组数据
let arrLen = 0; //dateArr的数组长度
let now = setYear ? new Date(setYear, setMonth) : new Date();
let year = setYear || now.getFullYear();
let nextYear = 0;
let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数
let nextMonth = (month + 1) > 11 ? 1 : (month + 1);
let startWeek = new Date(year , (month + 1) ,1).getDay(); //目标月1号对应的星期
let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天
let obj = {};
let num = 0;
if (month + 1 > 11) {
nextYear = year + 1;
dayNums = new Date(nextYear, nextMonth, 0).getDate();
}
arrLen = startWeek + dayNums;
console.log('startWeek')
console.log(startWeek)
for (let i = 0; i < arrLen; i++) {
if (i >= startWeek) {
num = i - startWeek + 1;
obj = {
isToday: '' + year + util.formatNumber(month + 1) + util.formatNumber(num),
dateNum: num,
weight: 6
}
} else {
obj = {};
}
console.log(obj)
dateArr[i] = obj;
}
console.log(dateArr)
this.setData({
dateArr: dateArr
})
let nowDate = new Date();
let nowYear = nowDate.getFullYear();
let nowMonth = nowDate.getMonth() + 1;
let nowWeek = nowDate.getDay();
let getYear = setYear || nowYear;
let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;
if (nowYear == getYear && nowMonth == getMonth) {
this.setData({
isTodayWeek: true,
todayIndex: nowWeek
})
} else {
this.setData({
isTodayWeek: false,
todayIndex: -1
})
}
},
lastMonth: function () {
//全部时间的月份都是按0~11基准,显示月份才+1
let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;
let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;
this.start(year, Number(month) + 1)
},
nextMonth: function () {
//全部时间的月份都是按0~11基准,显示月份才+1
let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
let month = this.data.month > 11 ? 0 : this.data.month;
this.start(year, Number(month) + 1)
},
dateClick:function(res){
console.log(res)
var clickDay = res.currentTarget.dataset.date
console.log(clickDay)
this.setData({
isClick:clickDay
})
}
})
WXML
<view class='wrap'>
<view>
<view class='date-show'>
<view class='lt-arrow' bindtap='lastMonth'>
<image src='/resource/cal/next.png' mode='aspectFit'></image>
</view>
{{year}}年{{month}}月
<view class='rt-arrow' bindtap='nextMonth'>
<image src='/resource/cal/next.png' mode='aspectFit'></image>
</view>
</view>
</view>
<view class='header'>
<view wx:for='{{date}}' wx:key='{{key}}' class='{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}}'>{{item}}
<view></view>
</view>
</view>
<view class='date-box'>
<view wx:for='{{dateArr}}' wx:key='{{key}}' class='{{isToday == item.isToday ? "nowDay" : ""}} {{isClick!=null && isClick == item.isToday ? "clickDay":""}}' data-date='{{item.isToday}}' bindtap='dateClick'>
<view class='date-head'>
<view>{{item.dateNum}}</view>
</view>
<view class='date-weight'>
<block wx:if="{{item.weight}}">
<view class='checkTwo'></view>
</block>
</view>
</view>
</view>
</view>
WXSS
.date-show{
position: relative;
width: 250rpx;
font-family: PingFang-SC-Regular;
font-size: 40rpx;
color: #282828;
text-align: center;
margin: 59rpx auto 10rpx;
}
.lt-arrow,.rt-arrow{
position: absolute;
top: 1rpx;
width: 60rpx;
height: 60rpx;
}
.lt-arrow image,.rt-arrow image{
width: 26rpx;
height: 26rpx;
}
.lt-arrow{
left: -110rpx;
transform: rotate(180deg);
}
.rt-arrow{
right: -100rpx;
}
.header{
font-size: 0;
padding: 0 24rpx;
}
.header>view{
display: inline-block;
width: 14.285%;
color: #333;
font-size: 30rpx;
text-align: center;
border-bottom: 1px solid #D0D0D0;
padding: 10rpx 0;
}
.weekMark{
position: relative;
}
.weekMark view{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 1px solid #22A7F6;
}
.date-box{
font-size: 0;
padding: 10rpx 0;
}
.date-box>view{
position: relative;
display: inline-block;
width: 14.285%;
color: #020202;
font-size: 40rpx;
text-align: center;
vertical-align: middle;
margin: 10rpx 0 0;
}
.date-head{
height: 60rpx;
line-height: 60rpx;
font-size: 26rpx;
}
.nowDay .date-head{
width: 60rpx;
border-radius: 50%;
text-align: center;
color: #fff;
background-color: #22A7F6;
opacity:0.5;
margin: 0 auto;
}
.clickDay .date-head{
width: 60rpx;
border-radius: 50%;
text-align: center;
color: #fff;
background-color: #22A7F6;
opacity:1;
margin: 0 auto;
}
.date-weight{
font-size: 22rpx;
padding: 15rpx 0 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.nowDay .date-weight{
color: #22A7F6;
}
.clickDay .date-weight{
color: #22A7F6;
}
.one{
position: absolute;
bottom: 0;
right: 5rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: red;
}
.two{
position: absolute;
bottom: 30rpx;
right: 5rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: blue;
}
.checkTwo{
width:10rpx;
height:10rpx;
border-radius:50%;
background-color: blue;
}
util.js
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,
formatNumber: formatNumber
}
date.js
const app = getApp()
const util = require('util.js')
const dateAdd = function (startDate, days) {
startDate = new Date(startDate);
startDate = +startDate + days * 1000 * 60 * 60 * 24;
startDate = new Date(startDate);
var nextStartDate = startDate.getFullYear() + "-" + util.formatNumber((startDate.getMonth() + 1)) + "-" + util.formatNumber(startDate.getDate());
return nextStartDate;
}
const theDate = function (num = 0){
var thisDate = new Date();
var myDate = new Date(thisDate.getTime() + 24 * 60 * 60 * 1000 * num)
var theDate = myDate.getFullYear() + '-' + util.formatNumber((myDate.getMonth() + 1)) + '-' + util.formatNumber(myDate.getDate())
return theDate
}
// 时间比较函数
const compareDate = function (startDate, endDate) {
var arrStart = startDate.split("-");
var startTime = new Date(arrStart[0], arrStart[1], arrStart[2]);
var startTimes = startTime.getTime();
var arrEnd = endDate.split("-");
var endTime = new Date(arrEnd[0], arrEnd[1], arrEnd[2]);
var endTimes = endTime.getTime();
if (endTimes <= startTimes) {
return false;
}
return true;
}
const getHour = function () {
var myDate = new Date();
var theHour = myDate.getHours()
return theHour
}
const getDays = function (date1, date2) {
var date1Str = date1.split("-");//将日期字符串分隔为数组,数组元素分别为年.月.日
//根据年 . 月 . 日的值创建Date对象
var date1Obj = new Date(date1Str[0], (date1Str[1] - 1), date1Str[2]);
var date2Str = date2.split("-");
var date2Obj = new Date(date2Str[0], (date2Str[1] - 1), date2Str[2]);
var t1 = date1Obj.getTime();
var t2 = date2Obj.getTime();
var dateTime = 1000 * 60 * 60 * 24; //每一天的毫秒数
var minusDays = Math.floor(((t2 - t1) / dateTime));//计算出两个日期的天数差
var days = Math.abs(minusDays);//取绝对值
return days;
}
const getWeek = function (theDate) {
var weekDay = ["周天", "周一", "周二", "周三", "周四", "周五", "周六"];
var weekName = weekDay[new Date(Date.parse(theDate)).getDay()]
return weekName
}
const getDate = function (theDate) {
var getDate = new Date(Date.parse(theDate)).getDate()
return util.formatNumber(getDate)
}
const getMonth = function (theDate) {
var getMonth = new Date(Date.parse(theDate)).getMonth() + 1
return util.formatNumber(getMonth)
}
const getFullYear = function (theDate) {
var getFullYear = new Date(Date.parse(theDate)).getFullYear()
return getFullYear
}
const diffDate = function (startDate, endDate) {
console.log('调用了 diffDate 函数' + startDate + endDate)
var startNewDate = new Date(startDate)
var endNewDate = new Date(endDate)
var startTime = startNewDate.getTime()
var endTime = endNewDate.getTime()
var diff = endTime - startTime
var days = diff / (24 * 60 * 60)
console.log(parseInt(days))
return parseInt(days)
}
module.exports = {
dateAdd: dateAdd,
theDate: theDate,
compareDate: compareDate,
getHour: getHour,
getWeek: getWeek,
getDate: getDate,
getMonth: getMonth,
getFullYear: getFullYear,
getDays:getDays,
diffDate: diffDate
}
微信小程序 iOS 无法识别 new Date()
调试时发现,微信小程序在 iOS 上 不支持 2018-09-05 12:00:00 或 2018,09,05 的 new Date()
改成 new Date(‘2018/09/05’)
或 new Date(2018,09,05)
微信小程序 利用 swiper 制作 tab 选项卡
WXML
<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">一</view>
<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">二</view>
<view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">三</view>
</view>
<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">
<swiper-item><view>这是第一屏内容</view></swiper-item>
<swiper-item><view>这是第二屏内容</view></swiper-item>
<swiper-item><view>这是第三屏内容</view></swiper-item>
</swiper>
JS
var app = getApp()
Page({
data: {
currentTab: 0
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
},
//滑动切换
swiperTab: function (e) {
var that = this;
that.setData({
currentTba: e.detail.current
});
},
//点击切换
clickTab: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
}
})
WXSS
.swiper-tab{
width: 100%;
border-bottom: 2rpx solid #ccc;
text-align: center;
height: 88rpx;
line-height: 88rpx;
font-weight: bold;
}
.swiper-tab-item{
display: inline-block;
width: 33.33%;
color:red;
}
.active{
color:aqua;
border-bottom: 4rpx solid red;
}
The Process class relies on proc_open, which is not available on your PHP installation.
安装 Swoft
composer create-project swoft/swoft swoft
出现如下报错
The Process class relies on proc_open, which is not available on your PHP installation.


在 php.ini 中,找到 disable_functions 选项,proc_open,同时该框架依赖 proc_get_status 也一同删掉

OK


升级 Swoole
pecl upgrade swoole
或重新编译安装

查看 Swoole 版本
[root@VM_0_2_centos ~]# php --ri swoole
PHP Warning: Module 'swoole' already loaded in Unknown on line 0
swoole
swoole support => enabled
Version => 4.1.1
Author => Swoole Group[email: team@swoole.com]
coroutine => enabled
epoll => enabled
eventfd => enabled
signalfd => enabled
cpu affinity => enabled
spinlock => enabled
rwlock => enabled
pcre => enabled
zlib => enabled
mutex_timedlock => enabled
pthread_barrier => enabled
futex => enabled
Directive => Local Value => Master Value
swoole.enable_coroutine => On => On
swoole.aio_thread_num => 2 => 2
swoole.display_errors => On => On
swoole.use_namespace => On => On
swoole.use_shortname => On => On
swoole.fast_serialize => Off => Off
swoole.unixsock_buffer_size => 8388608 => 8388608
出现错误提示
PHP Warning: Module 'swoole' already loaded in Unknown on line 0
打开 php.ini
vim /usr/local/php/etc/php.ini
查找 swoole,插件被载入了两次,删除一个即可,删除重启

Swoole 与 纯 PHP ab 压力测试
服务器配置
- 操作系统CentOS 7.2 64位
- CPU1 核
- 内存2 GB
- 公网带宽1 Mbps
Swoole 2.1.2-alpha
<?php
$http = new swoole_http_server("127.0.0.1", 9501);
$http->on("start", function ($server) {
echo "Swoole http server is started at http://127.0.0.1:9501\n";
});
$http->on("request", function ($request, $response) {
$response->header("Content-Type", "text/plain");
$response->end("Hello World\n");
});
$http->start();
ab -c100 -n100000 http://127.0.0.1:9501/

Server Software: nginx
Server Hostname: 127.0.0.1
Server Port: 80
Document Path: /helloworld.php
Document Length: 11 bytes
Concurrency Level: 100
Time taken for tests: 20.609 seconds
Complete requests: 100000
Failed requests: 0
Write errors: 0
Total transferred: 18900000 bytes
HTML transferred: 1100000 bytes
Requests per second: 4852.13 [#/sec] (mean)
Time per request: 20.609 [ms] (mean)
Time per request: 0.206 [ms] (mean, across all concurrent requests)
Transfer rate: 895.56 [Kbytes/sec] received
Connection Times (ms)
min mean[+/-sd] median max
Connect: 0 0 0.1 0 3
Processing: 3 20 6.3 20 153
Waiting: 1 20 6.3 20 153
Total: 3 21 6.3 20 154
PHP 7.2.3
<?php
echo 'hello world';
ab -c100 -n100000 http://127.0.0.1/helloworld.php

Server Software: swoole-http-server
Server Hostname: 127.0.0.1
Server Port: 9501
Document Path: /
Document Length: 12 bytes
Concurrency Level: 100
Time taken for tests: 5.758 seconds
Complete requests: 100000
Failed requests: 0
Write errors: 0
Total transferred: 16100000 bytes
HTML transferred: 1200000 bytes
Requests per second: 17368.14 [#/sec] (mean)
Time per request: 5.758 [ms] (mean)
Time per request: 0.058 [ms] (mean, across all concurrent requests)
Transfer rate: 2730.73 [Kbytes/sec] received
Connection Times (ms)
min mean[+/-sd] median max
Connect: 0 1 0.4 1 4
Processing: 3 4 0.9 4 54
Waiting: 2 3 0.6 3 52
Total: 4 6 0.9 5 54