一桶浆糊的博客

微信小程序与webview中h5页面通讯demo

在微信小程序里，webviewH5向miniProgram通讯只能通过postMessage函数

然而这个函数却很鸡肋，小程序官方文档是这样描述的：向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的message事件

而且小程序官方文档里没有提到miniProgram如何向webviewH5通讯

在这个demo中, 展示了我是如何让webviewH5和miniProgram互相通讯

其实原理很简单:

  • webviewH5 --> miniProgram

    • 通过js调用微信JSSDK的wx.miniProgram.navigateTo方法跳转到小程序的指定页面并且把参数当做query带给小程序原生页面

  • miniProgram --> webviewH5

    • webview组件存在一个src属性, 用于展示指定的h5页面,
    • webview组件上的src属性如果只是改变了hash值, 当前组件上的页面是不会刷新的. 所以我们可以利用这个特性在miniProgram页面把想要传递给webviewH5的信息带到当前webview组件的src上. 当然, 是操作当前src的hash值

运行使用

    小程序开发者工具导入微信小程序demo源码, 在/pages/index/index.js中修改webview组件访问地址指向webview.html的http地址

效果预览

success.gif: http://cdn.mrabit.com/webview_success.gif

failure.gif: http://cdn.mrabit.com/webview_failure.gif

cancel.gif: http://cdn.mrabit.com/webview_cancel.gif

文件目录

.
├── README.md
├── webview                     // 微信小程序demo源码
│   ├── app.js
│   ├── app.json
│   ├── app.wxss
│   ├── miniprogram_npm
│   │   └── qs
│   │       ├── index.js
│   │       └── index.js.map
│   ├── package-lock.json
│   ├── package.json
│   ├── pages
│   │   ├── index               // 存在webviewH5组件的页面
│   │   │   ├── index.js
│   │   │   ├── index.json
│   │   │   ├── index.wxml
│   │   │   └── index.wxss
│   │   └── pay                 // miniProgram原生页面
│   │       ├── pay.js
│   │       ├── pay.json
│   │       ├── pay.wxml
│   │       └── pay.wxss
│   ├── project.config.json
│   ├── sitemap.json
│   └── utils                   // 工具类, miniProgram --> webviewH5的主要代码逻辑存放在这里
│       └── util.js
└── webview.html                // 微信小程序webviewH5组件所使用的的h5页面源码

相关代码：

阅读全文

使用 Synology 的 Hyper Backup 备份数据到 OneDrive

最近上了一个Microsoft Office 365的车，拥有1T的OneDrive云盘空间，正好用来备份群晖内的部分重要数据。其实之前一直是通过 Cloud Sync 同步群晖内 TimeMachine 和 iMazing 的备份数据，不过 Cloud Sync 和 Hyper Backup 还是有区别的，Cloud Sync 更多的是做文件同步，Hyper Backup才是真正备份的工具。

然而准备开始使用的时候才发现，Hyper Backup 不能提供将 OneDrive 用作备份目标： QQ202001051239432x.png

Google Drive 虽可用但是无限空间的账号不知道什么时候会翻车，最终还是放弃选择Google Drive。

最后在群晖的论坛发现有网友实现了将 OneDrive作为备份目标的方法： Backup to Microsoft OneDrive with Synology’s Hyper Backup

原理其实很简单，虽然 Hyper Backup 不支持备份到 OneDrive 但是却支持 WebDav,而我们可以通过 WebDAV 访问 OneDrive。不过 OneDrive WebDAV API 需要使用 Passport服务器端包含（SSI）版本1.4协议进行身份验证，而 Hyper Backup 的 WebDAV 客户端仅支持 HTTP基本身份验证 和 NTLM身份验证。

不过最终该网友提出了一种解决方案，通过设置代理服务器，将所有与身份验证有关的信息从基本身份验证转换为Passport身份验证（反之亦然），并将所有其他信息不变地转发：basic-to-passport-auth-http-proxy

设置代理服务器：

  1. 通过群晖内 Docker 实现代理服务器的安装： 运行群晖内的Docker套件，找到映像 - 新增 - 从URL添加 - 填入https://hub.docker.com/r/skleeschulte/basic-to-passport-auth-http-proxy并点击新增按钮

QQ202001051258542x.png

  1. 启动代理服务器镜像： 下载好镜像后，启动该镜像，选择高级设置:
  • 勾选启用自动重新启动,防止容器异常终止后无法运行
  • 端口默认是3000，可自行更改
  • 在环境选项卡新增变量PROXY_TARGET为：https://d.docs.live.net/ 点击应用并下一步可看到该容器的相关配置信息：

QQ202001051306392x.png

再次点击应用完成容器的创建，这时候 OneDrive 的代理服务器就设置完成了。

