BLCE | 蓝冰博客

作者： 蓝冰

  • ProtoPie手机号码位数判断

    ProtoPie手机号码位数判断

    近期接触了principle和protopie来做一些高保真原型的展示及交互的展示，起先用的principle，发现上手很容易也很直观，但是当效果及页面变多了之后，触发跳转的连线就会变得比较混乱，后来用protopie后清爽多了，由于两者的使用逻辑不太一样，principle偏向于补间动画的形式，protopie更像开发者的角度去思考，需要更多逻辑性，所以最后我选择用protopie来实现我的设想。

    如果你有足够的耐心，感觉用protopie可以做出一个跟线上APP相似度超90%的Demo，而且不单单是界面及交互动效的相似，连条件逻辑也可以实现，真的是很强大。

    下面说一下我遇到的第一个需要自己思考实现的问题，在网上搜了半天也没找到相关的案例，在阅读参考了官方文档后终于自己实现了，其实实现之后想想还是挺简单的，只要掌握了protopie的功能及逻辑，很多复杂的交互都可以慢慢实现。

    这个交互是很常见的登录框输入后自动判断手机号位数并让光标消失，激活登录按钮的操作，效果如下图

    第一步，先实现条款勾选的功能

    这个逻辑比较简单，点击触发，条件判断【勾】图层是否为透明，透明的改为不透明，不透明的改为透明。

    第二步，监听输入框，判断输入的文本长度，也就是本文的重点

    根据官方函数文档

    length(source: TEXT) ➔ NUMBER
此函数表示求文本长度
e.g. length("hello") ➔ 5

    我们把表达式

    length(`请输入手机号`.text)

    写入条件判断中，【`请输入手机号`】为图层名称，.text为图层的文本内容，当输入的文本长度等于11位的时候，提交框的背景色被修改成激活状态，并让输入框的光标消失，这样用户就无法继续输入了。

    当输入的文本长度小于11位的时候重置提交框的背景颜色，也就是变为灰色，表示无法提交。

    因为我们设置了监听触发，所以每当输入框发生变化的时候，它就会自动判断一次，也就是实时监测的。

    第三步，就是最后的提交按钮，判断各条件是否符合

    只有当勾选项的透明度是100%，提交背景是激活状态，然后手机号不是10000000000时（我设置的一个提示账号不存在的特例），同时满足这些条件才转场。

    当手机号是10000000000，提交背景激活时，重置提示框的文本（因为我下面会涉及到修改文本内容），让提示框透明度100%，然后延迟3秒后让提示框透明度0%。

    当勾选项的透明度是0%，提交背景是激活状态时，让提示框透明度100%，同时由于我用的是同一个提示框，所以就把文本内容改成“请先阅读并同意相关法律条款”，然后文本内容Y轴上移了75，然后延迟3秒后让提示框透明度0%。

    好了，所有条件设置完毕，可以预览看看效果了。

    ​

    举一反三，此函数条件判断也可以用在其他地方，比如判断文本框内容是否为空等等。

    附上源文件下载，供大家参考。

    电话号码位数判断下载

  • Mac安装软件时提示已损坏的解决方法

    最新Catalina报错问题汇总
    提示程序含有恶意代码或者已经打开所有来源还是提示扔到垃圾桶
    在终端输入 xattr -r -d com.apple.quarantine 加上程序的App绝对路径，App建议直接拖放到终端，会自动填写路径
    如这样：xattr -r -d com.apple.quarantine /Applications/QQ.app

  • Macbook开机后卡在进度条不动了

    大晚上在看视频的时候突然电脑死机了，也是在买了苹果电脑之后才醒悟，原来苹果也会死机啊，不过也是系统升级之后的事，可能你一直不升级的话会好很多，就像你手机升级了会卡一样，不过不升级的话很多软件又用不了，尴尬。
    卡了之后就像往常一样强制关机重启，好嘛，我最担心的事情来了，一直卡在苹果进度条进不了桌面了，重启了几次都这样，瞬间把我吓到了，不会挂了吧，里面可还有很多重要资料呢，还没时光备份呢！
    还好在网上找到了正确的解决方法，顺利解决了，应该是由于长久没关机或者开的软件太多，内存被一直占满了，方法如下：
    1、强制关机，重启电脑看看能不能正常进入系统。
    2、开机时按option，选择Macintosh HD进入，看看能不能正常进入系统
    3、重置一下NVRAM：先关机，然后开机时同时按下option+command+P+R，听到3-4声启动声音后进入系统，看看是不是恢复正常
    4、如果以上操作都不行，尝试进入安全模式：开机立即按下shift，直到出现苹果图标，这个启动过程比正常的启动过程要慢一些，然后用你的账户密码登录系统，然后重启电脑，正常启动，应该恢复正常。

    一般比较严重的都是第三条引起的。

  • 开启Chrome自带的多线程下载功能

    Chrome 浏览器自带多线程下载功能，只不过默认是关闭的，打开 Chrome 浏览器，国产 Chrome 内核的浏览器通通适用，包括前段时间推送的新版 Edge 也可以，在地址栏输入

    chrome://flags/#enable-parallel-downloading

    打开后如下图模式

    选择“Enable”，出现”Relaunch”(重启浏览器)，点击它，重启后就开启了多线程下载功能。

  • 服务器发回了不可路由的地址，使用服务器地址代替的解决方法

    使用Filezilla连接路由器内的计算机搭建的ftp服务器时常会出现如下错误：
    状态: 服务器发回了不可路由的地址。使用服务器地址代替。
    解决方案：
    更改Filezilla设置，编辑-设置-连接-FTP-被动模式，将“使用服务器的外部ip地址来代替”改为“回到主动模式”即可。

  • js的各种判断(持续更新ing)

    Js判断客户端是否为PC还是手持设备

    <script type="text/javascript">
function IsPC()  
{  
  var userAgentInfo = navigator.userAgent;  
  var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");  
  var flag = true;  
    for (var v = 0; v < Agents.length; v++) {  
      if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }  
        }  
        return flag;  
}
// 是否PC端
</script>
<script>
  $(function()
{
  if(IsPC())
  {
  $("#notpc").hide();
  $("#ispc").show();
  }
});
</script>

     

    js判断是否在微信浏览器中打开

    <script type="text/javascript">
var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1})();
if(is_weixin){
    $(function(){
        return true;
    });
}else{
    $(function(){
        return false;
    });
}
// 是否微信浏览器打开
</script>
<script>
  $(function()
{
  if(is_weixin)
  {
  $("#notweixin").hide();
  $("#isweixin").show();
  }
});
</script>

     

    js判断是否是Android

    <script type="text/javascript">
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1
// 是否是Android
</script>
<script>
  $(function()
{
  if(isAndroid)
  {
  $("#ios").hide();
  $("#android").show();
  }
});
</script>

     

  • MAC设置允许任何来源

    在升级了macOS Sierra (10.12)版本后在“安全性与隐私”中不再有“任何来源”选项

    接下来，我们就打开终端，然后输入以下命令：

    sudo spctl --master-disable

    输入后，可能会让你输入电脑的密码，输入就可以（屏幕上不会显示，但你真的输入了，Linux和Unix核心输入密码都是这样的）

    然后再重新打开安全**隐私，就惊奇地发现，已经出现并选中“任何来源”啦。