mpvue小程序开发渲染层网络层错误问题的解决方法

2019-03-20 12:10:10

直接上解决方法:

把 servicewechat.com 加入防盗链白名单问题解决

问题发现和排查过程

用mpvue开发小程序的时候, 遇到了渲染层网络层错误, 公司静态资源配置了防盗链功能, 使用location.href看到的也是 127.0.0.1 的本地地址, 本以为把127.0.0.1加入防盗链的白名单就可以了, 结果还是报这个错误, 比较扯淡的是这个控制台还看不到真正的图片请求, 最后用 fiddler 抓了一下包, 才发现refresh居然是 https://servicewechat.com/wx7d3c7a42f044667b/devtools/page-frame.html, 最后把 servicewechat.com 加入防盗链白名单问题解决.

调试工具报错信息:

fiddler请求头信息:

小程序客服消息处理

2019-03-12 11:23:23

三种消息类型:

// 文本消息
{
    "signature": "ee6e400de7972484ec6f3014c2f77504925a4707",
    "timestamp": "1552298008",
    "nonce": "540004383",
    "openid": "oPzrj5EAP25lzOVW6qa0m8MUlLXA",
    "encrypt_type": "aes",
    "msg_signature": "74c419155e49cefab8ab1dbd440b9389acc47e2a",
    "URL": "http:\/\/qiang.lt.ngapp.net\/wechat\/noti/fy",
    "ToUserName": "zhaishuaigan",
    "FromUserName": "oPzrj5EAP25lzOVW6qa0m8MUlLXA",
    "CreateTime": 1552293166,
    "MsgType": "text",
    "Content": "hello",
    "MsgId": 1,
    "Encrypt": "PloOW0ucj9SkMpMC...."
}
// 事件消息
{
    "signature": "3e5860da822266b9f03f8d5380615f9be0ae2db7",
    "timestamp": "1552301914",
    "nonce": "693467019",
    "openid": "oPzrj5EAP25lzOVW6qa0m8MUlLXA",
    "encrypt_type": "aes",
    "msg_signature": "eda0cdd567b35df4501ee2041e0d191db81798f2",
    "ToUserName": "gh_cc23a0a84984",
    "FromUserName": "oPzrj5EAP25lzOVW6qa0m8MUlLXA",
    "CreateTime": 1552301914,
    "MsgType": "event",
    "Event": "user_enter_tempsession",
    "SessionFrom": "open-type='contact'",
    "Encrypt": "oMP\/xo2RdcbK07vvoxxxx....."
}
// 图片消息
{
    "signature": "ebd79f0c44f01dc26ef83ffeeadbdb3af5b960da",
    "timestamp": "1552302190",
    "nonce": "1322948029",
    "openid": "oPzrj5EAP25lzOVW6qa0m8MUlLXA",
    "encrypt_type": "aes",
    "msg_signature": "06613ca44e189d95140166898f80a27ab10baa80",
    "ToUserName": "gh_cc23a0a84984",
    "FromUserName": "oPzrj5EAP25lzOVW6qa0m8MUlLXA",
    "CreateTime": 1552302190,
    "MsgType": "image",
    "PicUrl": "http:\/\/mmbiz.qpic.cn\/mmbiz_jpg\/WwPGxFUiaTRZ6zVvTTGVbhfa9Vic801ux7OHobAAiaD3xRMYeJzbic4ISvwn736dpK0OMTlaYvX7GoTRgE8LqObkIQ\/0",
    "MsgId": 22223624286040849,
    "MediaId": "3WiHLigPtkJtqoLvPD2HgPsAtb3vzDvTWyo0sP5s-dshtS7oZOlCW7c3RuD1nwBt",
    "Encrypt": "gictSCCy+Zxxxx...."
}

ThinkPHP 5.1保存消息代码

