沉迷JS无法自拔

jsbox.jpg

直接盗用了 @cyanogen 大佬的文章封面(侵删

我觉得有必要从 Cyan 的通知中心全家桶说起。所谓“全家桶”指的是包含 Pin, TodayMind, 小历 这三个 APP 的应用套装,不记得 Pin 和小历是限免还是冰点的时候入的了,其中 Pin 使用得最多,因为剪贴板和键盘结合真的很好用,由于换手机的关系大约有半年时间没有装回 Pin,后来因为某手机发布会上介绍的功能有原创性争议才重新想起了 Pin,于是在某鱼低价抛售了某品牌手机后重新装回了 Pin 和小历,然后以18软妹币的价格购买了“全家桶”把 TodayMind 也收入囊中,当时还在想已经买过其他两个了为毛还是原价来着,现在估计是因为当初是限免下载的?

后来好像是 Pin 更新到3.0版本加入了“xTeko 实验室”,因为那段时间比较忙,所以没怎么注意这个功能,再到这次 Cyan 大佬发布 JSBox 的时候才后知后觉这玩意儿有多牛×,于是第一时间转发了抽奖微博并订阅了兑换码放码通知,然而身为非洲菇并没有抢到和被抽到兑换码,于是在“实验室”玩了一整天后香菇果断下手“升级到 JSBox 套装”(扣费时硕大的“30元”字样跃入眼帘,心中不禁大骂 AppStore 计费系统有毛病,说好的优惠呢/(ㄒoㄒ)/~~),不过瞬间恢复心情,毕竟30块钱买个“IDE”还是很超值的23333,用 Cyan 大佬的原话来讲就是“JSBox 是个创造工具的工具”,其正真的价值在于使我的通知中心有了无限可能,身为前程序猿的菇有一定的代码功底,“退休”后不时的写点前端,理解起 js 来也没什么问题,虽然 JSBox Wiki 还在不断完善中,但结合丰富的 API 和 UI 示例来写自己的小工具还是没问题的——我可能真的能玩这个玩好几年2333

这两天通过 JSBox “移植”了1个以前写的莫名其妙的“随机取色器”到手机端,演示及代码如下:

香菇的随机取色器

$ui.render({
  props: {
    bgcolor: $color("#167EFA")
  },
  views: [{
    type: "button",
    props: {
      id: "bgView",
      font: $font("bold", 46),
      textColor: $color("white")
    },
    layout: function(make) {
      make.edges.inset(10)
    },
    events: {
      tapped: function(sender) {
        randColor()
      }
    }
  }]
})

var getColor = function() {
  var colorElements = "0,1,2,3,5,6,7,8,9,A,B,C,D,E,F"
  var colorArray = colorElements.split(",")
  var color = "#"
  for (var i = 0; i < 6; i++) {
    color += colorArray[Math.floor(Math.random() * 15)]
  }
  return color
}
var setColor = function(obj, color) {
  obj.title = color
  obj.bgcolor = $color(color)
}
var randColor = function() {
  setColor($("bgView"), getColor())
}

randColor()

测试 http 写了个一言 API 的简单调用,演示及代码如下:

调用一言API

$ui.render({
  views: [{
    type: "text",
    props: {
      id: "text",
      editable: false
    },
    layout: function(make) {
      make.edges.inset(10)
    }
  }, {
    type: "button",
    props: {
      icon: $icon("162", $color("gray"), $size(18, 18)),
      bgcolor: $color("#eee")
    },
    layout: function(make) {
      make.right.bottom.inset(10)
      make.size.equalTo($size(40, 32))
    },
    events: {
      tapped: function(sender) {
        setHitokoto()
      }
    }
  }, {
    type: "button",
    props: {
      icon: $icon("019", $color("gray"), $size(18, 18)),
      bgcolor: $color("#eee")
    },
    layout: function(make) {
      make.right.inset(60)
      make.bottom.inset(10)
      make.size.equalTo($size(40, 32))
    },
    events: {
      tapped: function(sender) {
        $clipboard.text = $("text").text
        $ui.toast("已复制到剪贴板")
      }
    }
  }]
})

var setHitokoto = function() {
  $("text").text = "Loading..."
  $http.get({
    url: "https://sslapi.hitokoto.cn/",
    handler: function(resp) {
      var text = resp.data.hitokoto + "\nFrom: " + resp.data.from
      $("text").text = text
    }
  })
}

setHitokoto()

记得很久很久以前的远古时期跟蘑菇说过要写个小工具来解决“今天吃什么”这个千古难题,演示及代码如下:

今天吃什么

var menu = "米饭,炒米饭,黄焖鸡米饭,锅巴饭,烤肉饭,鸡蛋面,香菇面,炒面,拉面,小面,蘸水面,干拌面,包子,饺子,凉皮,米皮,擀面皮,肉夹馍,煎饼,炸鸡,汉堡,披萨,面包,薯条,蛋糕,寿司,热狗,虾,火锅,苹果,梨子,橘子,葡萄,椰子,菠萝,桃子,玉米,草莓,西瓜,哈密瓜,奶茶,咖啡️"

var foods = menu.split(",")
var timer
var btstart = "~ BIU ~"
var btstop = "- STOP -"
var labdefault = "略略略"


$ui.render({
  views: [{
    type: "button",
    props: {
      id: "button",
      title: btstart,
      font: $font(32),
      bgcolor: $color("#167EFA")
    },
    layout: function(make, view) {
      make.height.equalTo(48)
      make.centerX.equalTo(view.super)
      make.bottom.left.right.inset(10)
    },
    events: {
      tapped: function(sender) {
        var btn = $("button")
        if (btn.title == btstart) {
          btn.title = btstop
          var i = 0
          timer = $timer.schedule({
            interval: 0.05,
            handler: function() {
              var food = foods[Math.floor(Math.random() * foods.length)]
              $("label").text = food
              if (i++ > 100) {
                timer.invalidate()
                $("button").title = btstart
              }
            }
          })
        } else {
          btn.title = btstart
          timer.invalidate()
        }
      }
    }
  }, {
    type: "label",
    props: {
      id: "label",
      text: labdefault,
      font: $font(52),
      align: $align.center
    },
    layout: function(make, view) {
      make.left.right.inset(10)
      make.top.inset(48)
      make.centerX.equalTo(view.super)
    }
  }]
})

两个 APP 这方面的“能力”实际上是一致的,不知是否是“先入为主”,菇感觉在 xTeko 中撸代码更舒服,但 JSBox 提供了更专一更纯粹的功能,UI 也更整齐统一,这一点我还是很喜欢的。

xTekoUI

▲ Pin xTeko 的列表、编辑器和 DEBUG

JSBoxUI

▲ JSBox 的列表、编辑器和 DEBUG

下边是引用作者的原话,这才是“情怀”吧~

关于为什么要做这么一款应用,我其实还有一个私心。
我始终都记得童年时代用电子词典玩各种程序的日子,那段时光很美好,也在一定程度上培养了我们的兴趣。
当时的电子词典上也有各种各样的编程平台,例如
GVBASIC/LAVA/BBASIC,尽管童年一去不复,这些名字也已经被人所遗忘,但是对于编程的热情却不会停止,指引我们在这件事上做出更有趣的东西。
我始终相信,这些驱动我们去不断折腾的精神,是让世界变得更美好的原因之一。所以我们为真正的极客,做了这个应用。
Via. https://sspai.com/post/42361

Ps. 这是一篇疑似推广软文,不收广告费的那种。
Pss. 说起来你可能不信,博客数据库编码貌似不能保存 emoji 所以“今天吃什么”代码中的 emoji 字符都去掉啦,嗯!手机端写代码直接输入使用 emoji 还是很骚气的嘛2333
Psss. 有兴趣的小伙伴去支持一下国产呗
Pssss. 目前仅限 iOS AppStore 有售

标签: none

已有 22 条评论

  1. 你这是写js还是jQuery啊

    1. 虽然有「$」但是是在jsbox里写的js?‍♀️

  2. 不错,学习了!

  3. 首先给我来碗圣诞香菇鸡肉面(/滑稽)

  4. 昨天百度了半天才解决用 js 给标签套标签(滑稽

    1. dom操作很迷233

      1. 别跟我说这些,我啥也不懂,代码反正我是直接抄过来用的(~ ̄▽ ̄)~

  5. txh txh

    卧槽,你是学啥的。这个开发iosApp吗

    1. 唔…真要说起来虽然是网络工程专业的菇但是是学英文的哦~这个工具怎么说呢?本身是个 iOS APP 但是可以运行js代码,同时集成了不少外部及系统API和UIKit,可以在手机/平板环境下开发一些自己想要的小工具并直接在主界面或通知中心运行~
      嗯!你的站好特别~喜欢?

评论已关闭