Weex--条形码生成

最新推荐文章于 2024-07-10 16:01:41 发布

奔涌者

最新推荐文章于 2024-07-10 16:01:41 发布

阅读量474

点赞数

分类专栏：前端文章标签： Weex Weex条形码

本文链接：https://blog.csdn.net/baidu_27603429/article/details/90272671

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Weex中要生成条形码，weex没有其工具或者框架可实现的；但是可以使用js条形码生成插件来进行生成条形码，并使用<web />组件来加载实现。以下是实现的案例：

实现步骤：

1、放在本地file文件夹的js条形码生成HTML

JSBarcode.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js生成条形码插件</title>
    <script src="https://cdn.bootcss.com/jsbarcode/3.8.0/JsBarcode.all.min.js"></script>
    <style>
        * {margin: 0;padding: 0;box-sizing: border-box;}
        h3 {text-align: center;font-size: 16px;margin: 10px;}
        .box {text-align: center;}
        #barcode {width: 200px;}
    </style>
</head>
 
<body>
    <h3>js自动生成条形码插件-JsBarcode</h3>
    <div class="box">
        <img id="barcode" />
    </div>
    
</body>
<script>
    var barcode = document.getElementById('barcode'),
        str = "16620902551",
        options = {
            format: "CODE128",
            displayValue: true,
            fontSize: 18,
            height: 100
        };
    JsBarcode(barcode, str, options); //原生
    // $('#barcode').JsBarcode(string, options); //jQuery
</script>
</html>

2、使用<web />组件来加载

<web style="height: 400px;" src="root:file/JsBarcode.html"></web>

奔涌者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录