$request = request()->param();
$data    = [
    'signature'     => $request['signature'],
    'timestamp'     => $request['timestamp'],
    'nonce'         => $request['nonce'],
    'openid'        => $request['openid'],
    'encrypt_type'  => $request['encrypt_type'],
    'msg_signature' => $request['msg_signature'],
    'to_username'   => $request['ToUserName'],
    'from_username' => $request['FromUserName'],
    'msg_type'      => $request['MsgType'],
    'msg_id'        => isset($request['MsgId']) ? $request['MsgId'] : '',
    'encrypt'       => isset($request['Encrypt']) ? $request['Encrypt'] : '',
];
$msgInfo = [];
switch ($request['MsgType']) {
    case 'text':
        $msgInfo['text'] = $request['Content'];
        break;
    case 'image':
        $msgInfo['pic']      = $request['PicUrl'];
        $msgInfo['media_id'] = $request['MediaId'];
        break;
    case 'event':
        $msgInfo['event']        = $request['Event'];
        $msgInfo['session_from'] = $request['SessionFrom'];
        break;
}
$data['msg_info'] = json_encode($msgInfo);
CustomerMessage::create($data);
return '';

数据库表结构设计

<?php
use think\migration\Migrator;
use think\migration\db\Column;
class CreateCustomerMessageTable extends Migrator
{
    public function change()
    {
        $this->table('customer_message')
             ->addColumn(Column::string('signature')
                               ->setDefault('')
                               ->setComment('签名'))
             ->addColumn(Column::integer('timestamp')
                               ->setDefault(0)
                               ->setComment('时间戳'))
             ->addColumn(Column::string('nonce')
                               ->setDefault('')
                               ->setComment('随机数'))
             ->addColumn(Column::string('openid')
                               ->setDefault('')
                               ->setComment('客户id'))
             ->addColumn(Column::string('encrypt_type')
                               ->setDefault('')
                               ->setComment('加密方式'))
             ->addColumn(Column::string('msg_signature')
                               ->setDefault('')
                               ->setComment('消息签名'))
             ->addColumn(Column::string('to_username')
                               ->setDefault('')
                               ->setComment('消息接收者'))
             ->addColumn(Column::string('from_username')
                               ->setDefault('')
                               ->setComment('消息来源'))
             ->addColumn(Column::string('msg_type')
                               ->setDefault('')
                               ->setComment('消息类型'))
             ->addColumn(Column::text('msg_info')
                               ->setNull(true)
                               ->setComment('消息内容'))
             ->addColumn(Column::string('msg_id')
                               ->setDefault('')
                               ->setComment('消息id'))
             ->addColumn(Column::text('encrypt')
                               ->setNull(true)
                               ->setComment('加密数据'))
             ->addColumn(Column::dateTime('create_time')
                               ->setDefault('CURRENT_TIMESTAMP')
                               ->setComment('创建时间'))
             ->addColumn(Column::dateTime('update_time')
                               ->setDefault('CURRENT_TIMESTAMP')
                               ->setComment('更新时间'))
             ->addColumn(Column::dateTime('delete_time')
                               ->setNull(true)
                               ->setComment('删除时间'))
             ->create();
    }
}

收藏一些docker镜像和使用方法

2019-02-22 16:06:10

version: '2'
services:
  proxy:
    image: 'jwilder/nginx-proxy'
    volumes:
      - /var/run/docker.sock:/tmp/docker.sock
    ports:
      - '80:80'
  mysql:
    image: mysql:5.7
    environment:
      - MYSQL_ROOT_PASSWORD=root
    volumes:
      - "./data/mysql:/var/lib/mysql"
    ports:
      - '3306:3306'
  redis:
    image: redis
  def:
    image: zhaishuaigan/php
    volumes:
      - "./:/app"
    links:
      - mysql
      - redis
    environment:
      - VIRTUAL_HOST=shuai.cn


docker run -p 80:80 -p 443:443 -itd --restart always -v /var/run/docker.sock:/tmp/docker.sock:ro --name proxy neilpang/nginx-proxy
docker run -d --name api --restart=always -v /www/api:/app -e VIRTUAL_HOST=api.ngapp.net -e ENABLE_ACME=true zhaishuaigan/php:tp5
docker run -d --name api --restart=always -v /root/www/api:/app -e VIRTUAL_HOST=api.admin-ui.cn -e ENABLE_ACME=true zhaishuaigan/php