获取OneDrive CID

要通过WebDAV连接到OneDrive，除了用户名和密码外，还需要一个名为CID的字符串。可以通过以下方式获取：

打开 https://www.onedrive.com/ 并登录到 OneDrive。浏览器完成 OneDrive 界面的加载后，地址栏应显示类似https://onedrive.live.com/?id=root&cid=ABCDEFG123456789的内容。在这里，ABCDEFG123456789就是自己的CID了。CID不区分大小写。

设置 Hyper Backup 的备份目标

这时候我们再去 Hyper Backup 新建数据备份任务，选择WebDAV，填入对应的参数：

QQ202001051318452x.png

  • 服务器地址：127.0.0.1:port/CID port为创建容器时候设置的端口，默认为3000 CID为上文获取到的CID
  • 用户账户：OneDrive账户
  • 密码：OneDrive密码

填入正确以后，点击文件夹下拉列表，应该展示在 OneDrive 中所有文件夹列表。

接下来就是 Hyper Backup 的一系列配置了。

参考地址：

阅读全文

Proxmox VE下安装黑群晖DSM 6.1.x

Proxmox是一个非常优秀的开源虚拟化环境，集诸多优点于一身：开源免费，稳定可靠，架构简洁，安装方便，支持集群，KVM，LXC，NFS，iSCSI，Ceph，GlusterFS，DRBD，RestfulAPI，LDAP，CA，同时内嵌防火墙和IPS….绝对是不露声色，能力超高那种角色。以下简称pve。 pve安装就不多说了，很简单。

前言：

黑群晖不直接装在物理机而是装在pve的原因是可以虚拟化多个系统，我这里还分别装了一个lede和Windows

需要的工具打包地址： https://yunpan.360.cn/surl_yLX3rpIv6Hi （提取码：9f81）

正文：

1. 新建虚拟机以便黑群晖使用

  • ID默认即可，名称随意
  • 操作系统选：“不使用任何介质”
  • 硬盘选：“sata”，大小随意，因为一会儿会配置黑群晖引导，如果需要添加硬盘的话，就不会用到这里的硬盘配置
  • CPU按需设置，我这里选的是 sockets:2, 核：2
  • 内存也是按需设置，当然，大点肯定是没错的，我这里选的是6144(6GB)
  • 网络我选的是半虚拟化
  • 确认无误后点击“完成”
  • 启动新建的虚拟机，这里要记住ID,我的是 101

1.png

2. 配置黑群晖引导

把上文需要的工具通过各种方式（scp,sftp均可）上传到pve的服务器上

登陆到ROOT目录下,执行相关命令

chmod +x img2kvm
./img2kvm DS3617xs_DSM6.1_Broadwell.img 101

2.png

这时如果命令执行正确，你会看到pve页面上多了一个“未使用的磁盘0”

3.png

双击这块磁盘，总线/设备选择“SATA”,其余保持不变，然后你会看到sata1已经添加，并且容量为52MB，这才是群晖的引导盘

接下来切换到 “选项” 修改 “引导顺序” 为sata1

4.png

保存重启（最好先重启pve系统防止添加到虚拟机的硬盘未生效）

3. 安装黑群晖系统

安装上文提到的工具包内的“synology-assistant-6.2-23733.exe”

运行后发现，已经搜索到刚刚配置了黑群晖引导的虚拟机了

5.png

记住对应ip并在浏览器上打开 http://ip:5000,我这里就是打开 http://192.168.0.7:5000

6.png

7.png

点击“设置”， 选择 “手动安装”，并选择上文中工具包内的DSM_DS3617xs_15266.pat

PS：

  • DSM_DS3617xs_15266.pat 为 6.1. 6版本
  • DSM_DS3617xs_15284.pat 为 6.1.7 版本

可自行决定安装版本，也可安装 6.1.6 后进入系统设置手动更新至6.1.7,请勿直接更新6.2.x版本，引导不支持会导致开机失败

点击“立即安装”，勾选“了解”并“确定”

8.png

9.png

等待安装完成

4. 配置黑群晖

根据提示去进行配置，最重要的一点 不要选择“自动安装更新”，也不要去尝试使用quickconnect,最好是根据下图配置走

GIF.gif

自此，你的黑群晖已经安装成功.

10.png

重要提示

  • 不要尝试点击系统更新，会导致开机失败
  • 去计划任务里面关闭DSM自动更新选项
  • 不要去尝试使用quickconnect，因为黑群晖是不会通过群辉的认证的，除非你有方式洗白

参考地址：

阅读全文

基于Vant-NumberKeyboard的自定义数字输入框 + 数字键盘

custom-input

基于Vant-NumberKeyboard的自定义数字输入框

