IOS端二维码小工具

Posted 2021-10-16 XOSG

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
})();