php storm安装后要做的事

2019-02-13 15:47:02

1. 破解

地址: http://idea.lanyus.com/

写给刚入行的程序员

2018-11-19 16:16:44

源地址: 顶级程序员

1.作为前端开发者，使用双显示器能大幅提高开发效率。

2.学编程最好的语言不是PHP，是English。

3.自己做的东西交付之前先测试一遍。

4.问别人之前最好先自己百度，google一下，以免问出太低级的问题。

5.把觉得不靠谱的需求放到最后做，很可能到时候需求就变了，或者取消了。

6.读好书，垃圾书会浪费你时间。

7.不要炫技，面向人脑编程更便于维护。

8.没事别重复造轮子，你造的轮子大多数时候只有你觉得好用。接手你的轮子的人会在背后骂你上百遍。

9.不要先写框架再写实现。最好反过来，从原型中提炼框架。

10.新技术一定不要找书，书一旦印出来就过时了。

11.请勿久坐，多喝水，尤其是遇到很久都解决不了的问题的时候，多走动走动。

12.考虑可维护性比考虑性能更重要。

13.越难解决的bug往往犯的错误越低级。

14.比起鼓励师，不如给程序员找一个靠谱的产品经理。

15.熬夜低效率写代码，不如好好睡觉。

16.你遇到的问题，大多数人都遇到过，并且网上都有完整的解决方案，你找不到，只是你懒得去找。

17.多沟通，不少加班工作是由于沟通少造成的。

18.普通程序员+google=超级程序员。实在不行，百度也可以，学会利用搜索引擎来辅助自己解决问题。

19.早点找女朋友，生活作息会更健康。你懂的！

20.永远别小看程序媛。即使是青铜，说不定背后有个王者在帮她。

PHP开发清单

2018-10-30 10:52:24

最近读了<<清单革命>>后, 感觉清单很适合程序员使用, 可以避免一些低级错误, 有效降低线上bug发生的概率.

本地开发清单

需求分析
数据库字段设计
构建代码框架
上线差异化配置说明
具体逻辑实现
本地新功能测试
测试关键模块是否正常
边界值测试
注入测试
查看 sql 日志
查看错误日志
提交代码

上线清单

列出新版本更新功能
确认所有开发人员代码是否提交
更新本地代码
清除本地所有日志
测试本地所有新功能是否正常
测试关键模块是否正常
边界值测试
注入测试
查看 sql 日志
查看错误日志
上线部署

nodejs开发的神器 now

2018-10-25 18:15:02

now是什么?

now 允许您轻松、快速和可靠地将JavaScript（Node.js）或Docker支持的网站、应用程序和服务带到云中。实际上，包含package.json或Dockerfile的任何目录都可以通过一个命令：now传输到云。

每次部署一个项目，now 将提供一个新的、唯一的URL（甚至在上传完成之前）。这些URL将看起来像这样（我的应用程序-随机字符串）：my-app-erkgfjtrna.now.sh 。

当您部署到生产时，您只需选择适当的别名（自定义域）即可。

官网地址: https:/zeit.co

使用方法

下载命令行工具: npm install -g now
创建开发目录 mkdir my-project && cd my-project

创建package.json

{
 "name": "koa",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
     "start": "node index.js"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
     "koa": "^2.6.1"
 }
}

创建index.js

const Koa = require('koa');
const app = new Koa();
app.use(ctx => {
 ctx.body = 'Hello Koa';
});
app.listen(80);

登录 now login 然后输入邮箱地址收取验证邮件, 点击邮件里的验证链接, 这里需要翻墙, 因为验证页面有个js在google上.

执行 now --public 会输出类似下面的结果.

> Deploying D:\xxxx\my-project under shuai
> Synced 2 files (366B) [1s]
> Using Node.js 8.11.3 (default)
> https://my-project-lcjucjkwmi.now.sh [in clipboard] (sfo1) [3s]
> Building…

