在微信小程序里,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页面源码

相关代码:

阅读全文

最近上了一个Microsoft Office 365的车,拥有1T的OneDrive云盘空间,正好用来备份群晖内的部分重要数据。其实之前一直是通过 Cloud Sync 同步群晖内 TimeMachine 和 iMazing 的备份数据,不过 Cloud SyncHyper 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是一个非常优秀的开源虚拟化环境,集诸多优点于一身:开源免费,稳定可靠,架构简洁,安装方便,支持集群,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,因为黑群晖是不会通过群辉的认证的,除非你有方式洗白

参考地址:

阅读全文

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

相关代码:

阅读全文

有时候会碰到需要修改手机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/tcp53/udp

3.通过本机验证

修改本机dns服务器地址:

QQ20190103144830.png

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

ping master

QQ20190103144936.png

参考地址:

阅读全文