孙肖宁 发布的文章

小编今天帮朋友搭建了一个博客，也是使用的Typecho，感谢Typecho团队。搭建完毕不能上传图片，位于同一个服务器的另外一个站，也是使用的Typecho，可以上传图片，所以排除了服务器配置的问题。那就是本次搭建存在问题，经过短暂的排查，发现不存在/usr/uploads这个文件夹，呢么小编就创建了这个文件夹，并且权限设置为777.这样就可以正常上传图片了。

总结下：
创建/usr/uploads这个文件夹。

微信小程序的抽红包组件，小编一共是做了两种，第一种呢用了很长时间了，可能是时间长了，觉得不是那么霸气了，就重新又制作了一个，第一个当时使用了大量的图片，这也导致了加载的时候很慢，这里面的主要样式还是参考的别人的代码，总而言之效果还是不错的，不过现在呢，小编又自己写了个抽红包的组件，这回看上去比较好看了，首先我们先看下2.0代码吧。因为是放在具体项目里面的，有些细节性的东西大家可以改改：
首先是wxml，大部分的样式也写在了这里面：

<view style="position: fixed; top: 0; left: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100vh; z-index: 100000000000000000000; background: rgba(0, 0, 0, 0.4);">
    <view class="{{open ? 'red-packet-open' : ''}}" style="background: #ff3d32; border-radius: 30rpx; border-bottom-right-radius: 100% 120px; border-bottom-left-radius: 100% 120px; box-shadow: 0px 3px 5px 1px #e92c27; width: 590rpx; height: 700rpx; position: absolute; top: 80rpx; z-index: 101;">
        <view wx:if="{{name}}" style="color: #F5B37B; text-align: center; font-size: 40rpx; padding-top:100rpx;">{{name}}的红包</view>
        <view wx:if="{{text}}" style="color: #F5B37B; text-align: center; font-size: 30rpx; padding-top:60rpx;">{{text}}</view>
        <view style="position: absolute; bottom: -80rpx; left: 220rpx; background: #E8bF7B; width: 150rpx; height: 150rpx; line-height: 150rpx; text-align: center; border-radius: 75rpx; font-size: 60rpx;" bindtap="handleOpen">抽</view>
    </view>
    <view class="{{open ? 'red-packet-open' : ''}}" style="background: #ff3328; border-radius: 30rpx; border-top-right-radius: -120px; border-top-left-radius: -120px; width: 590rpx; height: 464rpx; position: absolute; top: 500rpx; z-index: 100;"></view>
    <view style="width: 590rpx; height: 883rpx; position: absolute; top: 80rpx; z-index: 90; background: #FFFFFF; border-radius: 30rpx;">
        <view style="height: 260rpx; border-radius: 30rpx; border-bottom-right-radius: 100% 120px; border-bottom-left-radius: 100% 120px; background: #ff3d32; display: flex; flex-direction: column; justify-content: center; align-items: center;text-align: center;">
            <image mode="aspectFill" src="{{user?user.avatar : ''}}" style="width: 130rpx; height: 130rpx; min-width: 130rpx; min-height: 130rpx; border-radius: 65rpx; position: absolute; top: 180rpx;" />
            <view style="position: absolute; top: 0; right: 20rpx; color: #FFFFFF; font-size: 56rpx;" bind:tap="close">X</view>
        </view>
        <view style="display: flex; flex-direction: column; justify-content: center; align-items: center;text-align: center; font-size: 26rpx; margin: 60rpx;">
            <text style="color: #f33035; font-size: 40rpx;">{{title}}</text>
            <text style="padding: 10rpx; color: #f33035; font-size: 50rpx;">{{msg}}</text>
            <view style="text-align: center; font-size: 30rpx; margin: 20rpx;">{{tips}}</view>
            <view wx:if="{{balance}}" bind:tap="toBalance" style="text-align: center; font-size: 30rpx; margin: 20rpx; color: #f33035; padding-top: 60rpx;"><text wx:if="{{balance_name}}">{{balance_name}}</text>余额：{{balance}}>>
            </view>
        </view>
    </view>
</view>

在wxss里面实现了一个动画：

.red-packet-open {
    animation: open-up 0.2s ease-in-out 0.2s 1 normal;
    animation-fill-mode: forwards;
    display: none;
}