执行完成后, 就可以打开上面的地址看到运行结果

别名使用

now --public && now alias shuai
即可生成一个 shuai.now.sh 的地址, 方便记忆

使用自己的域名

now --public && now alias shuai.com
需要根据提示验证域名所有权就能使用自己的域名访问了, 而且自动生成https证书

一秒钟我们究竟在宇宙中移动了多远

2018-10-11 18:17:12

突然想计算一下我们一秒钟在宇宙中移动了多远
首先地球自传, 赤道约 4万千米, 每秒相当于移动 465米
然后是地球公转, 距离太阳的距离大概是 1.5亿千米, 一圈就是 9亿千米 , 每秒移动 28538 米.
大约就是 3万米/秒

这还没算太阳围绕银河的旋转速度 240千米/每秒

当你以为自己有一个光芒盖过全世界的 idea 时

2018-10-11 17:57:39

当你以为自己有一个光芒盖过全世界的 idea 时，请一定相信，这个世界上最少还有 1000 个人同时想到了这个 idea，彼此平行，毫无交集，没有谁抄谁。
这 1000 个人中，500 个人暂时没有时间、嫌麻烦、还没有想好；500 人决定立即动手试一下。
其中 300 个人试一下之后放弃了；剩下 200 人决定继续推进。
其中 120 个人中途失败，决定放弃；剩下 80 个人决定咬牙继续。
其中 30 个人，做出了产品原型。
其中 20 个人，得到了少量用户。
其中 10 个人，开始展露头角。
最后只有几个人，抢到了这个时间窗口，快速抓住历史机遇，跑到了其他人前面。

你是那几个跑到前面的人之一吗？

Vagrant+Virtual Box 快速搭建开发环境

2018-09-04 19:03:19

Vagrant.configure("2") do |config|
    config.vm.box = "ubuntu/xenial64"
    # config.vm.network "forwarded_port", guest: 80, host: 80
    # config.vm.network "forwarded_port", guest: 3306, host: 3306
    config.vm.network "private_network", ip: "10.0.0.3"
    config.vm.provision "shell", inline: <<-SHELL
        # 更换aliyun软件源
        cp /etc/apt/sources.list /etc/apt/sources.list.bak
        echo 'deb http://mirrors.aliyun.com/ubuntu/ xenial main restricted universe multiverse' > /etc/apt/sources.list
        echo 'deb http://mirrors.aliyun.com/ubuntu/ xenial-security main restricted universe multiverse' >> /etc/apt/sources.list
        echo 'deb http://mirrors.aliyun.com/ubuntu/ xenial-updates main restricted universe multiverse' >> /etc/apt/sources.list
        echo 'deb http://mirrors.aliyun.com/ubuntu/ xenial-proposed main restricted universe multiverse' >> /etc/apt/sources.list
        echo 'deb http://mirrors.aliyun.com/ubuntu/ xenial-backports main restricted universe multiverse' >> /etc/apt/sources.list
        apt-get update
        # 安装docker
        apt-get -y install apt-transport-https ca-certificates curl software-properties-common
        curl -fsSL http://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
        add-apt-repository "deb [arch=amd64] http://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable"
        apt-get -y update
        apt-get -y install docker-ce docker-compose
        # 使用aliyun加速docker镜像
        mkdir -p /etc/docker
        echo '{' > /etc/docker/daemon.json
        echo '    "registry-mirrors": ["https://kag9wqej.mirror.aliyuncs.com"]' >> /etc/docker/daemon.json
        echo '}' >> /etc/docker/daemon.json
        systemctl daemon-reload
        systemctl restart docker
        # 把vagrant用户添加到 docker 组
        usermod -G docker vagrant
        # ssh登录后, 进入/vagrant目录, 并启动docker compose , 然后 输出一下当前正在运行的容器
        echo 'cd /vagrant && docker-compose up -d && docker ps' >> /home/vagrant/.bashrc
    SHELL
end

玩具机器人

It's just a joke