IOS端二维码小工具
JSbox是苹果IOS端的一个app，可以将JavaScript代码翻译成IOS端的原生程序，它的文档地址是https://docs.xteko.com/，但是在2020.10.03以后就停止更新了，因为随着PWA应用等移动端原生解决方案的兴起，没有人再去造轮子了（其实从JSbox的简介上也能看出，JSbox本身就是前端开发者的玩具）。JSbox成为了历史，但是研究一下它的设计理念还是很有乐趣的，我当初还花了￥50买了这款app，用JSbox写的一个二维码小工具，可以让二维码图片和文本互转（编解码），下面是config.json：
{
"info": {
"name": "",
"url": "",
"version": "1.0.0",
"author": "",
"website": "",
"types": 0
},
"settings": {
"minSDKVer": "1.0.0",
"minOSVer": "10.0.0",
"idleTimerDisabled": false,
"autoKeyboardEnabled": false,
"keyboardToolbarEnabled": false,
"rotateDisabled": false
},
"widget": {
"height": 0,
"tintColor": "",
"iconColor": ""
}
}源代码就一个main.js搞定，三年过去了，不知道还能不能运行：
// 项目入口文件
// 项目同步到iPhone原理:根据单个文件,寻找依赖(require)直至整个目录
const radius = 15
const margin = 20
const height = 40
const width = $device.info.screen.width
// 全局变量
$app.img = null
$ui.render({
props: {
title: "Fancy QR",
},
views: [{
type: "scroll",
props: {
id: 'container',
bgcolor: $color("#000000"),
radius,
},
layout: function (make, view) {
// make.size.equalTo($size(0, 0))
make.left.right.top.bottom.insets($insets(margin, margin, margin, margin))
},
events: {},
views: [{
type: "image",
props: {
id: 'image',
bgcolor: $color('white'),
radius,
},
layout: function (make, view) {
make.top.inset(margin)
make.left.inset(margin)
// make.right.inset(margin)
make.width.equalTo(width - margin * 4)
make.height.equalTo(view.width)
},
events: {
tapped: function (sender) {
$quicklook.open({
image: $app.img
})
}
}
}, {
type: "input",
props: {
id: 'input',
type: $kbType.search,
darkKeyboard: true,
text: 'https://'
},
layout: function (make, view) {
make.top.equalTo($('image').bottom).offset(margin)
make.left.inset(margin)
// make.right.inset(margin)
make.width.equalTo(width - margin * 4)
make.height.equalTo(height)
},
events: {
// 回车后自动编码
returned: function (sender) {
$app.img = $qrcode.encode($('input').text);
$('image').data = $app.img.png
}
}
},
{
type: "button",
props: {
title: "编码",
id: "encode",
},
layout: function (make, view) {
make.top.equalTo($('input').bottom).offset(margin)
make.left.inset(margin)
make.width.equalTo((width - margin * 5) / 2)
make.height.equalTo(height)
},
events: {
tapped: function (sender) {
$app.img = $qrcode.encode($('input').text);
$('image').data = $app.img.png
}
}
}, {
type: "button",
props: {
title: "解码",
id: "decode",
},
layout: function (make, view) {
make.top.equalTo($('input').bottom).offset(margin)
make.left.equalTo($('encode').right).offset(margin)
// make.right.inset(margin)
make.width.equalTo((width - margin * 5) / 2)
make.height.equalTo(height)
},
events: {
tapped: function (sender) {
$('input').text = $qrcode.decode($app.img);
}
}
}, {
type: "button",
props: {
title: "粘贴",
id: 'paste'
},
layout: function (make, view) {
make.top.equalTo($('encode').bottom).offset(margin)
make.left.inset(margin)
make.width.equalTo((width - margin * 6) / 3)
// make.bottom.inset(margin)
make.height.equalTo(view.width)
},
events: {
tapped: function (sender) {
$('input').text = $clipboard.text
}
}
}, {
type: "button",
props: {
title: "相册",
id: 'album'
},
layout: function (make, view) {
make.top.equalTo($('encode').bottom).offset(margin)
make.left.equalTo($('paste').right).offset(margin)
make.width.equalTo((width - margin * 6) / 3)
// make.bottom.inset(margin)
make.height.equalTo(view.width)
},
events: {
tapped: function (sender) {
$photo.pick({
handler: ({
image
}) => {
$('input').text = $qrcode.decode(image);
$app.img = $qrcode.encode($('input').text);
$('image').data = $app.img.png
}
})
}
}
}, {
type: "button",
props: {
title: "扫描",
id: 'shot'
},
layout: function (make, view) {
make.top.equalTo($('encode').bottom).offset(margin)
make.left.equalTo($('album').right).offset(margin)
make.width.equalTo((width - margin * 6) / 3)
make.height.equalTo(view.width)
},
events: {
tapped: function (sender) {
$qrcode.scan(function (text) {
$('input').text = text
$app.img = $qrcode.encode(text);
$('image').data = $app.img.png
})
}
}
}
]
}]
});
(function init() {
$app.img = $qrcode.encode($('input').text);
$('image').data = $app.img.png
})();本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2021-10-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读