在js里面就是相关的逻辑了

const audio = wx.createInnerAudioContext()
audio.src = 'https://audiosrc.shangpo.net/sources/coin.mp3'
let g = getApp().globalData;

Component({
    properties: {
        title: {
            type: String,
            value: null
        },
        msg: {
            type: String,
            value: null
        },
        tips: {
            type: String,
            value: null
        },
        bind: {
            type: Boolean,
            value: true,
        },
        open: {
            type: Boolean,
            value: false
        },
        amount_ui: {
            type: String,
            value: null
        },
        name: {
            type: String,
            value: null
        },
        text: {
            type: String,
            value: null
        },
        user: {
            type: Object,
            value: g.user
        }, 
        balance: {
            type: String,
            value: null
        },
        balance_name: {
            type: String,
            value: null
        }
    },
    data: {

    },
    methods: {
        handleOpen() {
            var that = this
            if (that.data.bind) {
                that.setData({
                    title: that.data.title,
                    msg: that.data.msg,
                    bind: false,
                    // 以下两项为测试页面使用
                    // tips: that.data.tips,
                    // open: true,
                })
                audio.play()
                this.triggerEvent('choujiang', {})
            }
        },
        close() {
            this.triggerEvent('close_redpacket', {})
        },
        toBalance(){
            this.triggerEvent('toBalance', {})
        }
    }
})

1.0版本的基本上就是样式上的不一样，小编在这里就不列出来了，有需要的可以单独联系小编。

经过了不到半个月的努力，终于把驾照拿到手了，也可以是说接近3年。两年前就报名了驾照，并且科目一也考了，然后就没有然后了，就没有去练过车了。突然之间想考驾照了，发现以前报名的那个教练都不教了，换职业了。还好他给找了个教练，让我和他学。

科目一：
科目一相对来说比较简单了，100选择题，如果有时间的话，把某平台上1000多道题全部看一边，确实管用，要是没时间吗就找找技巧，反正你选的时候一定往安全了去选，车必须礼让，发现有紧急，立即这些一般是不对的，因为这样很危险。
科目二：
科目二我考的时候就5项，倒车入库，侧方位停车，直角拐弯，S弯，坡道定点停车和起步。倒库是首先联系的，也是练习时间最久的，倒库的时候一定要注意调整，真的很难一次就倒得很准，哪边窄了就向相反的方向调整方向盘。还要注意后边距离库角的距离，不能太大也不能太小。多练习练习就好了，看的点也是教练平时教的。我在这里就不一一的说了。
侧方位停车以及其他几项，是我们集训的时候练习的，十五六个人两辆车练了3，4天，侧方位停车相对与倒库来说就简单点了，感觉比我们的库要大。侧方位停车出库，以及直角转弯一定要开启转向灯。除了坡道定点停车外，其他的尽量满分，在坡道定点停车的时候，距离边线的30公分不好把握，以及停车的位置很难把控，这20分可以尽量拿，但是别挂科就行。
科目三
科目三在考试之前一定要去考试场地模拟，记住关键的点，别紧张，该踩刹车踩刹车，如果车很多的话，该停车就停车，安全为主。直线行驶可以慢慢的慌着方向盘过。
别紧张，考试前先围绕车转一圈，上车调整座椅，系安全带。起步钱数4个数，1.打开左转向灯，2.按喇叭，3.挂一档，3.放下啊手刹。下车的时候数7个数，1.关闭转向灯，2挂空挡，3.拉手刹，4.熄火，5.解安全带，6.开车门，7.松开离合刹车。
科目四
和科目一一样，稳住能过。
预祝所有学员逢考必过。

如果是在一个平面里面来计算两个点之间的距离，那么我们可以直接使用勾股定理，那么问题就来了，地球是一个球啊，面是球面啊，那就这么计算

from math import radians, cos, sin, asin, sqrt

#公式计算两点间距离（m）