问题产生背景

  1. 移动端项目中需要用到数字输入框，html 自带的 input 标签设置[type=number]会默认调用系统输入法的数字键盘，可这样的话，minlength、maxlength 等属性就失效了，还无法禁止部分特殊字符的输入
  2. 利用 input 自带的 change 或者 input 事件在 js 进行判断，会导致 input 内造成闪动效果，光标会默认跑到尾部（可控制光标，兼容性不是很好）
  3. IOS 可利用 keypress 进行输入前的判断，Android 却不支持该事件，迫于无奈只能手动实现数字输入框 input

效果预览

8fa21aabgy1fz5chddbzpg207s0dytrf.gif

模拟光标实现原理

8fa21aabgy1fz5dkhkkl6g20fr05le81.gif

.cursor {
  position: relative;
  height: 35px;
  &::after {
    content: "";
    animation: blink 1s infinite steps(1, start);
    position: absolute;
    width: 2px;
    height: 30px;
    right: 0;
    top: 2.5px;
    background: rgb(0, 53, 237);
    border-radius: 2px;
  }
}
@keyframes blink {
  0%,
  100% {
    background: transparent;
  }
  50% {
    background: rgb(0, 53, 237);
  }
}

use 使用

在 main.js 中引入组件

import customInput from "./components/customInput";
Vue.use(customInput);

接下来，你就可以在页面中使用 custom-input 了

<template>
  <custom-input
    v-model="inputMoney"
    placeholder="最大值888.88,保留三位小数"
    max="888.88"
    :toFixed="3"
  ></custom-input>
</template>
<script>
  export default {
    data() {
      return {
        inputMoney: ""
      };
    }
  };
</script>
属性 说明 类型 默认值
value 当前输入的值 String -
placeholder 自定义 input 框占位符 String placeholder
transform 是否判断自定义 input 位置被自定义键盘覆盖 Boolean true
max 自定义 input 最大值设置 String, Number 9999999999.99
toFixed 小数点后保留位数 Number 2
事件 说明 返回值
onKeyboardOpen 自定义键盘展开事件 data
close 自定义键盘关闭事件 data
input 当前输入值改变时间 data

文件目录

.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
└── src
    ├── App.vue // demo
    ├── components
    │   └── customInput // 自定义数字输入框组件
    │       ├── index.js
    │       ├── input.vue
    │       └── keyboard.vue
    └── main.js

相关代码：

阅读全文

Docker 下搭建 DNS 服务器 dnsmasq

有时候会碰到需要修改手机hosts的情况，可是IOS没越狱实在是不好办。之前的解决方法是，修改电脑hosts，然后手机设置代理到电脑，间接实现了hosts的修改，然而这也是件很麻烦的事，所以决定利用docker环境手动搭建一个DNS服务器。

1.配置容器

docker search dnsmasq

QQ20190103142416.png

这里选择andyshinn/dnsmasq的docker镜像

# 下载andyshinn/dnsmasq镜像
docker pull andyshinn/dnsmasq
# 运行镜像
docker run -d --restart=always --name dns-server -p 53:53/tcp -p 53:53/udp --cap-add=NET_ADMIN -v /usr/share/dnsmasq:/etc/dnsmasq  andyshinn/dnsmasq
# 查看容器启用情况
docker ps -a

查看，容器启动成功。

QQ20190103142727.png

2.配置DNS服务

  1. 为 dnsmasq 配置一个真正的dns服务器地址：
vim /usr/share/dnsmasq/resolv.conf

# 这里我使用的是阿里云的DNS
nameserver 223.5.5.5
nameserver 223.6.6.6
  1. 配置本地解析规则：
vim /usr/share/dnsmasq/dnsmasqhosts

# 这里配置自定义解析
127.0.0.1 master
  1. 修改dnsmasq配置文件，指定使用上述两个我们自定义的配置文件：

因为我们在启动docker的时候设置了挂载卷-v /usr/share/dnsmasq:/etc/dnsmasq，所以我们只需要进入dns-server的命令行，就会看到dns-server内部对应路径文件夹内出现了刚刚配置的两个文件

docker exec -it dns-server /bin/sh

QQ20190103144521.png

vi /etc/dnsmasq.conf

# 修改下述两个配置
resolv-file=/etc/dnsmasq/resolv.conf
addn-hosts=/etc/dnsmasq/dnsmasqhosts
  1. 回到宿主，重启dns-server容器服务。
docker restart dns-server
  1. 记得开放服务器的53/tcp和53/udp

3.通过本机验证

修改本机dns服务器地址：

QQ20190103144830.png

通过ping命令查看配置是否生效：

ping master

QQ20190103144936.png

参考地址：

阅读全文