def geodistance(lng1,lat1,lng2,lat2):
　　lng1, lat1, lng2, lat2 = map(radians, [float(lng1), float(lat1), float(lng2), float(lat2)]) # 经纬度转换成弧度
　　dlon=lng2-lng1
　　dlat=lat2-lat1
　　a=sin(dlat/2)**2 + cos(lat1) * cos(lat2) * sin(dlon/2)**2 
　　distance=2*asin(sqrt(a))*6371*1000 # 地球平均半径，6371km
　　distance=round(distance/1000,3)
　　return distance

  • 修改配置文件后，更新新的配置到supervisord,执行supervisorctl update。
  • 重新启动配置中的所有程序supervisorctl reload。
  • 查看正在守候的所有进程supervisorctl。
  • 启动某个进程supervisorctl start program_name(program_name=你配置中写的程序名称)。

  • 停止某一进程pervisorctl stop program_name(program_name=你配置中写的程序名称)。

    • 如果停止所有的进程使用all,即supervisorctl stop all,用stop停止掉的进程，用reload或者update都不会自动重启。
  • 重启某一进程supervisorctl restart program_name(program_name=你配置中写的程序名称)。

小编使用的是Ubuntu16.04的服务器，在使用ssh命令进行连接的时候发现无法连接到远程服务器，那么小编来说下解决办法。
首先你得确保你的服务器安装了ssh服务，并且开启了ssh的服务。
sudo ps -e | grep ssh检查你的服务器是否开启了ssh服务，如果没有开启，请使用：sudo service ssh start开启。
如果没有安装的话，请使用 sudo apt-get install openssh-server来进行安装。

如果你的服务器安装并且开启了ssh服务的话，还不能连接，并且出现REMOTE HOST IDENTIFICATION HAS CHANGED这样的错误：下图所示：
WechatIMG842.jpeg

出现这个问题的原因是,第一次使用SSH连接时，会生成一个认证，储存在客户端的known_hosts中，所以一般情况下这个是由于服务器重新安装系统导致的。

解决办法

执行以下命令：

ssh-keygen -l -f ~/.ssh/known_hosts
ssh-keygen -R +输入服务器的IP

然后重新连接就可以了。

小编在做一个微信小程序的多选框的时候用到了bindchange这个函数来实现多选的实现，但是小编需要解决冒泡问题，这时候发现catchchange这个方法居然解决不了问题，无法阻止冒泡，经过一系列的尝试最终发现了解决的办法：在checkbox添加一个view，给view添加一个catchtap操作，指向一个空函数即可，冒泡到view的时候，在这几就结局了。代码实现如下：

 <view catchtap="catchtap">
      <checkbox value="{{_id}}" checked="{{item.checked}}" />
 </view>

catchtap.jpg

微信小程序的轮播图也是十分的方便，我们可以直接调用，不用自己再写多余的逻辑了，这样也极大的方便了我们的开发，在使用过程中，小编发现原生的小程序无法满足需求了，小编想在图片下方添加行文字，但是原生的轮播图无法满足小编的基本需求了。所以小编自己进行了部分修改，一起来看下。
先来看下效果图：
lbt.png
实现代码：

 <swiper indicator-dots="{{true}}" style="height: 200px;">
            <block wx:for="{{covers || []}}">
                <swiper-item>
                    <image src="{{item}}" class="slide-image" style="width: 100%; height: 100%;" mode="aspectFill" bindtap="onImageClick" data-images="{{covers || []}}" data-index="{{index}}" />
                    <!-- 关键代码 -->
                    <view style="font-size: 18px;width:{{width}}px;padding:10rpx; color: black; font-weight: 800; padding: 2px 0;background:rgba(0,0,0,0.4);position: absolute;bottom:0;left:0%;transform:translateX(0%);text-align:left;">
                        <text style="color:#FFFFFF;padding-left:30rpx;">{{product.name}}</text>
                    </view>
                </swiper-item>
            </block>
</swiper>

小编也不知道这个叫什么。 反正就是俩M形状的东西,两个锁在一起了，然后需要分开。
1.jpeg
其实呢，解开的时候只需要理解是怎么进去的就可以，我们先来看下怎么进去的，
2.png
就是让两个开口的地方对齐就可以直接进去了。
进去之后就是这样的了
3.jpeg
你发现一退就可以出来了。
所以呢，我们解开也只需要这样的状态就可以了。让m之间的缝隙对齐就可以了。
4.jpeg
推出来就可以了。

  1. 1
  2. ...
  3. 8
  4. 9
  5. 10
  6. 11
  7. 12
  8. 13
  9. 14
  10. ...
  11. 54